Shopify Page Speed: The Fixes That Actually Move Core Web Vitals

The order-confirmation moment gets most of the attention in conversion writing, but a lot of Shopify stores never get a shopper that far, because the store itself is slow. A one-second delay in mobile load time is enough to cost several points of conversion, and Google's Core Web Vitals — Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift — are both a proxy for that experience and a confirmed ranking factor. Most stores don't have a mysterious performance problem. They have an accumulation of ordinary decisions — an uncompressed hero image, five apps that each add a script tag, a custom font loaded the slow way — that add up to a slow store. Here's where to look first, and in what order, to actually move the numbers.

Audit With Real Data, Not a Guess

Before changing anything, separate lab data from field data. PageSpeed Insights and Lighthouse give you lab data: a single simulated test run under fixed network and device conditions, useful for diagnosing what's slow but not for knowing what real shoppers experience. Shopify's own Web Vitals report, in Online Store > Themes > Performance, uses actual visitor data collected over a rolling 28-day window — that's the number Google uses for ranking and the one worth tracking over time. Run both, and test a product page and a collection page separately, since they load very different sets of assets and often fail Core Web Vitals for different reasons.

The Image Weight Problem

Images are still the single biggest lever on most stores, and almost always the cause of a poor Largest Contentful Paint score, since LCP is usually the hero image or the first product photo. Shopify serves images through its own CDN, which means you can resize and reformat on the fly with URL parameters or the image_url filter rather than shipping whatever resolution a merchant happened to upload. A few changes cover most of the win:

• Serve WebP or AVIF instead of JPEG/PNG wherever the theme allows it — Shopify's CDN will do this automatically for modern browsers if the theme requests it correctly
• Cap hero and banner images to the actual display size instead of uploading full-resolution originals and letting the browser scale them down
• Lazy-load every image below the fold, but never lazy-load the LCP image itself — that delays the exact element Google is timing
• Set explicit width and height (or aspect-ratio) on image tags so the browser reserves space before the image loads, which prevents layout shift

Every App Is a Loading Cost

Reviews widgets, upsell tools, chat bubbles, tracking pixels, loyalty popups — each one typically injects its own script tag, and a lot of them load synchronously, which blocks the browser from rendering the page until that script finishes. This is the most common cause of a poor Interaction to Next Paint score: the page looks loaded, but it can't respond to a tap or click yet because a third-party script is still running on the main thread. Open Lighthouse's network and performance panels on a product page and look at what's actually blocking — it's rarely the theme itself. Uninstall apps that aren't earning their weight, and for the ones you keep, check whether they offer a deferred or async loading mode rather than accepting the default install.

Fonts and Layout Shift

Custom web fonts are a common, quiet source of both slow rendering and layout shift. If a font loads late and the browser has already rendered text in a fallback font, the page reflows the moment the real font arrives — that reflow is exactly what Cumulative Layout Shift measures. Using font-display: swap avoids invisible text while the font loads, and adding a preconnect or preload hint for the font file gets it requested earlier in the page lifecycle instead of waiting until the CSS is fully parsed. Where possible, stick to the font Shopify's theme already ships with rather than adding a second custom typeface — every additional font is another network request competing for bandwidth during the page's first second.

Theme Code You Don't See

Heavily customized themes accumulate Liquid loops and sections that render markup for states a shopper will never see — sold-out variants, hidden upsell blocks, duplicate mobile/desktop markup. None of that is visible, but the browser still has to parse and paint it. If a theme has been edited by several people over time, it's worth a pass to strip unused sections and confirm that JavaScript for one page (say, a size-chart modal) isn't being loaded globally on every page instead.

A Prioritized Fix Order

If you only have a few hours, work in this order, since each step tends to move Core Web Vitals more than the one after it:

1. Compress and correctly size every image on the homepage, top collection pages, and best-selling product pages
2. Audit installed apps with Lighthouse's network panel and remove or defer the ones blocking render
3. Fix font loading with font-display: swap and a preload hint
4. Set image dimensions everywhere to eliminate layout shift from late-loading content
5. Only then look at deeper theme code changes, which take longer and yield smaller gains per hour spent

What to Watch After You Ship Changes

Give Shopify's Web Vitals report time to refresh — it's built on 28 days of real visitor data, so a fix made today won't fully show up for a few weeks. In the meantime, use PageSpeed Insights lab scores as a faster feedback loop to confirm a change actually helped before waiting on field data to catch up. And watch bounce rate and mobile conversion rate alongside the performance numbers: a faster store that doesn't move those is a sign the speed problem was masking a different one, like unclear pricing or a confusing product page, not the sole cause of lost sales.