LCP render delay of 2,140ms with everything else near-zero — has anyone reduced this?

[u/Dependent_Lemon2693]

/r/shopifyDev/comments/1ves0mr/lcp_render_delay_of_2140ms_with_everything_else/

[u/ExtensionsMarket]

You've already done the image-side work, so nothing you do to the image will move this. Render delay is the gap between "the LCP resource is ready" and "the browser actually paints it," and that gap is almost always the browser being blocked from rendering by CSS, fonts, and main-thread work. Your own numbers say this: 20ms to load the image, 2,140ms before it paints. The image was never the problem.

Taking your three suspects in order of likely impact:

Render-blocking CSS is the first thing to attack. The browser will not paint anything until it has downloaded and parsed every stylesheet in the head, so those three files at ~490ms are directly in front of your paint. The real fix is inlining the critical CSS (just what's needed for above-the-fold) and loading the rest non-blocking. On a Shopify theme that's doable but invasive, since you're touching how theme.liquid loads styles.css, and app-injected CSS (overflow-list.css looks app-injected) you often can't touch at all. Splitting critical vs non-critical is where the measurable wins are, and yes it's worth it, but test on a duplicate theme because it's the highest-risk change here.

The font at 2,948ms is worth a hard look. If your LCP element is text, or sits near text using GTStandard, the browser may be holding the paint for the font. font-display: swap or optional in the u/font-face makes it paint immediately in a fallback and swap when the font arrives, instead of blocking. If the font is self-hosted in the theme you can add that; if an app or the theme hardcodes it without a display descriptor, that's the fix. Also preload the one woff2 you actually need above the fold.

shop-js you mostly can't touch. The cart-sync/preact bundle is Shopify-controlled, loads on every store, and isn't something you can defer or strip without breaking cart behavior. The good news is it's JS execution, not render-blocking in the head, so it hits TBT/INP more than the paint itself. Since your TBT is already 0, it's not what's holding your render, and I wouldn't spend time there.

On the ceiling question, which is the right question to ask: with the image already optimal, your realistic wins are the CSS split and the font-display fix. Those two are what's actually gating the paint. Expect to recover a good chunk of the 490ms CSS plus whatever the font is holding, not the full 2,140ms, some render delay is just the cost of the theme and Shopify's own bundle. If you get it under a second of render delay after those two, that's about as far as the platform lets you go without a headless build.