Speed Up your Page Loading Time

What is page loading time?

Page loading time (or page loading speed) is the total time necessary for the browser to fully download and display the content of a web page, measured in seconds. This parameter is calculated immediately after a request is sent from the browser to the web server, and ends when the entire page has been fully displayed on the browser.

A few examples of a request are: When a customer clicks on a product, opens a collection, or submits a form on your online store.

How do I check my website’s loading speed?

Use online measure tools

There are a lot of website performance measuring tools available, both free and paid. Some common names are Pingdom, GTMetrix, and Google PageSpeed Insights.

Generally, each of them will have its own calculation metrics and provide a different result, but ultimately they will give you a rough estimation of how your page is performing on the front-end – on your customer’s browsing device.

Test loading your website

Sometimes the best monitoring tool is your own impression. Aside from using technical measuring tools, you can also test load your website at any time.

Visit your website and browse around pages, on multiple devices, under multiple internet connections while using different browsers, and see if your website is performing to your standard.

How do I optimize my page loading speed?

There are many factors that are accounted for page performance, some controllable and some not. We’ve compiled a list of controllable components for you to best optimize your store.

Compress Media Files

Make sure all of your media files are well optimized before uploading them to the store. Use high-resolution images only when necessary, or your site will make a bad first impression by taking forever to load.

Control Image Quality and Resolution

In the Hero Banner and Parallax elements, you have the option to choose between Lighter and Lightest resolution for your banner under the Image Quality drop-down menu.

In the Image element, in addition to Image Quality, you can choose an image resolution under the Image Resolution drop-down menu. Pick a rational resolution that ensures fast loading speed but also sharp image quality.

Minify Code

In Shopify

• Optimize your theme code by removing unnecessary HTML, CSS JavaScript, and Liquid code, white spaces, comments, etc.
• Clean up your third-party app list: When you install and use a third-party app from the Shopify App Store, the app generates code into your theme. Consider deleting apps you no longer use.
• Redundant behavior tracking code from Google and Facebook could potentially slow down your site. Try to only keep the code you actually use.

In GemPages

• Make sure you have no unused elements lying around on your pages.
• Make use of the Lazy Loading feature.

• Make use of the Preload Font & Stylesheet feature.

Reduce redirects

Although redirects can be useful and are supported by Shopify, it’s best to keep using this function sparingly and definitely not abuse it.

Two reasons why: Redirects add in a request that lengthens the loading time, and it also takes a while for search engines to update and index the new changes.

Use a high-speed CDN

No work on this one cause we already did it for you! GemPages implements a high-speed CDN (Content Delivery Network) to cache content all around the world, making your site load faster wherever your customers are.

For popular search engines such as Google or Bing, mobile page performance has long been an important ranking factor, with its desktop counterpart considered as a key ranking factor even before that. Not only so, but speed also plays an undeniable role in improving visitors’ experience, reducing bounce rates, and eventually driving up your revenue. In other words, if you want to convert more, optimizing your page loading speed is something you simply can’t ignore

Check out more of our articles to start using GemPages like a pro.