What is render blocking?
Render means loading, so if a javascript is render-blocking, it means that the javascript is keeping the page from loading.
Google recommends 1 to remove or defer javascripts that interfere with loading the above the fold content of your webpages.
Above the fold means what a user sees initially on their screen. That screen might be a phone, ipad, desktop or whatever the user is using to see your webpage.
This practice has long been used by people who are into pagespeed, but is new to the vast majority of webmasters and designers and can be a bit confusing, and may even seem impossible to do.
It is not only possible, it is also required to be good web citizen and even if you you don‘t care about users with slow connections, you do care about your ranking in Google. Your ranking in Google is at risk if you don‘t optimize for this. Specifically, if Google sees that your webpage does not load well for certain devices (phones, ipads, etc.) they won‘t include you in the results because Google doesn‘t want to send users to slow pages or pages that cause the user to wait too long for the content.
How to identify render-blocking javascripts
You need to know what your page is loading. There are several ways to do this. I suggest you look at what your page is loading with our request tool to get a glimpse at the scope of the issues your page faces. To get the specific files that are currently blocking rendering you should use the Google pagespeed insights tool. This tool will tell you the exact files that are blocking a particular page.
How to remove render-blocking javascripts
The most common culprit javascript, and a really great example for this is jQuery which is a javascript file that is used on a large percentage of webpages. It is very likely you are using it (find out with our tool if you are).
This javascript file is rather large, in fact it may very well be the largest file your webpage is loading to render your page.
jQuery is a popular javascript file, and is often used to do very little things like a fade in or out of an image for example. There is typically no reason to load jQuery before you load you your webpage yet the vast majority of pages are doing it.
If the thing you are using jQuery for happens below the fold thenthere is no reason to load it before it is needed. If you are loading it before, you are not following this pagespeed guideline and you are making your users wait.
To correct this requires that you change where the call for jQuery is made. This is done in the html of your webpage. The way most websites are currently calling jQuery is in the head of the document as shown below.
<head> <meta name=description content="description here."/> <title>title here</title> <style> styles here </style> <script src="jquery.js"> </script> </head>
That call to jQuery (a rather large file) is made and has to be downloaded by the browser before anything else is shown on the page. This is bad. This is really really bad if the thing you are using jQuery is not even needed for the above the fold content as shown in above image.
An often used partial solution
Often the call to jQuery will be removed from the head of the document and moved to somewhere elese further down the page, as it is not needed until then. Unfortunately this isn‘t enough.
<!-- the things you don‘t need jquery for (most of your page) is here --> <script src="jquery.js"> </script> <!-- the thing you need jQuery for is here -->
True solution
To completely remove javascript from the rendering path it will need to deferred until after the page loads. I have a tutorial for this using the Google recommended solution that completely defers javascript.
To follow this well you need to know what your page loads and why it loads it
Anything your webpage calls costs your users more of their time. If you don‘t know what requests your webpage makes, you need to start knowing. jQuery is a good example because it is so common and such a large file (about 100kb). An all to common scenario is that a small webpage that is only 10kb is calling a large file like jQuery (which is ten times larger than the webpage itself) to do some mundane task like fade in some words on the page. You may have thought "hey that looks cool!" when you saw it, but is it cool enough to make your user wait ten times more time to see your page? the exact same effect could happen with CSS or smaller javascript.
I used jQuery as an example but I am not saying it is bad. The same things could be said of even commoner javascripts like Google analytics, or some third party javascripts that show widgets or even those social Facebook, Twitter buttons that people love so much.
Know what your page is using, and decide if it is worth making your visitors wait
- The request tool on this site is a good way to see what your page is using.
- To remove your render blocking javascript you must defer it.