Web performance

Boost your store’s speed, conversions, and search rankings by following best practices for fast web performance, tracking key metrics like Core Web Vitals, and optimizing apps, images, and store features for the best customer experience.

Last updated 4 months ago

Helpful links

  1. https://web.dev/vitals/

  2. https://help.shopify.com/manual/online-store/images

Overview

Web performance is vital for the success of your online store. It affects how quickly your store loads, how soon it responds to shoppers, and how stable your pages appear as they load. Our themes take advantage of the most advanced features so you can offer a fast, engaging experience for every customer.

⚠️ Important: Exceptional web performance creates satisfied visitors, drives higher conversions, and improves search visibility. By using our themes, you're benefiting from the fastest and most modern capabilities available.

Key metrics for web performance

Performance is tracked with Core Web Vitals, which are industry standards set by Google to measure real-world user experience. These metrics include:

  1. Largest Contentful Paint (LCP)

    1. Measures how quickly the largest visible content element loads on the screen.

    2. A time under 2.5 seconds is considered good.

  2. First Input Delay (FID)

    1. Measures how fast your store responds to a shopper’s first interaction.

    2. Delays under 100 milliseconds are optimal.

  3. Cumulative Layout Shift (CLS)

    1. Measures how much content moves around unexpectedly as the page loads.

    2. Scores under 0.1 are best.

Other important factors include mobile compatibility, secure HTTPS, safe browsing, and avoiding pop-ups that block content.

Why web performance matters

The right web performance strategy has a powerful impact throughout your business.

  1. Shopping experience and conversions

    1. A fast, reliable store keeps shoppers engaged and helps drive more sales.

    2. Stores that are slow or hard to use cause customers to leave before finishing a purchase.

    3. Improving web performance can directly boost your conversion rate.

  2. Search engine visibility

    1. Google includes page speed in its ranking factors.

    2. Not meeting Core Web Vitals standards can harm your search position, even if you’re doing other optimizations.

    3. Better web performance helps your store reach more potential customers.

💡 Tip: Fast online stores have a real edge. Align themes help keep you ahead of speed and SEO trends.

Balancing store features and performance

Adding apps, images, videos, carousels, social feeds, or analytics expands your store’s possibilities— but each addition can affect performance. Always consider value and impact for each feature.

  1. Decide what helps your customers make a purchase.

    1. Determine if quick-buy options are important, or if a simpler design offers more benefit.

  2. Choose which features are essential above the fold.

    1. Elements like branding, hero images, and shopping carts are visually impactful but might affect load speed.

  3. Identify which features can load as customers scroll.

    1. Product reviews and analytics often work best when loaded later, helping improve initial page load time.

    2. Work with developers for optimization and best loading strategies.

How to check your web performance

Your store needs real visitor traffic (not password protected) and the correct permissions to access detailed performance reports.

Viewing the performance summary

  1. In your admin, open Online Store > Themes.

  2. Optionally, use the date picker to view data for Today, Last 7 days, or Last 30 days.

  3. Optionally, click any metric to get more details:

    1. LCP P75 (ms): Track trends in Largest Contentful Paint.

    2. INP P75 (ms): Review interaction speed changes.

    3. Cumulative Layout Shift: See how stable your layouts are.

    4. Sessions by Device Type: See data broken down by device.

Viewing in-depth performance reports

  1. Navigate to Analytics > Reports.

  2. Use the search bar to find specific reports:

    1. Search : to list all web performance reports.

    2. Enter contentful for LCP metrics.

    3. Enter next for INP.

    4. Enter cumulative for CLS.

  3. Click on the report you want to view.

Understanding metric rankings

Performance summaries use real visitor data from the last 30 days and classify each Core Web Vital as Good, Moderate, or Poor (reflecting the experience of the top 75% of visitors):

  1. Largest Contentful Paint (LCP)

    1. Good: ≤ 2.5 seconds

    2. Moderate: 2.5–4 seconds

    3. Poor: over 4 seconds

  2. Interaction to Next Paint (INP)

    1. Good: ≤ 0.2 seconds

    2. Moderate: 0.2–0.5 seconds

    3. Poor: over 0.5 seconds

  3. Cumulative Layout Shift (CLS)

    1. Good: ≤ 0.1

    2. Moderate: 0.1–0.25

    3. Poor: 0.25 or higher

