Last Updated on by Dan S
Originally Published May 19, 2020.

Speed is an important factor for 2 reasons. The main reason is a slow site will result in lost sales. Amazon conducted a test on this and a slowness of 1 second could cost them $1.6 Billion in sales each year.. yeh. The second reason is for SEO purposes. A faster site means it will serve the customer quicker and search engines like this.

An important tool for measuring speed is Google’s Lighthouse. It’s what most other speed-measurement tools are using for their performance engine and it’s built in to Chrome Dev Tools.

We recently conducted a performance audit on Shopify sites and third-party content was the number one culprit for slow load times on both sites amongst other friction points. Here’s what we did to bring render time down on 3G mobile by at least 1 sec:

1.) DNS Prefetch the Shopify CDN domains that serve static assets and fonts.

2.) Go through theme.liquid and header.liquid and replace “{{ ‘somefile.js’ | asset_url | script_tag }}” with <script async src=“{{ ‘somefile.js’ | asset_url }}”></script> where possible. jQuery and other critical files should *not* load asynchronously.

3.) Find where all your third-party apps are inserting scripts and conditionally load them, e.g. if you have a script that only needs to load on your Product pages, surround that script tag with {% if == ‘product’ %} to ensure it doesn’t load on other pages. 

4.) Additionally, change those third-party scripts to load asynchronously so they don’t block rendering.

5.) Go through your CSS files and add “font-display: swap” to any font-face declarations.

6.) Add “loading=‘lazy’” to all images across the site, including hero images, product images, thumbnails, etc.

7.) Your theme probably already uses srcset to load product images at a size appropriate for your device, but for background images you can use JS to check the window.innerWidth property of the viewport and load a background image that’s the same width.

Some of these changes are high-level so we suggest hitting up the Shopify Experts Directory or Upwork if you need assistance. Remember to always backup your theme before making edits.