Remove render-blocking javascript and css from content above the divider

Read why it's important to remove rendering-blocking javascript and CSS, and how you can do it.
Fjern gengivelsesblokeren javascript

Why is it important to remove rendering-blocking javascript and CSS?

To understand why it is important to remove rendering-blocking javascript and CSS, it requires a little understanding of how a web browser reads the code of your website. The web browser reads your site’s code from top to bottom. Removing this is part of our speed optimization .

If the browser encounters a JavaScript or CSS file when reading the website’s code, it stops reading the page’s code while it downloads and processes the file. Instead of pausing the loading of the site’s content, the browser could use its time more efficiently, for example, loading content that is visible to those who land on the page.

For that reason, these files will mean that it will take longer to display HTML for the content above the dividing line on the website, which will also cause the website to work slower for those who visit it.

In order to give your visitors as good an experience as possible, it helps to optimize the website’s rendering-blocking Javascript and CSS files, as well as their placement in the code.

Test if your website has rendering-blocking Javascript and CSS

You can use Google PageSpeed ​​Insights to test whether your website has rendering-blocking Javascript and CSS files. If you have problems with such files, Google PageSpeed ​​Insights will show the section “Eliminate rendering blocking resources” under their function options.

How to remove render blocking javascript and CSS?

You can use plugins to eliminate rendering blocking Javascript and CSS. Here’s more about what these plugins do to remove these resources so your website can perform better.

Removal of render-blocking JavaScript

Here’s more about what plugins to remove render-blocking Javascript do:

  • Defer: Here you let the HTML parser download the JavaScript, but it first goes through the entire HTML file before executing the JavaScript.
  • Async: Here you let the HTML parser execute the Javascript at the same time as it analyzes the HTML file. It thus does not stop analyzing while downloading the Javascript file.

Removal of render-blocking CSS

Removing render-blocking CSS is a bit more complicated, as you have to be careful not to expose the wrong CSS elements. To remove render-blocking CSS one should:

  1. First of all, you need to identify the styles that are necessary to render content above the dividing line and these styles must be aligned with the HTML.
  2. Identify CSS resources that are conditional. That is, resources that are needed only for specific situations or units. 
  3. All remaining CSS resources must be loaded asynchronously. This is most often done by adding them deferred or with asynchronous Javascript. It is very technical, but there are many good plugins that you can use to do this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Table of Contents

Play Video

Get a free analysis of how fast your shop can be

    Get a free analysis of your webshop’s speed!
    We send you a live screen recording where we analyze your shop’s speed and explain how you can optimize it 🚀