Web performance

References

• https://help.shopify.com/en/manual/online-store/web-performance
• https://help.shopify.com/en/manual/online-store/web-performance/web-performance-dashboard
• https://help.shopify.com/en/manual/online-store/web-performance/improving-web-performance
• https://www.youtube.com/watch?v=6FnZ7e9Ibbw

Online store Web Performance

Your online store Web Performance dashboard measures loading speed, interactivity, and visual stability. These measurements help you understand how your visitors experience your website from when the page first loads to layout shifts that might be caused by pop-up content.

How is web performance measured?

Web performance is measured by key metrics called Core Web Vitals.

The Core Web Vitals include the following performance measurements:

• Largest Contentful Paint (LCP): measures loading speed, based on how fast the largest element or main content becomes visible to visitors. A good LCP score is achieved when the main content is loaded within 2.5 seconds from the start of the page load.
• First Input Delay (FID): measures interactivity, based on how long it takes the page to become responsive to user actions, such as clicking a link or a button. An FID of less than 100 milliseconds is considered a good performance as the page becomes interactive quickly.
• Cumulative Layout Shift (CLS): measures visual stability, based on how much the content shifts around unexpectedly during loading. A CLS score of less than 0.1 is considered a good performance.

In addition to the Core Web Vitals, Google evaluates other factors such as mobile compatibility, safe browsing, HTTPS security, and the absence of intrusive interstitials, which are page elements that obstruct a complete view of the content, such as promotional pop-ups or age verification. These factors together help evaluate a webpage's performance and user experience.

Why is web performance important?

Your online store’s performance can impact the shopping experience of your customers, your conversion rate, and your store's discoverability.

Experience and conversion

When your online store loads quickly and interactions are smooth, it provides a positive experience to all visitors regardless of their device or connection speed. If a site is slow or difficult to navigate, then visitors are more likely to leave before they buy something. By improving your store's web performance, you can enhance user experience and increase conversion rates.

Discoverability

Search engines such as Google use page speed as a ranking factor. If your online store pages perform poorly across the Core Web Vitals, then they might be ranked lower, even if your store is otherwise optimized for search engines. By improving web performance, you're improving your store's chances of being ranked higher in search and getting more visibility for your business.

Online store features vs. web performance

Your online store is made up of a set of features, such as theme code, apps, images, videos, carousels, social media feeds, and analytics. These features can enhance the visitor experience and extend your site's capabilities.

However, each feature that you add to your online store can impact your store's Core Web Vitals. Some features can slow down your site or create unexpected behaviors that can impact user experiences.

When you consider adding a feature to your store, you should weigh the benefits of the feature against its impact to the Core Web Vitals. You might need to find the balance between user experience and web performance.

Ask yourself the following questions when considering features for your store:

• What will help customers make the decision to purchase from the store?
  • For example, consider whether your customers would prefer a simple homepage with links to detailed product pages, or a more powerful home page where they can quickly view and buy products.
• What functionality should exist at the top of the page to drive conversion?
  • For example, branding elements, featured images, and a checkout cart are all features that can impact performance but increase conversion.
• What functionality can load later as customers scroll down the page?
  • For example, analytics and product reviews don't need to be loaded immediately when a customer visits your store. You might need to consult your theme or app developers to understand if a feature is loading right away.

Explore your Web Performance dashboard

You can learn how your store performs across the Core Web Vitals by viewing your Web Performance dashboard. This dashboard displays how your store ranks across all three core web vitals and provides actionable insights for improving.

You can also explore factors that impact your web performance and how to address them.

Web Performance dashboard and reports

Optimizing your online store's performance can enhance your customers' shopping experience, increase your store's discoverability, and increase conversion rates. Your Web Performance dashboard can help you understand how your store performs across industry standards for loading speed, interactivity, and visual stability, known as Core Web Vitals.

Your online store's performance can be influenced by several factors, such as the following areas:

• apps
• third-party libraries and services
• analytic libraries
• theme code
• the quantity and size of images and videos

By making strategic adjustments to your online store, you can improve your performance metrics and ranking.

Learn more about the importance of your online store's performance.

Note

Shopify infrastructure is consistently enhancing its code. Some of these enhancements might be reflected in your store's performance metrics.

View your store's Web Performance dashboard

To view your store's Web Performance dashboard, you need to have the Reports staff permission.

Steps:

1. From your Shopify admin, go to Analytics > Reports.
2. Click Web Performance.

The report displays how your storefront performs across Core Web Vitals: loading speed, interactivity, and visual stability. The report contains information about desktop and mobile experiences, the distribution of experiences within given performance rankings, and displays how any changes you’ve made impact your storefront experience, such as app installs, theme updates, and new code.

Your Web Performance metrics

The Web Performance dashboard gives you insights into the performance of your online store, based on real user data from the past 28 days. It evaluates your store against the three Core Web Vitals, and assigns a ranking of "good", "moderate", or "poor" to each metric. This ranking reflects the top 75% of user experiences.

You can view data for different devices using the drop-down menu at the top of the page. Choose from "mobile", "desktop", or "all" (the default option) to customize your view.

