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.
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.
It's almost always more important to prioritize and optimize for mobile performance, since these scores are typically worse due to hardware and network limitations. Furthermore, mobile devices are increasingly becoming the primary touchpoints between you and your customers. At Replo, we always run page speed tests on mobile (and if you're running a local test, in an incognito tab).
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.
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.
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.
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 (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".
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.
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.
Replo’s CDN and Image Optimization
Replo has its own content delivery network (CDN) ensuring every image you upload is optimized for faster page loads.
We recommend uploading images directly into Replo instead of copying/pasting a URL of the image or selecting an asset in your Shopify Files.
1. Automatic Format Conversion We automatically convert images to WebP, even if you upload images in other formats (e.g. PNG, JPEG). If a browser doesn’t support WebP, we serve the original format.
2. Compression & Resizing Images are automatically compressed and resized based on the user’s device, balancing quality and speed.
3. Global Caching Images are served from our global network in over 300+ cities, reducing latency and ensuring fast load times worldwide.
Images which visitors to your pages need to scroll in order to see don't need to be loaded up-front. We call these images ones "below the fold" — that is, below the end initial viewport you get when you load the page.
If your images are below the fold, they should be set to be lazy loaded (see Lazy Loading Images). This means that the browser won't request these images until the user scrolls to them. Since browsers can only load a certain amount of images at a time, this means the important images which are above the fold will be loaded faster.
If your images are above the fold, they should be set to eager loaded (the opposite of lazy loaded). This makes sure that there's no Content Layout Shift when users load the page.
See more documentation on lazy loading images from web.dev here.
On almost all of the page speed reports we see from Replo customers, we see a big effect from making sure that all images below the fold are lazy loaded. This is the first thing you should try when trying to improve page speed scores on your Replo pages.
Replo uses Shopify’s CDN, which automatically optimizes image size in most situations. Additionally, Replo automatically adjusts the size which is requested from the Shopify CDN so that you get smaller images on mobile.
However, sometimes it's helpful to be more aggressive than the Shopify's defaults. Luckily, Shopify has an extensive guide to optimizing images that you can follow to ensure you're using the smallest, most optimized images.
If you have a lot of video content using the 📄 Videoscomponent on your pages, you should take the same approach as with images where videos below the fold should be lazy loaded. See Video Lazy Loading for more information.
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).
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.
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 :)
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.
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 - Replo's CDN ensures that your page loads quickly without being slowed down by large assets. If the screen is smaller, a smaller image will automatically be detected and 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 Germany.
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