Optimizing Shopify Page Speeds

Page speed is an important factor for how your customers experience your store and especially your landing pages. We’ve worked hard to ensure your Replo content is optimized for page speed. If you’re experiencing poor page speeds, the below information is valuable for understanding what can be done to improve.

Page Speed Scores can be misleading

Tools like Lighthouse, PageSpeed Insights, GTMetrix, and Speedboostr tend to oversimplify the complex concept of page speed into a single score. This approach loses a lot of nuance, and the scores often don't accurately describe page performance. Therefore, it's important to dig deeper into these reports and understand a few simple timing metrics.

To use an analogy, it's like scoring a meal based only on its total calories, without considering the myriad of other important factors.

Timing Metrics

There are dozens of important metrics for page speed and performance, but the main one is First Contentful Paint (FCP).

FCP is the time between when the user presses "go" and when they see the first non-negligible pixels on the page. When people talk about "Load Time", they're using talking about FCP.

Additionally, Largest Contentful Paint (LCP), Time to Interactive (TTI) and Total Blocking Time (TBT) are also important metrics to understand.

First Contentful Paint

A good time for FCP is under 1.8s. (web.dev)

First Contentful Paint (FCP) is a performance metric that measures how quickly visitors can view actual content, such as text, images, and videos, on your page. FCP is the time between when the browser says "go" and when some content appears on the page. A low FCP time contributes to a positive user experience, as visitors perceive the page to be loading faster when content on the page appears sooner.

Largest Contentful Paint

A good time for LCP is under 2.5s. (web.dev)

Largest Contentful Paint (LCP) measures how quickly the most substantial content on your web page can be loaded for your visitors. The assumption is that loading the largest content element on your page, such as a carousel or hero image, is a major indicator for your visitors of how fast your page loaded.

Time to Interactive

A good time for TTI is under 5s on average mobile hardware. (web.dev)

Time to Interactive (TTI) is the total time the page takes to load all JavaScript and make it so that content on the page responds to user inputs. There may still be other JavaScript running in the background (such as marketing pixels or other non-interactive scripts), but as far as the user can tell, the page is fully functional.

Total Blocking Time

Total Blocking Time (TBT) measures the total amount of time that Javascript on the page caused the page to become "blocked," preventing the user from interacting with your page. A high TBT can cause the page to feel "laggy".

Page Speed Testing Providers

There are many providers but here are a few of our favorites.

• GTMetrix - This tool is very popular and provides incredible depth of analysis. However, the analysis is not specific to Shopify and can therefore score pages harshly.

• Shopify Admin Speed Score - Shopify's native page speed analysis tool is based on Google's Lighthouse. It provides actionable and Shopify-specific measures you can take to improve your page's performance. The best part is that it's free and accessible in your Shopify Admin.

• Speedboostr - This Shopify-specific page speed tester is free for a handful of reports per month. It provides incredibly helpful and actionable insights into how you can improve your site's page speed, and provides metrics relative to averages for Shopify stores.

• PageSpeed Insights & Lighthouse - these are some of the most popular page speed testers available. They are free, built by Google, and provide a great balance between being easy to understand and offering in-depth analysis. However, since they provide analysis that is not specific to Shopify stores, they tend to grade pages harshly.

• Shopify Theme Inspector - This Chrome extension provides a simple way to visualize your page's Liquid rendering profile. It can help you identify code within your page/theme that might be slowing things down.

How to Improve Page Performance

Understand that Shopify can be Slow

Unfortunately, Shopify has a reputation for having slow page speeds, so a large component of page speed is out of your control (as long as you continue to use Shopify). As such, it's often valuable to use Shopify-specific page speed scoring. For example, this simple example Replo page scores a 42 on PageSpeed Insights and a C/68 on GTMetrix (which are platform agnostic), but scores an A/83 on Speedboostr (which is Shopify-specific)

It's important to understand that, in general, the benefits of Shopify and Shopify App features outweigh any negative impact on site performance. This perspective is particularly relevant when considering some of the largest Shopify brands, which have poor page speed scores but still perform well in the market. For example, Allbirds has a PageSpeed Insights score of 2 on mobile devices, while Bombas scores only 25.

Image Optimization