Due to the way the metrics are calculated, your metrics might not change immediately after you make changes to your online store. If your store is new or password-protected, then you might not have metrics.

Loading Speed

Largest Contentful Paint (LCP) measures loading speed, based on how fast the largest element on the screen becomes visible.

The following are the available rankings for LCP:

| Ranking | Target metric | Description | | -- | -- | -- | | Good | Less than or equal to 2500ms | Most users experience a fast page load. | | Moderate | Greater than 2500ms and less than 4000ms | Some users experience a fast page load, there is room for improvement here. | | Poor | Greater than 4000ms | Most users experience a slow page load, this should be improved. |

Interactivity

First Input Delay (FID) measures interactivity, based on how long it takes the page to become responsive to user actions, such as clicking a link or a button.

The following are the available rankings for FID:

| Ranking | Target metric | Description | | -- | -- | -- | | Good | Less than or equal to 100ms | Most users experience good responsiveness on pages. | | Moderate | Greater than 100ms and less than 300ms | Some users experience good responsiveness on pages, there is room for improvement here. | | Poor | Greater than 300ms | Most users experience slow responsiveness on pages, which will be frustrating and should be improved. |

Visual Stability

Cumulative Layout Shift (CLS) measures visual stability, based on how much the content shifts around unexpectedly during loading.

The following are the available rankings for CLS:

| Ranking | Target metric | Description | | -- | -- | -- | | Good | Less than or equal to 0.1 | Most users experience a stable layout as the page loads. | | Moderate | Greater than 0.1 and less than 0.25 | Some users experience a stable layout as the page loads, there is room for improvement here. | | Poor | Greater than or equal to 0.25 | Most users experience an unstable layout as the page loads, this can annoy users and should be improved. |

Your Web Performance over time

The line chart displays how changes made to your online store—such as app installations, theme updates, and new code—have impacted each Core Web Vital. You can adjust various filters such as time range, date grouping, and device type to best reflect the traffic to your site.

The following filters are available:

• Device Type: Mobile, Desktop, or Both (default)
• Date Range: Last 30 days (default), Last 60 days, Last 90 days
• Time Frame Grouping: Daily, Weekly (default), Monthly

If your site has less traffic, then there might be larger fluctuations displayed. If you notice significant fluctuations, then consider switching to a weekly or monthly filter.

The bar chart displays how many page visits fall into each performance category: good, moderate, or poor. Keep in mind that certain factors are beyond your control, such as a customer's device, network, and location. Customers around the world visit your store using different devices and internet connections, which means your store might load faster or slower for them depending on these factors. As long as the overall metric is good, don't worry too much if some customers fall into the moderate or poor categories.

Frequently asked questions

Why did Shopify remove the Google Lighthouse speed score?

Google Lighthouse uses simulated environments for speed scores. It's good for a quick snapshot but doesn't reflect real user experiences. Google now prioritizes Core Web Vitals for SEO rankings. Learn more from Google.

Why don't I have scores yet?

The following are some reasons why you might not have a score for your core web vitals yet:

• Your store is password protected: If your online store is password protected, then you won’t have the real-user traffic necessary to generate Core Web Vitals. You need to remove the password page to allow users to visit your site.
• You don’t have traffic yet: You might not have had any page views to your online store to generate real-user metrics. If you don’t have a traffic yet, then you can use a free performance analysis using synthetic data, such as PageSpeed Insights.

Why do I have traffic but no Core Web Vital scores?

Core Web Vitals are a Google product and currently only available on Chromium-based browsers. Modern browsers, such as Safari and Safari iOS, are built upon similar technologies and so the Core Web Vitals still represent an accurate representation of how your users experience the website.

Why do I have scores for some metrics but not others?

Each metric measures a different aspect of performance and user interactions. For example, Largest Contentful Paint measures page load, whereas First Input Delay measures interactions with buttons or links. If there are no interactions with buttons or links, then the FID metric might not have a score.

Why did one of my scores change?

Scores can fluctuate due to traffic amount or changes made to your online store. If there are big fluctuations due to low traffic, then try changing to a weekly or monthly filter.

Your scores can also change when you make changes to your online store. For example, you might have imported several new products, created several new collections, changed your theme, or introduced a new app. Learn about the factors that can impact your online store performance.

How can I improve my score or ranking?

To learn how to improve online store performance, visit Improving your online store performance.

Why are the scores on my Web Performance dashboard different from other tools?

The scores on your Web Performance dashboard might differ from other tools due to the following factors:

• The data in the Web Performance dashboard is based on the UTC standard, which might differ from other platforms' timezones.

• The Web Performance dashboard collects data differently by gathering a broader data set from all Chromium browsers (Chrome, Opera, Edge, Samsung Internet) and Firefox. Whereas tools such as Google’s PageSpeed Insights use the CrUX report for opted-in Chrome browsers. Learn more about CrUX data.

• Improving your online store performance

Improving your online store performance

Several factors impact your online store performance, some of which you can control.

