Speed & performance

What is the speed score indication?

Shopify uses Google's Core Web Vitals to measure metrics such as page loading speed for real devices using Chrome in the last 28 days.

Core Web Vitals

Google's Core Web Vitals are a set of metrics designed to help website owners understand how users experience their web pages in terms of loading performance, interactivity, and visual stability. The three main Core Web Vitals are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

LCP

LCP measures the time it takes for the largest content element on the page (like an image or text block) to become visible, aiming to assess loading performance.

FID

FID measures the time from when a user first interacts with a page (e.g., clicking a link or tapping on a button) to the time when the browser is able to respond to that interaction, evaluating the page's interactivity.

CLS

CLS assesses how often users experience unexpected layout shifts, which can affect the visual stability of the page. Together, these metrics provide a comprehensive view of a site's performance and user experience.

Performance

Whilst Core Web Vitals tells you what real users are experiencing, Google can also run performance tests on your store and suggest what could be optimized.

If you're curious about what performance to aim for, try running the test on a demo store for your theme on https://pagespeed.web.dev and scroll down to the 'Performance' section. This will give you an idea of what a store, without any modifications, will score. Remember that adding a lot of content, detailed images, videos, maps, and apps can slightly lower the score. By keeping your content and apps minimal, you should be able to achieve a score similar to our demo stores.

If you get a score below 50, it might seem concerning but it's not something to worry about excessively. In fact, major websites like Amazon, MVMT, Gymshark, Apple, and even Google's own Lighthouse documentation page all have scores below 50 at the time of writing.

High scores can be difficult to achieve due to the presence of certain elements that lower the score, such as required Shopify scripts for features like dynamic payment buttons and customer session tracking.

Although removing elements that lower the page speed score may be tempting, it's important to remember that they are crucial for the proper functioning of your online store. A simple blog may not need these elements, but an e-commerce site does. You can feel confident with a score of 20 or above if your website loads and functions well on a real device.

Improving speed scores

If you want to improve your page speed score, the first step is to assess the load time on a real device. Does the website feel fast? Remember that page speed scores are artificial, can be flawed, and do not always accurately reflect the load time on a real device. If your website feels fast and is not noticeably slower than your competitors, there may be other areas that would benefit more from your time and attention. 

Selective App usage

In our experience, apps are the single biggest reason why a theme performs slower than it should. Avoid non-vital apps where possible and ensure any unused apps are fully uninstalled and no remnant code/scripts remain.

You can also test other apps to see which has the least impact. Once the theme loads a page, the apps load and can start to load in additional scripts that can take time for the browser to process. Some apps use servers hosted outside of Shopify, which can slow down the loading time of your site. As theme developers, we have no control over this. Therefore, it is best only to use apps that are essential to your business and positively impact your sales or are necessary for your business operations.

Apps that do rely on interacting with your pages won’t affect your score in any way. For example, order printing apps, or apps that sync your customer list to mailing lists.

Keep content simple

When it comes to the homepage, less is often more. Consider how long it takes to scroll from top to bottom on your homepage. To improve load speed, it's best to avoid overwhelming the homepage with too much content. Instead, opt for a seasonal approach and switch out content regularly to keep it fresh and engaging for your customers.

Images and videos can be great for showcasing your site, but they do take time to load. To boost your page speed score, try reducing some of the content sections on the homepage, such as using fewer product rows.

Test on a published theme

If your theme is not published as your live theme, you will be running a speed test on the theme in Preview mode. In this situation, it's likely that the code needed to render Shopify Admin bar will be the biggest cause of slow speed scores. If possible, publish your store and check speed scores on the live theme instead. 

Avoid videos (if possible)

Videos by their nature are large and take time to load. If you do use videos, avoid placing the Background video section near the top of the page. The browser will need to wait until the video can start playing and this will contribute to a higher Largest Contentful Paint (LCP) score.

Also avoid embedding images or video within the Shopify rich text area in such areas as product pages, collection pages, general pages, and blog articles. Instead, use the image and video sections within the theme. 

Images

Formats

We recommend using JPGs for product images unless the image takes up more than half the page. JPGs provide great quality and are typically smaller in file size, resulting in faster loading times.

For slideshows that cover a significant portion of the page and other image sections that display large images, use PNGs. PNG files retain their quality and are larger in file size than JPGs.

Dimensions

Our themes will load the most appropriately sized version of any image added within the Theme settings. However, it typically won't change the dimensions of the image. For example, if your product cards are set to be portrait, but the images are actually landscape - a good portion of the image will still be loaded, but not displayed. Always upload image roughly in the dimensions that they will be displayed in the store.

Where a section has a Mobile image setting (e.g. Slideshow section), use it. We've found that square images are best to use for mobile devices as this scales best on smaller screens as well as tablets.

Disable animations

If your theme comes with scroll animations, consider turning these off. Whilst scroll animations can help to create a more luxurious feel, they can also create a perception of a slower loading page to both users and benchmarking tools (e.g. Lighthouse).

Subject to browsers, internet speeds and other factors, such animations can have an impact on the Cumulative Layout Shift [CLS] and have a small impact on load times.

Disable dynamic checkout buttons

Some users have reported improving site speed by disabling dynamic checkout buttons. These buttons pull in information the theme has no control over, which can slow down the theme. If you don't see many customers purchasing through these links, you may want to consider disabling them to increase speed. 

Settings to control these will show on the product page, featured product section, cart drawer section (if applicable to your theme), and cart page.

Use the latest version of your theme

We always recommend updating to the latest version of our themes, as not only does Shopify release new features to improve loading times, but we are also constantly innovating to improve what we can control within themes.

Read more in our guide on Updating themes.

Product page image order

Make sure each product's first image is the one associated with the default variant. This means the product image slider will not have to dedicate load time to cycle through to an alternative variant image when the page loads.

Have fewer fonts

Have fewer fonts. Keep your Heading, Body and Navigation font the same as this will mean fewer files are needed on page load.

Using the SYSTEM FONTS is preferable as they load faster than OTHER FONT.

Helpful resources