Optimization of CSS Loading Priority to Improve LCP Web Vitals #62266

[rajnish-ti]

NextJS 13 with App Router

Currently, all CSS files are loading at high priority, leading to elevated Largest Contentful Paint (LCP) Web Vitals. This affects the user experience negatively, as it prolongs the time crucial content becomes visible to the user. To enhance performance and user satisfaction, exploring methods to defer or reduce the loading priority of CSS files is imperative.

As you can see in the above screenshot all the CSS are loading at higher priority. We want to reduce the loading priority of these CSS files.

You can check the website at https://hindi.speakingtree.in/

Your insights and input on this matter are highly appreciated. Let's collaborate to enhance performance and provide an exceptional user experience. Thanks.

[shubh28tyagi]

+1

[markoleavy]

Hi @rajnish-ti!
For as much as I know, you can't have LCP if you don't have the css needed to render the LCP component, so the only way to improve results is to preload critical css only, in-lining it on the html or RSC payload. A copule of details:

• Some users (including me) report high LCP values after version 13.5.5. LCP increase after >=13.5.5-canary.1 #57989
• There's an open discussion regarding critical css on app router. It's getting quite popular, so would be great if you and @shubh28tyagi could upvote it, if you haven't already. You can also find a script I've written for statically generated HTMLs, to use Critters with app router. I'd love if you could test it. Add support for critical CSS inlining with App Router #59989
• I can't access your website (403 - forbidden), but your css looks tiny. The one on my project is more than 20kb and I have a real-users LCP of 1.6s. It might be something else slowing you down.

[leerob]

We're working on an experimental flag to enable CSS inlining, for both webpack/turbopack.

You can follow along on the PR: #72195

Closing this discussion to combine with: #59989