Eliminate render-blocking JavaScript and CSS in above-the-fold content
This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to eliminate render-blocking JavaScript and CSS in above-the-fold content. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.
What is render-blocking JavaScript and CSS in above-the-fold content?
What is above-fold-content?
Above the fold content (or Visible Content) is content that appears on the page first when a user loads your website.
As you can see in the image it is the first portion of your page and by making sure this loads first your users will not have to wait with a blank screen before they are engaged. This makes for a better user experience and, as statistics show, will increase the amount of users that will become customers (known as the conversion rate).
What is render-blocking JavaScript and CSS?
When a web browser loads a website it follows a particular process
- 1. First it downloads the HTML file.
- 2. Then it reads (or renders) through the HTML code line at a time
- 3. If it requires a resource such as JavaScript or CSS it will download and render that resource before continuing with the html
- 4. If the as JavaScript or CSS calls on another resource that too has to be downloaded and read before it can continue
This means that if you have request a JavaScript or CSS file before the html then the browser is held up downloading and reading that file before it can display your content.
How to eliminate render-blocking JavaScript and CSS in above-the-fold content?
The answer to this sounds simple. Move the requests for such files below the html that loads your above the fold content, right? Well yes that is correct and in fact we place it right at the bottom of the code before the closing body tag but that does cause an issue.
The above fold content requires information from the CSS file in order to display properly. So what we do is place all the CSS required to display the above-the-fold content within the html file itself. We place it within style tags above the html and within the header tags as shown below.
<head>
<meta charset=”utf-8″>
<title>Example</title>
<style> REQUIRED CSS </style>
</head>
<body>
<div> REQUIRED HTML FOR ABOVE-THE-FOLD CONTENT </div>
</body>
</html>
This may sound very complicate however there are some tools that help us do this.
TOOL 1
The simplest tool I have found is “Sitelocity’s Critical Path Generator”
Simply enter your site address including the http:// or https:// and click the ‘GENERATE CRITICAL PATH CSS’ button. The tool will then automatically download your sites CSS file and copy the required section for the above the fold content. It then minifies the CSS and outputs it ready for you to input into your HTML file as described above.
TOOL 2
Another tool is the “Critical Path CSS Generator”
- 1. enter your website address
- 2. Paste your entire CSS file into the box indicated
- 3. Hit the “create Critical Path CSS” button
Then it will generate the CSS required to display the above fold content. You then simply add the generated CSS into your html file as described above.
And once uploaded that is it. Congratulations, you have successfully eliminated render-blocking JavaScript and CSS in above-the-fold content. That’s another tick and an increase in points for your google pagespeed insights results.
To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.
improving page speed using the Google page speed insights developer tool