Loadingβ¦
Stop large stylesheets from delaying first paint by inlining critical CSS and deferring the rest.
The browser will not paint anything until it has downloaded and parsed the CSS in the <head>. A big blocking stylesheet pushes back your LCP. Inlining the small slice needed for above-the-fold content and loading the rest asynchronously fixes this.
<head>.<link rel="stylesheet" href="/styles.css"> <!-- blocks first paint --><style>/* critical above-the-fold CSS inlined here */</style>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">WP Rocket and LiteSpeed Cache both have "Optimize CSS Delivery" / critical-CSS options that automate this.
Next.js inlines critical CSS for the route automatically; keep global CSS small and prefer CSS Modules / Tailwind.
Run a free audit and get a prioritized fix list with auto-generated code.
Run a free audit