To learn how your online store is performing today, view your Web Performance report.

Tip

To see more videos, visit our YouTube channel.

Factors you can't control

These factors might affect the performance of your store, but can't be controlled by any settings or adjustments that you can make to your Shopify store. This includes factors from your customers, such as their device or internet speed, as well as factors from Shopify, such as updates to Shopify's infrastructure.

Your customer's device, network, and location

Customers who visit your store live around the world and have different devices and internet connections. This means that your store might load faster or slower for them depending on these factors.

If a customer contacts you about the speed of your store, then ask your customer to check that they're on the latest version of their browser, they have recently cleared their cache, and their Internet service provider isn't experiencing any outages or degraded performance.

Shopify infrastructure

Shopify hosts your online store on fast, global servers and doesn't limit your store's bandwidth. You can check the status of your Shopify store on Shopify Status.

Shopify is constantly making improvements to its code and infrastructure. Some of these improvements might be reflected in your performance metrics.

The following are some features that affect the speed of your online store.

Content delivery network (CDN)

CDN stands for content delivery network. The CDN stores your images and other files, such as the content in your Shopify admin's Content > Files page. The CDN is where Shopify provides merchants a world-class CDN run by Cloudflare that ensures that your online store loads quickly around the globe. You can check the CDN status on the Cloudflare status page.

Local browser cache

Your store caches, or saves, some elements on your customer's local storage temporarily. The next time your customer visits your online store, the browser can load resources from the cache instead of sending another request to the server.

Shopify sets browser caching for cacheable resources in your store to one year for each file. Files that can be cached include image files, PDFs, JS files, and CSS files.

Server-side page cache

In addition to local browser caching, Shopify caches pages on the server side. The first time a page is loaded, it might be slower, but later page loads are faster because customers are receiving a cached copy.

The assets inside the content_for_header Liquid object

The `` Liquid object injects assets used by a variety of online store features, including performance analytics and optional features such as dynamic checkout buttons. Loading this object and related assets has an impact on the speed of your store. Shopify is optimizing the tag and its assets to make it faster.

Factors you can control

Below are some factors that might impact the performance of your online store, and how you can address them.

Grow your business

If you're not comfortable with following any of the steps below, then you can hire a Shopify Performance Expert or Shopify Partner to help you.

Apps

When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.

If you think that an app is slowing down your store, then take the following steps:

• Deactivate app features you don't use, or remove the app if you don't need it. Consider the balance between online store features and speed.
• If you're removing an app, then consider removing code that was added as part of the app install process. Most apps will remove their code automatically for you, but you can check with the app's developer to make sure. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name. Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.
• Consult your app developer.

Themes

Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your web performance.

If you think that something in your theme is slowing down your store, then take the following steps:

• Deactivate theme features you don't use. Consider the balance between online store features and speed.
• Consider using a system font.
• Consult your theme developer. If you use a free theme from Shopify, then you can contact Shopify support for guidance.
• If you use a third-party theme, then you can contact your theme developer or hire a Shopify Partner.
• Consider installing a theme that's optimized for performance, such as Dawn.

Theme or app features

Certain features, when activated, might also affect your store performance. For example, some quick view pop-ups pre-load information from every product page when a collection page loads. Loading extra data your customers aren't using can impact your loading speed without adding value.

If you think that a feature is slowing down your store, you can take the following steps:

• Use a heatmap tool to view if customers are using certain features. Deactivate features if they're not being used.
• Deactivate the feature if you don't need it. Consider the balance between online store features and performance.
• Consult your theme and app developers and ask if they're preloading data.

Complex or inefficient Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall web performance.

For example, if you want to order the products in a collection by price, then you should do that before you loop through the products in your collection, and not as part of the loop code. This is because the order of the products does not change for each product, and calculating the order of the products adds processing time to the request.

If you're concerned that your code isn't optimized, then you can take the following steps:

• Run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
• Hire a Shopify Partner to help you to find inefficient or useless code.

Caution

The Shopify Theme Inspector for Chrome is intended for merchants and Partners who are comfortable with reading and editing code. If you're not comfortable with reading or editing code, then you can hire a Shopify Partner to guide you. A Shopify Partner can also help you to improve your store performance using the results of this tool. Learn more about hiring a Shopify Partner.

Images and videos

Oversized images and images that are hidden from view can interfere with loading other, more important parts of a page. If users have to wait for large images to load, then they might perceive your store to be slow.

Shopify adds some safeguards to prevent you from overloading your online store with images or videos. For example:

• You can't have more than 50 products on a collection page or 25 sections on your home page.
• Many themes defer loading images that aren't currently onscreen.
• Many themes also load a specific size of an image based on the screen size it's displayed on.

However, these safeguards don't entirely prevent images or videos from impacting your online store's performance.

If you think that images are slowing down your store, then take the following steps:

• Review the image optimization guide.
• Keep slideshows of featured images to 2-3 slides, or use one featured image.
• Consult your theme developer for their advice on the best way to use images with their theme.

Fonts

You can choose from several fonts for the text in your online store. However, if you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before