Stop Render Blocking Scripts On Blogger

0
155
Stop Render Blocking Scripts On Blogger

While the bulk of websites are built off of the WordPress platform therefore you can simply install a plugin such as the W3Total Cache which will automatically try to stop render-blocking scripts. However, on blogger we don’t have access to plugins therefore we need to know how to edit it manually. But first we need to establish what a render blocking script is and then we can talk about preventing it on a platform such as Blogspot.

What Is A Render-Blocking Script

A render-blocking script is a CSS, or JavaScript file that prevents the page from loading. As a browser loads a page it should load the skeleton (HTML) then the styles (CSS) then the animations (JavaScript). However, most websites place the CSS files at the top of the page to prevent a flash of plain HTML. While this is the correct way to handle it some types of CSS files do not need to load, for instance, an excessive amount of fonts are not needed on the initial load. Websites that make use of font awesome do not need it to load in the header.

However, there is an issue known as a ‘flash’ this is common with fonts where when you load it in the footer it will restyle all of the present text on your website after it is loaded. It is a small price to pay for the improvement of your load time. Keep in mind that page speed does affect your search rankings and this can help you load it faster even if it is just a few milliseconds.

The same principle goes with JavaScript if the file is not needed on the initial load then you can load it with Async and move it to the footer. This will prevent it from being render blocking and it will wait for all other resources to load now before you do this for all your JavaScript keep in mind some files can’t be moved to the bottom. Most notably is jQuery there is a joke among web developers and that is the “jQuery¬†tax” for complex websites jQuery is almost always needed and it can hurt your load time and there is little you can do about it.

How To Fix It

The first thing you want to do is go into your template and edit HTML.

After you are in look for anything that has a .css or .js in the name and determine whether you need it to load at the initial launch.

Move all the files that you can before the /body tag…

Load the JavaScript files with Async.

Here is how to load any javascript file with Async

<script> var script = document.createElement(‘script’); script.src = “URL GOES HERE”; document.getElementsByTagName(‘head’)[0].appendChild(script); </script>

*Keep in mind jQuery should stay in the header and never load it with Async*

Need any help with your specific website post a comment below and I can help you out!

LEAVE A REPLY