We Build Shopify Apps

Montreal-based Shopify experts cooking some Shopify apps.

Speed results: what to test and how to understand the results

Understanding your store loading speed

Overall, your store page loading speed is the result of the following equation:

Page weight  x  Number of HTTP requests =  Time to load

Our theme's goal is then to be the lightest as possible and making as few HTTP requests as possible. 

A fast theme doesn't mean a magical theme.
For example, switching to our theme won't magically optimize your heavy images, nor reduce the loading time from 3rd party scripts or apps.

Note: is it possible that switching to an optimized theme won't improve your speed test results. Learn more .


Before testing the theme

First, keep in mind that speed results depend on the tool used and on the theme features enabled on your store. But even more, results are highly correlated to the (un)optimization of images and number of apps and scripts running on your store.


Note from the GTmetrix FAQ

Do I have to fix everything?
No, not at all! Start with the recommendations at the top. The report organizes recommendations in order of what has the most impact on your score. Realize that 100% is not realistic, and a green score generally means your site is speed optimized. Remember that these tools are meant to be used for a wide variety of site types, and so some recommendations may not apply to your site.


Optimize images

Images represent around half of your loading speed. That's why they are the #1 factor and therefore crucial to compress/optimize to the best possible weight vs quality. You can use Photoshop or online tools like this one , this one this one  or that one . Shopify posted a great article about the topic here . There is also Shopify apps like this one that can help.

