Shopify Speed Optimization

Increasing (perceived) website speed is one of the best ways to ensure you are doing your best to convert shoppers into buyers. It makes a more enjoyable experience for users by decreasing waiting time between pages, it optimizes for slower devices and connections and lastly, as a bonus, Google uses their PageSpeed score as a metric in their search results rankings.

To better understand how to increase speed, we have to explain how a typical website is loaded in your browser.

How a Website Loads

1. Once a user clicks a link or enters a URL, a request is made to your web server
2. The server processes the request and then
3. Responds by sending back HTML based on your request
4. The browser receives the HTML and starts to process the page structure (known as DOM). The beginning of this step is known as the TTFB or Time to First Byte.
5. The DOM loads and the browser starts to render the page

Time to First Byte (1–4 above) is mostly in the hands of Shopify. They control how fast the server responds to requests and they do a very good job of this. Everything past that is where we come in. The HTML sent back to the browser will depend on your theme setup, file sizes, apps and any other customization you make to the website so this is where you can start optimizing. The more efficient this HTML is, the faster you can render the page that the user will see. If you have ever been to a site where you see a blank or mostly blank page for a few seconds after you request the page, that means the page is not optimized.

Tools to Test Your Website Speed

• Google PageSpeed Insights
• Treo Site Speed
• WebPageTest
• Pingdom Tools

Google’s PageSpeed is arguably the most important score to focus on initially. This score is very user-centric and improving the score will greatly improve a user’s experience as they are shopping your site. Their method is based on the concept that the faster the user sees something useful and can interact with the page, the less time they will spend staring at nothing, and hence the higher your score.

Shopify gives a score in their admin dashboard called the Online store speed which is based on Google PageSpeed Insights and similar to Lighthouse. Google gives one score for mobile and one for desktop. This score is based on one single criteria and user example (a specific location, device, network, OS and browser)—it is not an average.

Important Core Web Vitals Metrics

1. TTFB – Time to First Byte: The time from request to the first byte of response from the server.
2. FCP – First Contentful Paint: The time it takes from the First Byte until the page renders something useful to the user in the form of text, images or non-white content.
3. FID / INP – First Input Delay / Interaction to Next Paint: The time it takes for a user to be able to interact with the page. INP replaced FID as a Core Web Vital in March 2024.
4. LCP – Largest Contentful Paint: The time it takes for the largest image or text block within the user’s viewport (“above the fold”) to load.
5. CLS – Cumulative Layout Shift: Measures how much of the page shifts around while loading, which is very annoying to the user, especially if they are trying to click something.

How to Optimize Your Page Speed

In order to receive a high score for FCP, INP and LCP, you need to give the browser only what it needs to show the user content above the fold. To further optimize the loading speed, the content and code sent to the browser should be as small (in bytes) as possible.

• Lazy load all images and content below the fold
  • Prioritize the LCP resource—preload the hero image
• Eliminate render-blocking CSS and JavaScript
  • These are files that must be downloaded, parsed and executed when encountered by the browser
  • Lighthouse will identify these resources in their report
• Lazy load all scripts including ones from third-party apps
  • You may have to inject and defer third-party scripts manually and contact app developers to prevent duplicate loading
• Use optimized images in modern formats
  • Homepage creative is generally the Largest Contentful Paint—keep file sizes small, especially on mobile
• Avoid layout shifts during page rendering
  • Add width and height to all images and videos
  • For dynamic content, reserve space using CSS
• Optimize fonts
  • Only add the exact font weights needed on the page
  • Ideally use system fonts which are fastest to load
  • Use a maximum of 4 custom fonts
  • Use font-display: swap to show fallback text until custom fonts load

Understanding INP (Interaction to Next Paint)

INP measures the delay from when you click or swipe to when you see something. For example, clicking add to cart or clicking a secondary image on the PDP. If the user sees a temporary message, image, text block, or loading icon right after a click, that satisfies the INP requirements—it tells the user something is happening.

A very important distinction between INP and the old FID metric is that INP measures interactions for the entire page lifecycle, just like CLS. This metric makes sense as a Core Web Vital because it improves user experience and eliminates the “nothing is happening” experience that frustrates shoppers.