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!).”
“Above the fold” is a newspaper term for the top half of the vertical page with the Masthead on it. It is the most important real estate, as it is the first thing the reader sees.
Web pages are no different, so make sure your CSS is optimized for the top screen of the device.