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.