Replo uses Shopify’s CDN, which automatically optimizes image size in most situations. This means that on smaller screens, smaller images will automatically be loaded. However, sometimes it's helpful to be more aggressive than the Shopify's defaults. Luckily, Shopify has an extensive guide to optimizing images. In this process, lazy loading images below the fold in Replo is often an important consideration.

Hosting Videos

One potential optimization is to leverage video hosting services like YouTube or Vimeo instead of having a video served directly from Shopify’s CDN via the Replo Video Component. This is generally a good idea as the size of your video increases. This changes the what the page has to load from downloading a large video and then playing it in the browser, to simply downloading the video hosting service's JavaScript player and then letting it stream the video. For smaller videos, the former can often actually be faster. The cutoff is generally around 10MB worth of video (although this can vary depending on your setup).

Hidden Containers / Content

You can use visibility settings to hide components within your Replo pages based on the device type (mobile, tablet, desktop). However, it's essential to minimize the number of components used on your pages as all components (visible or not) are part of the page HTML that gets sent regardless of the device type the page is being displayed on.

One very common misuse of Replo’s visibility feature is to overuse it for responsive design. For example, you might build out all of your desktop containers, then hide them (turn off visibility) on mobile/tablet. Then you might build out an entirely separate set of containers for your mobile and tablet views (hiding them on desktop). While this is possible and sometimes makes sense for a small portion of the page’s content (there are valid uses of the visibility feature), it's generally best to restyle your desktop containers for mobile viewing based on Replo’s responsive design mechanics.

The good news is if you hide a component on all device types Replo will intelligently not deliver this HTML to the published page. 

Minimize Performance Impact from 3rd Party Apps

As a Shopify app ourselves, the Replo team is very aware that apps can slow down your entire site. Replo software runs only on content that you have built and published with Replo. For example, if your homepage has not been built in Replo, you will not find any Replo scripts loading on that page.

For other apps, you'll need to perform a cost-benefit analysis. Most apps have settings that you can configure to limit their impact on your page speed. However, the solution is very app-specific. Just being judicious about your Shopify app stack and how it affects your page speed is half the battle. You likely already know this, or else you wouldn't be here :)

Test Your Base-Level Theme

One nice test you can preform is to load in the Replo App Proxy which effectively loads in your Shopify Theme (basically the store Header, Footer, CSS, Javascript, and base-level 3rd party Apps) with a blank page.  What this does is gives the upper bound for how fast a page on your theme can be since any page, no matter how optimized, will load in page-specific content PLUS this baseline set of resources. The Replo proxy can be found at <your store's myshopify.com url>/apps/alchemy.  Here is the Replo merch store's proxy and a recent GTMetrix test. 

What Does Replo do to Optimize for Page Speed

Replo takes page speed very seriously and as such we’ve built in a lot of features to optimized for this:

• Optimized Bundle Size - We have taken great care to ensure that the HTML and JavaScript you receive for your Replo pages is as compact as possible. This includes sending only the JavaScript necessary for the specific features used on the page (for example, if you don't have a carousel, your page won't load the code to power carousels), as well as minifying all Liquid code (this means that the code delivered to the browser is the absolute minimum number of bytes possible). We strive to ensure that every byte your browser receives is essential.
• We Only Run on Replo Content - As discussed earlier, we never install any code on pages that aren't built and deployed in Replo. You will not see Replo show up in the dev-console of your pages unless you add our code there.
• Pre-Rendered for Optimal Load Time - Replo pre-renders the HTML and CSS for all pages, so they can be loaded immediately, which keeps the First Paint (FCP) of your pages low. By optimizing for your user seeing content quickly over being able to interact with it, we prioritize load speed. Don't worry; the interactive part of the page loads in shortly after.
• Automatic Image Resizing - By using Shopify's CDN for image delivery and optimization, we ensure that your page loads quickly without being slowed down by large assets. If the screen is smaller, a smaller image will be loaded.
• Replo Content Delivery Network (CDN) - Using our Global Edge Network, we ensure the fastest possible delivery of the JavaScript required for your page to work. For example, this means that if the visitor to your page is in Germany, the browser will load Replo's JavaScript from Germay.

Resources We Recommend

Shopify Page Speed Docs - They know their own platform best and they’re constantly working to improve page speed

What is a good store speed on Shopify? - Blend blog post outline how best to think about Shopify Store page speeds.

Shopify Image Optimization - Helpful guide that goes into great detail how you should think about images on your stores