Shopify speed: how to improve LCP, INP and CLS with real user data

What LCP, INP and CLS measure

Core Web Vitals are three Google metrics. LCP (Largest Contentful Paint) measures how long the largest visible element takes to render on load, usually the main image or headline. INP (Interaction to Next Paint) measures how long the page takes to respond visually when the user taps or clicks; it replaced FID in 2024. CLS (Cumulative Layout Shift) measures how much elements move around while the page loads.

Google considers good an LCP of up to 2.5 seconds, an INP of up to 200 milliseconds and a CLS of up to 0.1, assessed at the 75th percentile of real visits. In other words, it is not enough for the store to run well on your computer: it has to run well for most of your customers, who on a store usually arrive on mobile.

Measure with real user data, not a single test

There are two kinds of data. Lab data, like the Lighthouse score, simulates a load under fixed conditions and is useful for debugging. Field data comes from real Chrome users and is what Google uses. PageSpeed Insights shows both: field data at the top, if your store has enough traffic, and the lab diagnosis below.

Also check the Core Web Vitals report in Search Console, which groups URLs by type, and the web performance report in the Shopify admin. Obsessing over the Lighthouse score is a common mistake: it can go up or down between tests without the real experience changing.

• Measure by template: home, collection, product and cart behave differently.
• Always test on mobile, with the store in its real state and every app active.
• Write down the values before each change so you know what worked.

App JavaScript: the most common culprit

Every app that displays something on the storefront usually loads its own JavaScript and sometimes its own styles and fonts. A reviews app, a popup app, a chat app, an upsell app and a translation app can add up to several scripts running on every page, even where they do nothing.

That code competes with the response to the user's taps and is the most common cause of a poor INP. Use the network tab in your browser's developer tools to see which domains load scripts, and turn off what you do not use under App embeds in the theme editor. Older apps that were installed by editing the theme can leave code behind even after you uninstall them.

Images and LCP

On most stores the LCP element is an image: the homepage banner or the first product photo. To load fast it has to be requested early and at the right size. The image_url and image_tag Liquid filters let you generate several sizes with srcset so the browser downloads only the one it needs.

The main image should not be lazy loaded, because that delays exactly what you want to show first. For the rest of the images below the first screen, loading lazy is a good idea. Also avoid autoplay sliders in the header: they tend to load several large images plus JavaScript for something few shoppers look at.

Fonts and CLS

Custom fonts affect LCP if text is the main element, and CLS if they change the text size when they load and push content around. Limit families and weights to the ones you really use, and take advantage of the fonts Shopify serves from its own infrastructure with the font_face filter.

The rest of CLS usually comes from images without set dimensions, cookie banners or announcement bars inserted at the top after load, and app widgets that appear late. Always reserve the space: set width and height on images and give a fixed height to blocks that are filled in with JavaScript.

Heavy sections and bloated themes

Themes that try to do everything ship dozens of sections, animations and libraries that load even if you only use a few. Every section added in the editor adds HTML, images and sometimes scripts. A homepage with fifteen stacked sections rarely performs well on mobile.

Review your templates and remove whatever does not help sell. Background videos, logo carousels, animated counters and embedded Instagram feeds are common candidates. If a section is essential but heavy, consider loading it only when it scrolls into view.

Where to start

Prioritize based on field data. If LCP fails, look at the main image and whatever blocks it from loading. If INP fails, review app scripts and your own code that runs on interaction. If CLS fails, find what moves with a performance recording in the browser.

Keep in mind that Google's field data is calculated over a period of several weeks, so improvements take time to show up. At Weblineo we work on speed within our optimization service, with changes to your theme code that stay in your store and belong to you.