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.
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 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.
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)
Product page
Google Speed Insights: mobile and desktop (with banner image in header)
How does any Amazon product page perform?
Google Speed Insights: mobile and desktop (with banner image in header)
Overall, you could say that your theme is faster than Amazon
Optimize images
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.