Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

I love the web. The web should allow anyone to access any experience that they need without the need for native install or content walled garden.

Detecting critical above-the-fold CSS

Paul Kinlan

I recently used Page Speed Insights for Mobile to improve my blog's page load time and one of the key recommendations was to reduce render-blocking CSS above the fold. This led me to explore the concept of critical CSS, which is the minimum CSS required to render the initial view of a page. I developed a proof-of-concept tool (bookmarklet and devtools snippet) that analyzes the DOM and extracts the critical CSS by iterating through visible elements and using window.getMatchedCSS(). This tool helps identify unnecessary CSS, integrate into build processes for optimization, and potentially generate page-specific CSS files for improved performance. It currently has limitations, working only in WebKit/Blink, ignoring media queries, and not handling pseudo-elements.

Read More