Updated: 18 Sept 2023
We help Shopify merchants improve their web performance and see three common problems related to layout position:
- Lazy loading images above the fold
- Asynchronous loading of CSS needed for elements above the fold
- Not prioritizing the fetch of the the Largest Contentful Paint (LCP) image
Historically, these three issues have been difficult to solve in Shopify themes, so we created some new features to help. This post will help you better understand these performance antipatterns so that you’re ready to use the new features.
What is image lazy loading? Jump to heading
Lazy loading of images is a web performance pattern to help prevent the unnecessary download of files that may not be needed. This helps reduce total bytes downloaded. It also frees the browser to better prioritize more important assets needed for initial render. The opposite of "lazy" loading is "eager" loading. Eager loading is the default behavior for browsers that encounter an
In the case of images, there are two ways to lazy load images:
- Using the native
<img src="image.jpg" loading="lazy" />
- Using a library like lazysizes:
<script src="lazysizes.min.js" async=""></script>
<img data-src="image.jpg" class="lazyload" />
Currently, the main benefit that tools like lazysizes have over the native solution is that they can automatically calculate the
sizes attribute for lazy loaded images. The good news is that this has been proposed and accepted as a new feature in the HTML specification. Chrome is releasing a dev trial soon with Firefox and Safari indicating positive intent to ship, at the time of writing.
Unfortunately, for both methods, you need to set the
sizes attribute manually for any image that needs to be eagerly loaded. The size cannot be calculated until after paint, leading to the same problem with delays as mentioned above. The
sizes attribute is notoriously difficult to get correct. In these cases, the Responsive Image Linter Chrome extension can help you dial it in more accurately. Put in any "bad" value for the
sizes attribute, and it will suggest a good value for you. The
srcset suggestions can be a bit aggressive - you don’t need a perfectly sized image for every width. It’s faster to have a shorter list of widths to take advantage of caching.
The impact of poor lazy loading on performance Jump to heading
Historically, theme developers have not been able to determine section order or position. This caused many themes to apply lazy loading to all images. The result is that 82% of Shopify sites now lazy load their Largest Contentful Paint (LCP) images.
This performance antipattern causes the LCP to be delayed by varying amounts, depending on device and network speeds. In this test for improving the Dawn theme last year, switching the article header image to eager instead of lazy loading improved performance by 0.5 seconds:
In addition, when looking at the broader web through HTTPArchive, the distribution of Shopify sites that lazy load their LCP element is slower than the eager-loaded distribution. The median LCP for the lazy loaded sites is 1.0 second slower than the eager loaded ones. When we go further along the tail, that difference increases to 1.4 seconds at the 75th percentile:
What is asynchronous CSS loading? Jump to heading
Async loading of CSS is a handy pattern considering Shopify themes often need more CSS for theme flexibility. It helps de-prioritize CSS that may not be needed right away. This pattern is closer to a hack than a feature; although it is a handy one. This is what the code typically looks like:
<link rel="stylesheet" href="my.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="my.css">
<link> fallback within a
Here is what that process would look like using our simplified render diagram:
The impact of poor asynchronous CSS loading Jump to heading
We see many Shopify sites using this pattern causing layout shifts. This impacts Cumulative Layout Shift (CLS), another Core Web Vital. Stated another way, if elements above the fold need those styles, a user will see a flash-of-unstyled-content (FOUC), or what I like to call a flash-of-semi-styled-content. Let’s call it "FOSSC":
Style reflows due to late CSS can also destroy an otherwise perfectly crafted image lazy loading strategy. The IntersectionObserver might "wrongly" detect an image in the viewport only to have late CSS push that image further down the page. Injected components can also do this. The net effect could be that many images are loaded at once even if the final page layout should only have downloaded a few.
What is fetch priority? Jump to heading
Fetch priority is a more subtle concept. The number of files needed to show a website is high, thus smarter ordering of the files in the download queue can result in a faster perceived user experience. Browsers set download priorities based on different file types and contexts. For example, browsers fetch CSS files at the highest priority because they are render-blocking and needed for initial render.
By default, images are fetched at a low priority. Once a browser determines an image is visible and needed sooner than offscreen images, it can change the fetch priority to high:
The Fetch Priority API allows us to hint to the browser that we’d like a different priority set for an asset. For example, if we’re almost certain a particular image element will be the LCP element, we can set its priority to high:
<img src="LCPimage.jpg" fetchpriority="high" alt="Important image!">
On the other hand, if we know an asset is not important, we can set its priority to low so that other more important files can download sooner.
Don’t go wild with this feature! If everything is important, then nothing is important, and we’ve made the browser less optimal than its default behavior.
The impact of poor fetch prioritization Jump to heading
In most cases, the impact is a missed opportunity of not getting your LCP image fetched at a high priority from the start. This is about a 0.3s improvement (conservatively) left on the table.
On the other hand, you may use prioritization poorly by setting too many assets with
fetchpriority="high". This could de-optimize the loading prioritizations, delaying both FCP and LCP.
Help is here Jump to heading
We now have some new features for Liquid storefronts to better cope with these issues:
Default lazy loading for the
image_tagfor sections further down the page
New section properties
section.locationfor more fine-tuning of image lazy loading as well as async CSS loading.
Check out Announcing new Liquid features for better web performance to learn all about how they work and to see code samples.