Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video)

In this video, Paul and I demo a new experimental bookmarklet he wrote for detecting critical CSS for above the fold content.

External CSS stylesheets are render-blocking, meaning the browser won't paint content to the screen until all of your CSS - specifically, media=’screen’ CSS - arrives. The solution to this is inlining the initially needed (above-the-fold) CSS for your page and loading the rest of your CSS when the page is ready.

If you have complete control of your hosting, using Google's mod_pagespeed module can automatically help solve this, otherwise it can be a real pain to work around.

This takes us to Paul Kinlan's new experimental bookmarklet, introduced today in his article Detecting critical above-the-fold CSS (do read it!). You can see a preview of the bookmarklet/snippet running in DevTools below.

Note: my own site suffers from quite a few render-blocking resources and I'm actively looking at how solutions like the above can practically help my optimization workflow.