← Back to the journal

Core Web Vitals

Core Web Vitals - An Insightful Explanation of The New Google Metrics

Almost every e-commerce business owner will be confronted with his or her Core Web Vitals at some point, and most of them are left alone and confused. Google has yet again introduced something that is...
2 min read By Sara Berger
In This Article

    Core Web Vitals describe three parts of the experience people have on your Shopify storefront: how quickly the main content appears, how promptly the page responds to interactions and how stable the layout remains. They are useful because they connect performance work to moments your customers actually encounter.

    The current metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. Older guides that still use FID need that distinction.

    LCP: when the main content becomes visible

    LCP measures when the largest eligible image or text block visible in the viewport renders. On a Shopify product page, that may be the main product image. On another template, it could be a hero image or heading.

    If LCP is slow, identify the element first. Then review its image dimensions, discovery and loading priority, along with resources that delay rendering. Lazy-loading an important image above the fold can postpone the content the shopper needs first. Read our Shopify lazy loading guide before changing every image to the same loading behavior.

    INP: how responsive the storefront feels

    INP evaluates responsiveness across qualifying interactions during a visit. A customer changing a variant, opening a menu or clicking an add-to-cart button expects visible feedback promptly.

    Slow feedback can involve theme code, app scripts, expensive event handlers or work that blocks the browser’s main thread. Investigate the specific interaction on a representative device. Do not remove essential shopping functionality simply to improve a test result.

    Total Blocking Time is a lab diagnostic that can help identify blocking work. It is not INP and is not itself a Core Web Vital.

    CLS: whether the page stays in place

    CLS measures unexpected layout shifts. A review widget appearing late, an image without reserved space or a font swap can move content while someone is reading or trying to tap a button.

    Check that images and embeds have appropriate dimensions or reserved space. Review widgets that insert content above existing elements. Test the full page as it loads, rather than judging stability from the finished screenshot.

    What counts as good?

    • LCP: 2.5 seconds or less.
    • INP: 200 milliseconds or less.
    • CLS: 0.1 or less.

    These thresholds are assessed at the 75th percentile of visits. They are measurement targets, not promises of a particular ranking or conversion rate. Google explains the criteria in its Core Web Vitals thresholds documentation.

    Use field data and lab tests for different jobs

    Field data describes real visits over a measurement period. Lab tests simulate a visit under controlled conditions and help investigate a particular page. PageSpeed Insights can display both when sufficient real-user data is available.

    Shopify’s web performance reports provide another view of storefront measurements. Different reporting windows, devices and data sources can produce different results. A lack of data does not prove a page passes or fails.

    Turn the measurements into a work plan

    1. Choose a homepage, collection and important product page to review.
    2. Record comparable mobile and desktop tests using our Shopify speed test workflow.
    3. Identify whether loading, responsiveness or stability is the main problem.
    4. Make targeted changes on a duplicate theme and test the shopping journey.
    5. Compare the results, launch safely and monitor real-user data as it becomes available.

    New field results take time to replace earlier visits in rolling reports. Keep a dated record of the changes so you can distinguish an implementation problem from a reporting delay.

    Get the right kind of help

    The ChopChopify App focuses on smarter loading priorities. Our manual optimization plans add hands-on investigation and implementation across your theme, apps and scripts, with a private project dashboard and personalized Speed Report.

    Use Core Web Vitals to guide the investigation, then verify that the storefront feels better and its shopping features still work.

    Wondering whether your result is good enough? Read what a good Shopify speed score means.

    Your next step

    From useful insights.
    To a faster store.

    Choose smarter loading with our app, or deeper hands-on work with our Shopify specialists.

    AUTOMATED · CHOPCHOPIFY APP

    Let important content lead.

    Prioritize critical storefront content automatically, without editing your theme or code.

    • Installs in minutes
    • Fully reversible
    Get the App ↗
    HANDS-ON · EXPERT OPTIMIZATION

    We do the deeper work.

    Store-specific analysis, theme and code improvements, and a guided review of the results.

    • Work tested on a duplicate theme
    • Guided from start to finish
    Explore Manual Optimization ↗
    Not sure? Start with a free store review →
    ChopChopify

    Written by ChopChopify

    Shopify Performance Specialists

    Practical Shopify performance guidance based on hands-on work with storefront optimization, Core Web Vitals and real-world store performance.

    Delivering speed

    Less waiting. More possibilities.

    Explore more insights →