Reporting & research on Shopify and ecommerce
Largest Contentful Paint is the Core Web Vital Shopify stores fail most visibly, and our own audit shows why: on 15 official theme demos, first paint arrived in about 2 to 5 seconds, then shoppers waited up to 13.9 more seconds for the hero media. Here is the mechanism and the fix list, with numbers.
Largest Contentful Paint measures one moment: when the biggest visible element on the first screen finishes rendering. On a Shopify store that element is nearly always the hero image, the first product photo or a poster frame of an autoplaying video, and that is exactly why Shopify LCP scores fail. The platform’s servers respond quickly and the theme’s shell paints early; then the shopper stares at a skeleton while megabytes of hero media crawl down a mobile connection.
Our own data makes the mechanism visible. On July 14, 2026 we ran 45 Lighthouse audits across 15 official theme demos, and the interesting number is not LCP itself but the distance between First Contentful Paint and LCP. FCP is the shell arriving; the FCP-to-LCP gap is the hero media making everyone wait.
| Theme demo | FCP | LCP | Gap (waiting for hero) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
Read Motion’s row again: first paint in 1.88 seconds, faster than almost everything we tested, then a 13.9-second wait for the hero. The theme’s code is not the bottleneck; the media strategy is. Horizon tells the same story from another angle: its total blocking time was 29ms, among the best JavaScript behavior in the audit, next to a 12.32-second LCP. Great engineering, heavy showcase.
And the counterexample proves the ceiling is real: on Ultra’s demo the largest element rendered together with first paint, 1.91 seconds for both, the only demo of 15 under Google’s 2.5-second threshold. That is what a disciplined first screen looks like in the data.
1. Weigh your hero. Open your homepage in PageSpeed Insights, expand the LCP diagnostic and look at what the LCP element actually is. If it is a 2 to 4MB image or a video, nothing else on this list matters until that changes. Export the hero at the rendered size, serve WebP or AVIF through Shopify’s image_url width parameters, and cap the file near 200KB. If the hero is an autoplaying video, give it a lightweight poster frame and let the video load after first paint, or move it below the fold.
2. Stop lazy-loading the LCP image. A common Shopify misconfiguration: the theme or an app applies loading="lazy" to everything, including the first hero image, which delays the one download that defines your score. The LCP image should load eagerly with high fetch priority; everything below the fold should stay lazy.
3. Audit the app stack. Each installed app can inject scripts that run before your hero starts downloading. Uninstall what you do not actively use, then check the theme code for orphaned script tags apps left behind. Shopify’s own performance documentation calls out app weight as a primary theme-speed factor.
4. Trim the first screen. Slideshows with five 2MB slides, animated announcement bars, chat widgets that boot immediately: every one of them competes with the LCP element. The first screen needs one message and one image.
5. Then, and only then, consider the theme. Theme choice sets your ceiling. We measured an 8x spread between the fastest and slowest demos in the same store, under identical conditions, and the difference was mostly discipline: how much the theme’s default first screen carries. If you are already shopping for a replacement, our full ranking of 15 measured demos is the place to start, and the vendor whose demo topped it, UTD, lists all of its themes here. But a theme swap while your hero weighs 3MB just moves the same problem into nicer typography.
Measure before and after, the same way each time. Lighthouse in Chrome DevTools or PageSpeed Insights, mobile profile, three runs, take the median, because single runs wobble. Watch two numbers: LCP itself, and the FCP-to-LCP gap from the chart above. If your fixes work, the gap collapses first, and that is your signal that the hero is finally arriving with the page instead of after it. Real-user data in Search Console’s Core Web Vitals report will follow within a few weeks, since Google evaluates LCP on field data, not lab runs.
Almost always because the largest above-the-fold element is a heavy hero image or autoplaying video that starts downloading late. Our audit data shows the pattern clearly: demos with fast first paint still posted 8 to 14 second LCPs when the hero media was heavy. Apps that inject render-blocking scripts push the start of that download even later.
Google's thresholds are under 2.5 seconds good, over 4 seconds poor, measured for real users on mobile. For reference, only 1 of the 15 official theme demos we audited under simulated mobile throttling came in under 2.5 seconds.
It can, and it is the one speed decision you make once. We measured an 8x spread in median mobile LCP between the fastest theme demo (1.91s) and the slowest (15.78s). But fix your hero media and app stack first: a fast theme with a 4MB hero will still fail.
Yes. Every app that injects a script into your theme competes with the LCP image for bandwidth and main-thread time before first paint. Audit your installed apps, remove what you do not use, and check whether leftover script tags remain in the theme code after uninstalling.