What is render blocking?
- Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could.
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.
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 pagespeed tool to get an overview of the issues your page or theme 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.
If the thing you are using jQuery for happens below the fold then there 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.
<meta name=description content=”description here.”/>
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 –>
<!– the thing you need jQuery for is here –>
To follow this well you need to know what your page loads and why it loads it
Know what your page is using, and decide if it is worth making your visitors wait
- The pagespeed tool on this site is a good way to see what your page is using.