Core Web Vitals in Practice: A Checklist for Faster Websites and Online Stores

Speed affects both rankings and revenue. Google measures real-user experience with three Core Web Vitals, and slow, jumpy pages lose shoppers before they ever see a product. Here’s what each metric means and the fixes that make the biggest difference.

The three metrics, and the targets

• LCP, Largest Contentful Paint (under 2.5s): how quickly the main content, usually the hero image or headline, appears.
• INP, Interaction to Next Paint (under 200ms): how quickly the page responds when someone taps or clicks.
• CLS, Cumulative Layout Shift (under 0.1): how much things jump around while loading.

Measure with real-user data first (the Core Web Vitals report in Google Search Console, or PageSpeed Insights’ field data), then use Lighthouse and Chrome DevTools to debug.

Fixing LCP: make the main content show up fast

• Don’t lazy-load the hero image. Lazy-load everything below the fold, but give the main image fetchpriority="high" and no loading="lazy".
• Serve modern, right-sized images. Use WebP or AVIF with srcset, so a phone never downloads a 3000px desktop banner.
• Render content in HTML. If your page is an empty shell filled by JavaScript, the LCP waits for your whole bundle. Prerender or server-render key pages.
• Limit web fonts. Use two families at most, only the weights you use, and font-display: swap.

Fixing INP: keep the main thread free

• Audit third-party scripts. Chat widgets, trackers and pop-up tools are the usual causes. On Shopify, uninstalled apps sometimes leave code behind in the theme, so check for it.
• Split your JavaScript. Load code for heavy features (carousels, editors, maps) only when needed, using dynamic import().
• Break up long tasks. Respond to the click first (show a spinner or the new state), then do the expensive work.
• Prefer CSS over JS animation for hover effects, transitions and simple motion.

Fixing CLS: stop the page from jumping

• Always set width and height (or aspect-ratio) on images, videos and iframes.
• Reserve space for injected content such as announcement bars, cookie banners, reviews widgets and app blocks.
• Match fallback font metrics so text doesn’t reflow when the web font arrives.
• Never insert content above what the user is reading, unless they asked for it.

Extra wins for Shopify stores

• Use theme app extensions (app blocks) instead of apps that inject scripts into every page.
• Remove apps you don’t use, then check the theme code for leftovers.
• Choose lightweight storefront widgets. Small scripts that load only on the pages that need them add almost nothing.
• Compress product images before upload; Shopify’s CDN resizes them, but a smaller source still helps.

A 30-minute audit you can do today

1. Run your homepage, a product page and a category page through PageSpeed Insights.
2. Note which metric fails on mobile first.
3. In DevTools → Network, sort by size and question the five largest files.
4. In DevTools → Performance, record a page load and look for long tasks from third-party scripts.
5. Fix the single biggest issue, deploy, and measure again.