Overall, each image should be compressed (you can reach around 80% of compression without decreasing the quality of the image) and resized to the size you actually need (eg. don't upload a 800 x 800 image if you only need a 150 x 150 image).

Remove apps

Remove unused apps (and the scripts they leave in your theme files after being uninstalled). Some apps don't affect loading speed (eg. inventory or shipping related apps) but some others are killing your store speed (eg. popup, live chat and other fancier apps that interact with the customer experience with some lottery wheels and gift boxes).

Remove useless sections (on homepage)

When a theme has multiple sections available, it's easy to get lost and put a lot of stuff on your homepage. If you test your homepage speed with Konversion and you see it's not loading fast, double check what sections (block of content) are really needed on your homepage. Most often, putting too many feature collections/products/slideshows doesn't provide any added value to the customers. When you doubt you should put this or that section, that probably means you should remove them and focus on what brings value to the customer experience. 

Disable unused theme features

Sometimes you go to the Customize theme section and play with the different features available, enabling and disabling them. Make sure you don't enable a feature that you don't use, because even non-visible features on a customer point of view will drain some resources and affect your loading speed. Try to compare your store speed with multiple theme features enabled versus without no extra feature available. Same logic than above with a store filled with enormous piece of heavy content and multiple sections on the homepage.

Locate the bottleneck(s)

Using a tool like GtMetrix or Pingdom, you can identify what slows down your store the most. GtMetrix has a tab called Waterfall that displays the time it takes for each call/request to load. For example, the first row at top is the time it takes to call Shopify's server to load the store. If you re-test it, the results will be different for this first row, and for the others as well. You will notice on your store that what affects speed the most are images and 3rd party scripts (apps, google fonts, etc).



Testing the theme

With human eyes

The most important thing of an optimized theme is to prioritize the user experience over some fancy speed test tool results. For example, speed tools will recommend a loading technique that creates a blank page during around 0.5 seconds... but we all know that users will leave the store during this 0.5 second if they don't see some content.

Browsing through the store, you will notice that the loading speed is close to instant when you test with human eyes, as a real customer. 



With robot tools

Make sure your theme is published (and not in preview mode) before testing with speed tools

The speed test tool results below were made on a demo store with no apps installed. Not all features of the theme were activated. Important note: some tools don't recognize/ignore Shopify's CDN (one of the most important optimization factor). For example, on GTmetrix you need to login and add Shopify's CDN in the settings.



Compared to speed test tools, real browsers like Chrome, Firefox, Safari, Edge, etc cache most of the heavy stuff (eg. Google Fonts), so the consequent requests take a fraction of the time to load.

Homepage results

The homepage on Shopify is built with sections (in the most recent themes). Each section, especially the ones that gives some flexibility (eg. button color or google font choice) is kind of penalized by speed test tools. They consider it as <inline> style and they recommend to remove them (same for all the pages with sections actually, and our theme has all the pages with sections easily customizable by the admin user). If you do follow that recommendation, well, you don't have any homepage anymore! The battle between flexibility and speed in a admin-friendly theme for non-developer users is always present, and in the decision process, we go towards the logic choices. 

Google Speed Insights: mobile and desktop  (with banner image in header)

GTMetrix: Onload speed  vs  fully loaded page

GTMetrix recently switched from the onload time to the fully loaded time (learn more here ). Which means the result is the number of seconds that it takes to load all scripts, including any 3rd party scripts or apps or external librairies (eg. google fonts, facebook like, messenger live chat, etc). The onload speed is what concerns us most because we can't have any control on 3rd party scripts loading after the theme. You can test the onload time in your user settings. Learn how here .

Pingdom

Webpagetest.org


Collection page

The loading speed on which we focus most is the one on the collection and product pages. Considering most ads on Facebook, Instagram, Google and then most of your store traffic will arrive on your collection or product pages, we put the emphasis on optimizing them. By default, these pages are stripped from any additional features (eg. Related products, product reviews, content tabs, color swatches, trust icons and more) but you can enable them in a few clicks. Learn more about the collection page features and the product page features

Google Speed Insights: mobile and desktop  (with banner image in header)

GTMetrix:  Onload speed  vs  fully loaded page

Pingdom

Webpagetest.org


Product page

Google Speed Insights: mobile and desktop  (with banner image in header)

GTMetrix:  Onload speed  vs  fully loaded page

Pingdom

Webpagetest.org


How does any Amazon product page perform?

Google Speed Insights: mobile and desktop  (with banner image in header)

GTMetrix:  Onload speed  vs  fully loaded page

Pingdom

Webpagetest.org

Overall, you could say that your theme is faster than Amazon


Some recommendations from Shopify

Optimize images

  1. Download ImageOptim and open it;
  2. Drag your theme’s “assets” folder into the application;
This is really useful. Even if you think your images are optimized, they probably are not. Try it.

Refactor CSS

Our theme's SCSS file is pretty light. We could minify it, but that would make it impossible for you to edit it after. 

Kill carousels

This means to get rid of the sliders. Most merchants like to have a slider in their homepage. Just make sure you don't put more than 3 slides and that your images are compressed & optimized, and not filled with lots of heavy high-resolution images.

Replace background images with CSS

Shopify recommends something that over 95% of their merchants don't have the technical skills to do....
Using images in your store background is a bad idea overall. Not need to replace them with CSS, just remove them for the sake of a greater user experience.

Device-responsive design

Our theme is built mobile-first, which means we really built it for mobile first, then for desktop. The approach is different from the one to build a desktop theme and to make it responsive for tablet and mobile devices. 

Lazy image loading

This indeed improves initial onload time, but might affect user experience by displaying some blurry images for a moment, for example.

Concatenation (combining multiple asset files into a single file)

Our theme does that as much as possible. Sometimes, we can't combine some assets together for obvious reasons.

Minification (transform human-readable js and css into browser-friendly 1 line of code)

Our theme does that as much as possible.


Some other recommendations from speed test tools

If you try to reach 100/100, you might never sleep again nor see your kids grow

Better Server Response Time

The beauty of Shopify is that you don't have any server/hosting management to do. The downside is that you rely on Shopify to have fast server response time.

Optimize CSS

Most tools recommend to optimize css... one of the main recommendation is to remove google fonts. The alternative would be to load some font files inside the theme assets folder... or to ask you to do it because you probably will want a font that we don't have by default... and that might quickly become a real headache. Google fonts are reliable, rich and numerous. 

Add expire headers

If you check next to the Add expire headers, you see that the "type" is "server". Since your store is hosted by Shopify, there is nothing we can do about it. 

Minify CSS & JavaScript

In your theme file, you have by default the Javascript file minified (you also have an un-minified version of the same file). About CSS, we can’t minify it. CSS compressors don’t understand Liquid (Shopify theme language), so compression stops with error. We finally succeeded to do it, but the speed gain wasn't worth the mess it involves (it actually removing Liquid from CSS and adding inline style, which is worst on loading speed). 

Leverage browser caching

This is taken care of Shopify's CDN. Make sure your speed tool recognize it.

Fix the render-blocking issues

This recommendation is not possible without breaking your installed apps, your theme and then your store. 

Enable compression

This is taken care by Shopify (server side).

Defer parsing of Javascript

We do the best we can. Most of the JS is included at the end of template files, so it’s only loaded when the page is available for interaction. Unfortunately, we can't control the apps scripts. Lots of them require to insert a <script> right into the theme.liquid file. And they either don't load after the page content is loaded (defer loading) and/or affecting speed tool results that consider the fully loaded page time. We do have a "Apps" tab inside General Settings where you can put most of your app scripts though.

Remove query strings from static resources



Browsers cache images hard, so if you had an image like `<img src=pic.jpg` and you re-uploaded it or changed it, anyone who loaded the page previously, might get old version of the image from their cache. Shopify changes the `v` parameter, to avoid that. And to avoid lots of complaints of merchants not understanding why they see an old image in their homepage slideshow after changing it, for example. Overall, this recommendation is based on 10 years old standards and there any “authority” recommending this or at least confirming it.


Get In Touch

Tabarnapp's mission is to help you get the most of each visit on your Shopify store.

E: support@tabarnapp.com