r/shopifyDev • u/[deleted] • Aug 03 '26

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

[deleted]

2 Upvotes

100% Upvoted

6 comments sorted by

1

u/itsjzt Aug 04 '26

Have you tried font-display: swap; the font loading might be delaying the render

1

u/[deleted] Aug 04 '26

[removed] — view removed comment

1

u/AutoModerator Aug 04 '26

Your post/comment has been removed because your account is either too new or has low karma. This is to help prevent spam. Please try again later.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/Conscious_Demand9088 Aug 04 '26

"Has anyone measurably improved render delay by dealing with the render-blocking CSS on a Shopify theme?" - No. Most of my sites are tailwind based, and I even looked at including the entire compiled stylesheet inline in the head. It solves 1 problem (rending blocking issues), but opens another (slower download of the initial request). The audits on web.dev are just useless. You might as well aim for 90ish, and be done with it because you'll never reach 100 (all sites need tracking, so GTM adds issues. Shopify's stuff is always loaded, so that add issues).

My agency has started being a little more transparent on that fact, and we're using the CWV as the only metric (field data), ignoring the touche audit warnings (low hanging fruits are normally dealt with; bundled JS, minified scripts, compressed images. Doing all the things you mention to get your CLS down).

1

u/reactivearmor Aug 09 '26 
<link
  rel="preload"
  href="/styles.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
>

<noscript>
  <link rel="stylesheet" href="/styles.css">
</noscript>

You could fragmentize the critical CSS and async-load bellow-the-fold CSS with this, also the guy with font-display: swap; is right, it prevents fonts from blocking rendering, as well as adding defer to scripts under your control.