Critical CSS and Render-Blocking Resources, Explained
Why a page stays blank while stylesheets and scripts load, what the render-blocking audit means, and the fixes in order of return, from fewer files to inlining.
Writing
4 write-ups from production, newest first. Each one is a problem hit on a real project and how it was diagnosed and fixed.
Why a page stays blank while stylesheets and scripts load, what the render-blocking audit means, and the fixes in order of return, from fewer files to inlining.
Migrated to CSS container queries and watched LCP jump 800ms in field data. Here is why the hero image stops being a priority paint and how to fix it.
Next.js Windows SCSS imports from node_modules are breaking again in webpack mode. Here is the workaround path I would use until upstream lands a fix.
Next.js App Router render-blocking CSS can crush LCP when globals and library styles leak into initial chunks. Here is the fix I use on production builds.