📝 Note: Changes made to your store can take a few days to show up in these metrics. New or password-protected stores may not have enough data for reporting.

Performance trends over time, by page, or by template

You can track your metrics in multiple ways to spot trends and issues.

  1. Track metrics over time

    1. Review how updates impact performance.

    2. Use time and device filters for a more detailed view.

  2. Check metrics by page URL

    1. Understand how specific product or collection pages perform.

  3. Compare metrics by page type

    1. See how templates—such as home, product, and collection—compare on speed and stability.

This analysis helps you quickly find when and where performance dips happen, so you can fix the right issues.

💡 Tip: If your traffic is low and metrics jump around, try viewing data weekly or monthly for a clearer trend.

Using reports to improve performance

Once you have enough visitor data, use performance reports to pinpoint areas for improvement.

  1. Identify which Core Web Vitals require attention.

  2. Use Over Time, Page Type, and Page URL reports to identify problem areas and spot when issues began.

  3. Prioritize optimizations for high-traffic pages or changes that correspond with performance drops.

Some factors are beyond your control, like the devices, locations, and networks of your visitors. As long as your overall scores are strong, some variation is normal.

Frequently asked questions

Why does the dashboard not use Google Lighthouse scores?

Google Lighthouse provides simulated tests but does not show actual visitor experiences. Core Web Vitals are based on real user visits, leading to more accurate SEO results.

Why are there no Core Web Vitals scores yet?

You may not see scores if your store is password protected or has very few visitors. Your dashboards need real user activity to display results.

Why are some metrics showing, but not others?

Not all page visits trigger every metric. For example, without any clicks, FID or INP might not have enough data for reporting.

Why do scores change or fluctuate?

Metrics can shift based on traffic volume, new products, added apps, or code updates. Stores with little traffic will see more variance.

How can I improve my metrics?

Focus on best practices for performance. Reduce unused features, and always optimize images and apps for speed.

Why are dashboard scores different from PageSpeed or other tools?

The dashboard uses a different timezone and collects information from more browsers than just Chrome, which may cause small differences.

What affects web performance?

Factors outside your control

  1. Customer devices and networks

    1. Visitors use many different devices and have varying internet speeds.

    2. If a customer has issues, suggest they update their browser, clear cache, or check their connection.

  2. Platform infrastructure

    1. Your store runs on high-speed, global servers with unlimited bandwidth.

    2. The underlying platform is upgraded constantly to deliver faster, more stable service.

  3. Content delivery network (CDN)

    1. Secure, global CDNs speed up file delivery to shoppers everywhere.

  4. Caching

    1. Browsers and servers cache your site, so return visits load much faster.

  5. Required assets

    1. Core analytics and optional features can add to page size, but they are regularly optimized for minimal impact.

Factors within your control

  1. Apps

    1. Remove or deactivate any apps and their features you don't use.

    2. Check for and delete leftover app code for maximum speed.

  2. Theme features

    1. Turn off unused features to keep your site light and fast.

    2. Use system fonts and minimal customizations when possible.

    3. If you need more advice, consult our team for guidance.

  3. Specific features

    1. Avoid anything that preloads unnecessary data before it's needed.

    2. Use analytics and heatmaps to discover what customers really use, then optimize.

  4. Inefficient code

    1. Too many complex or repeated operations in your theme can slow down load times. Streamline loops and database queries.

    2. Use the Theme Inspector for Chrome or consult with experts to identify and fix issues.

🚧 Caution: Only make theme code changes if you feel comfortable—otherwise, work with a trusted professional.

  1. Images and videos

    1. Use only the images and videos your customers actually need.

    2. Keep slideshows brief, featuring just a few images.

    3. Always optimize image sizes for the web, and be sure to review the image optimization guide for best results.

💡 Tip:Align themes include built-in image optimization and lazy loading, so you get the best combination of speed, design, and functionality.