How to Identify Above-the-Fold CSS for Your Website
Posted on Updated onIn the previous article I talked about the importance of above-the-fold content and why we should separate it out from our existing external CSS and inline it so that the user can quickly start viewing the webpage without having to wait for several external stylesheets to download. The problem is that CSS can be very complex and if you have a lot of plug-ins or third-party add-ons, it’s almost impossible to isolate the specific styles we’re looking for. Even if you’re proficient in programming, this can be a daunting task. Fortunately, a developer called Paul Kinlan has created a piece of JavaScript code that automatically does this for us. Here’s how to identify above-the-fold CSS for your website.
Getting the Javascript into Chrome
For the purposes of illustration, I’m going to assume you’re using Google Chrome which has an excellent set of developer tools allowing us to play around with website content in real-time. The first thing we need to do this to grab the open sourced code from GitHub. Navigate to the linked website, and click the icon at the top right that says “View Raw” as shown in the screenshot below.
This will open up a new page with nothing but the JavaScript for you to copy and paste. Next, open up the page whose critical CSS we want to isolate in a new tab Google Chrome. Once it’s loaded, press Ctrl+Shift+c. This will bring up the developer tools window from the bottom. We’re going to inject the JavaScript from GitHub into the webpage, so navigate to the “Sources” tab and click the little arrow on the left that slides the pane out of the side.
From there, open the “Snippets” section, right-click anywhere inside and select “New”.
This will allow us to create a new file which I’m calling “visiblecss.js”. Once the file is created, copy and paste the JavaScript be obtained from GitHub into the panel on the right hand side. Now we are ready to execute the code that will isolate the CSS for us.
Look towards the right and find the “Play” button as shown below. Click it, and a new output console should open up at the bottom filled with CSS styles!
There may already be some pre-existing content in the console, so click the little crossed circle to empty it entirely and run the JavaScript again.
What you see now is the above-the-fold CSS styles that need to be downloaded along with the webpage. We can fetch the remaining CSS from external style sheets at our leisure when the page has already been loaded.
You can test the relevance of the in-line CSS that has been generated by manually removing all of the external CSS files from your page within Google Chrome developer tools itself without needing to change anything on the server. Simply edit the HTML and the display will change in real time. Then insert the critical CSS that the script spat out and you should see your page render correctly – at least as far as the initial screen goes. Sometimes a couple of styles may not be applied in which case it is trivial to notice it and insert them manually.
If you have complete control over your web hosting environment, you can also install Google’s PageSpeed module called mod_pagespeed which does the same thing for you automatically. Unfortunately, many of us live in shared hosting environments that don’t give us the freedom to manually add or remove server modules. For people like us, inlining above-the-fold CSS while fetching external style sheets after the page has loaded is the next best thing and will allow your users to start consuming your content in a fraction of a second instead of getting stuck staring at a blank screen while the JavaScript and CSS is fetched in the background.
Hi, great article with clear instructions unfortunately the css generated once included in at the head of the doc destroys the responsive settings and the page doesn’t load as it should in smartphones. Is this because the appropriate @media tags don’t download in chrome? Any ideas how to overcome this?
My site was not responsive after following these instructions
Why not using a tool like the one at sirelocity.com to extract the css for the above the fold content ?
I (sadly) have IE-specific CSS on my site. Should I run the above JavaScript in every major browser (including mobile) to ensure I catch all the above-the-fold CSS needed?
The script does not work for me. When I run it in Chrome, I get this message:
Script snippet #1:26 Uncaught TypeError: w.getMatchedCSSRules is not a function
at parseTree (:26:25)
at new CSSCriticalPath (:49:5)
at :53:12
at :57:3
parseTree @ Script snippet #1:26
CSSCriticalPath @ Script snippet #1:49
(anonymous) @ Script snippet #1:53
(anonymous) @ Script snippet #1:57
Hi,
This post is outdated. I will rewrite in the upcoming days.
Thank you
I see that this has been updated as of Dec. 13, 2020 but I get a similar error to what Dave had in 2018
visiblecss.js:26 Uncaught TypeError: w.getMatchedCSSRules is not a function
at parseTree (VM1956 visiblecss.js:26)
at new CSSCriticalPath (VM1956 visiblecss.js:49)
at VM1956 visiblecss.js:53
at VM1956 visiblecss.js:57