If you've already analyzed your website with Google Page Insights, you've probably seen a warning inviting you to eliminate blocking or Render-Blocking scripts. Perhaps this is why you are reading this article. What is blocking scripts? How to eliminate them? Here are the questions you probably ask yourself and to which we will answer in the rest of this article.
The blocking scripts or “render-blocking”, what is it?
The blocking scripts are portions of code present in the files of a website, generally CSS and JavaScript, which prevent the rapid loading of a web page. These resources, which take a relatively long time to be treated by the browser, may not be necessary for the immediate experience of the user. Render-blocking can be deleted or delayed until the browser needs to treat them.
Make no mistake: CSS and JavaScript are excellent. Without the CSS, websites would only look like text cobblestones. Without JavaScript, we would not be able to add dynamic, interactive and attractive elements to our websites. But, if used at the wrong time, CSS and JavaScript can harm the performance of your website.
Here is why: When a browser loads a web page for the first time, it analyzes all the HTML code on the page before displaying it on the visitor's screen. When the browser meets a link to a CSS file, a JavaScript file or an online script (that is to say of the JavaScript code in the HTML document itself), it interrupts the HTML analysis to recover and run the code, which slows down the entire process.
Why are blocking scripts bad for your website?
The JavaScript and CSS scripts that block the rendering slows down your pages, which is bad for several reasons. The speed of the site plays a role in many essential aspects of your website, including conviviality and optimization on search engines (SEO). When your site takes care of slowly, you may lose visitors and be less well classified on search engines.
Of course, the speed of a site is not only affected by the Render-Blocking. That said, it is a factor that can make a significant difference in loading times. Remember that each resource of a web page occupies bytes, and that a greater quantity of these bytes can cause longer download times. The less your site has scripts, the more light it is, the better.
In general, it is preferable to ensure that the code of your site is as clean and minimal as possible to improve its overall performance. However, there will always be “remains” of code. By default, browsers try to charge everything at the same time, including blocking scripts.
It is up to you to make sure that your site first loads the scripts necessary to be correct and usable when a visitor arrives on a page. It is only then that the rest of the scripts must be loaded.
Identify blocking scripts
Before making changes inside your website, you must first identify and locate blocking scripts. The best way to achieve it is to use a free online tool, such as the Google Pagespeed Insights tool. Paste the URL of your site and click Analyze.
Once the analysis is complete, Google attributes to your site a global speed score, ranging from 0 (slowest) to 100 (the fastest). A score between 50 and 80 is average, so you should be in the upper part of this range, or above.
To identify the blocking scripts that slow down your page, scroll through the screen to the “opportunity” section, then open the accordion “eliminate resources that block the rendering”.
You will see a list of files slowing down the “first visualization” of your page – These files affect the loading time of all the content that appears during the initial loading of the page. This is also called the content “above the fold”. Take note of all the files ending with the .css and .js extensions. And delete them.
Remove blocking scripts: manually or with a plugin
Now that you have identified the problem, there are two ways to solve it: manually, or with a plugin.
The plugins can very well eliminate blocking scripts for you. However, the plugins themselves are only additional files added to your web server. If you want to limit the number of these files, or if you just prefer to take care of the changes yourself, you can manually treat Render-Blocking. To do this, in your website files, locate the tags
The tags
To solve this problem, you can add the Async attribute (asynchronous) or defused with script beacons for blocking scripts. Async and Defer are placed as follows:
Although they have similar effects on loading times, these attributes tell the browser to do different things. The Async attribute reports to the browser to load the JavaScript resource, while analyzing the rest of the page, and executes this script immediately after its load. The execution of the script pauses the analysis of the HTML code.
Scripts with the Defer attribute are also loaded during the page analysis. However, loading these scripts is delayed until the end of the first rendering or up to loading the most essential parts.
The Defer and Async attributes should not be used together, on the same resource. But, one can be better suited to a particular resource than the other. In general, if a script not essential depends on the execution of a script before him, use Defer. The Defer attribute guarantees that the script will be executed after the necessary necessary script. Otherwise, use Async.
After making your changes, perform a latest analysis of your website via Pagespeed Insights and see the impact of your changes on your score. You will probably notice a notable improvement, but don't worry if it is not. Many factors can affect a page performance, and you may have to dig a little more to find the source of bad performance.
Finally, check your pages well to make sure your site is working properly. Does the page take care quickly? Are all the elements displayed? If you have come to a point where you have tried several techniques without obtaining notable gains, it may be better to consider other ways to accelerate your pages, rather than risking completely breaking your site.
