How preloading critical assets can improve your Shopify website’s performance
When a visitor browses your online Shopify store, a lot happens in the background that both you and your visitor won’t see. Your Shopify website is served to the visitor’s browser, where the browser then starts to download it in chunks, before assembling all the elements together to display your complete website to the visitor.
The browser has to prioritize which resources/assets within your website should be downloaded and displayed first (for example, web fonts or images). More often than not, the way in which the browser downloads and serves your website to the user can negatively affect your page loading times, resulting in a slower than necessary Shopify storefront.
The consequences of a slow Shopify storefront can lead to a high bounce rate and a loss in sales. Statistics show that even a one-second delay in page loading times can lead to a 7% decrease in conversions!
The good news is that you can give the browser “hints” as to which resources on a page should be prioritized and downloaded first so that they’re ready to be executed when needed. These browser hints are better known in the coding world as “preload” and “prefetch”.
In this article, you’ll learn how these browser hints work, what resources you can preload, and how to set up “preload” and “prefetch” tags by adding a line of code within your Shopify theme. If coding isn’t your forte, fear not! You’ll also learn about how the TinyIMG app can do this automatically for you, making the process hassle-free.
The preload tag - how it works
The preload tag looks like this: <link rel="preload"> It can be added to your Shopify theme code as a link element within the head section.
*Screenshot from web.dev
It tells the browser that certain assets should be downloaded and cached so that they’re immediately available when needed. The preload tag should be used for resources that are needed for the current page.
To tell the browser exactly what resources should be preloaded, you can add another piece of code to the preload tag. The above screenshot indicates that the main.css file should be preloaded.
Here’s another example below:
<link rel="preload" href="fonts/K2D.woff2" as="font">
The “href” part of the code points to the asset that should be downloaded. In this case, it’s a font. The “font” value at the end of the code specifies the content type. And the “as” attribute is equally crucial. It allows the browser to prioritize resource loading and schedule the download properly.
How preload differs from the prefetch tag
The prefetch tag works similarly to the preload tag. It makes an early request for a resource needed on the next page, caches it, and serves it when needed, helping to speed up future navigation requests. Here’s an example of how the prefetch tag might look:
<link rel="prefetch" href="details.css">
Prefetch should be used for resources that are low priority and aren’t needed straight away. It shouldn’t be confused with preload which should only be used for important resources.
What assets can be preloaded?
As a rough guide, consider what the top 80% of resources your store visitors are likely to need when browsing your Shopify website and use those for preloading. On product pages, it’s a good idea to preload your featured images.
Note that you shouldn’t try to preload every resource as doing so can inadvertently harm your site’s performance. Also, bear in mind that not all browsers support both the preload and prefetch tags. This means that some visitors to your store may not notice the improvements these browser hints are making to your site’s performance.
Now, without further ado, here are two ways you can add the preload and prefetch tags to your Shopify theme.
Solution 1 - add the necessary code to your theme manually
*Screenshot from Shopify.
If you’re not technically-savvy or are really busy managing other aspects of your store, you might want to hire a Shopify developer to help you with adding code to your Shopify’s theme.
But if you’re familiar with editing code and you’re happy to dig right in yourself, here’s what you need to do:
Step 1: Make a backup of your Shopify theme before editing any code. To do this, visit your Online Store, click on Themes, then click on Actions within your current theme. Finally, click on Duplicate.
Step 2: Going back to your current theme, click on Actions and then Edit Code. Select theme.liquid under the Layout heading on the left-hand side of the screen.
Step 3: Add the preload tag in the head section of this file (complete with the code for the content type that you want to preload). Place it anywhere between the opening <head> and closing </head> tags and click Save to save your changes.
If you prefer, you can add the preload tag to your duplicated theme and then publish that one when you’re happy that the changes are correct. Doing this will help you avoid any downtime on your website, should anything go wrong.
Solution 2 - use TinyIMG to preload resources automatically
TinyIMG is an intelligent image and website optimization tool for Shopify and Shopify Plus stores. Primarily, the app automatically compresses images (another thing you can do to help speed up your Shopify website) and provides an SEO structure for your images by generating image alt tags and filenames.
As well as that, TinyIMG includes the necessary code for preload and prefetch tags too - it’s a FREE benefit of the app itself. Which means that once you’ve installed and activated the app, TinyIMG will instruct browsers to preload and cache the important assets of your website, without you having to enter any code whatsoever!
Preloading and prefetching certain assets within your Shopify store can help to boost your site’s performance. Through these browser hints, you can tell the browser which assets to prioritize for download and caching so that they’re ready to load for the user when needed.
When implementing these techniques, take care to preload and prefetch only the resources that are needed. The preload tag is recommended for assets on the current webpage, whereas the prefetch tag should be used for future navigation requests.
You can add the preload and prefetch tags into your Shopify store’s theme.liquid file manually by following the steps above. Always take a backup of your Shopify theme before editing any code.
With that said, an easier way to do this is to install the TinyIMG app, as it will provide these browser hints automatically and help boost the speed of your website with virtually no effort on your part.
Other ways you can speed up your Shopify website aside from compressing your image sizes, is to remove any unnecessary Shopify apps and reduce the number of HTTP requests that occur when someone visits your online store. Here’s an article which explains how to do the latter.