How to Eliminate Render-blocking Resources in Magento 2 [Complete Method]

Render-blocking resources in Magento 2 store can significantly affect the loading speed. This can create a poor experience for the end users, which can ultimately affect the search engine rankings.

Let’s say you launched a brand new store on Magento 2 store with a visually-appealing design. You audited the site through performance tools such as PageSpeed Insights or GTMetrix and the results are disappointing. One of the optimization opportunities you see is—“Eliminate render-blocking resources.”

But what does it mean? How do you eliminate render-blocking resources in Magento 2? Let’s understand through this micro-post. 😀

Table of Contents

• What Are Render-blocking Resources?
• Why Eliminate Render-blocking Resources in Magento 2?
• How to Eliminate Render-blocking Resources in Magento 2?
  • Minify & Bundle JavaScript
  • Optimize CSS Delivery
  • Defer Parsing of JavaScript
• Final Take

What are Render-blocking Resources?

Browsers load web pages line-by-line from top to bottom.

The JS and CSS resources present in the head or top of the body are loaded before the actual content. This delays the rendering of the web page on the browser and affects the page experience. These are called Render-blocking resources.

Take the following screenshot, for example:

Quite often these resources are not required initially when the browser renders the page.

Why Eliminate Render-blocking Resources in Magento 2?

Eliminating render-blocking resources in Magento 2 can speed up page loading and improve the user experience.

Render-blocking resources are known to affect the core web vitals metrics First Contentful Paint and Largest Contentful Paint. Therefore, eliminating the render-blocking resources can help you improve the PageSpeed Insights score.

How to Eliminate Render-blocking Resources in Magento 2?

There are many ways to get rid of render-blocking resources in Magento 2. You can either remove the unnecessary resources or defer their parsing. Here are the most actionable ways to eliminate render-blocking resources in Magento 2:

Minify & Bundle JavaScript

JavaScript minification refers to reducing the file size of the Js files by omitting unnecessary characters. Bundling refers to packing multiple Js files into a single one. This reduces the total number of requests to load required resources.

By default, Magento 2 offers functionality to enable JavaScript minification and bundling from the backend. Follow these steps:

• In the Magento 2 admin panel, go to Stores > Configuration.
  
• In the configuration, scroll down to Advanced > Developer and expand the JavaScript Settings section. Set Enable JavaScript Bundling and Minify JavaScript Files to Yes.
  
• Click Save at the top-right corner of the page.

Optimize CSS Delivery

Cascading Style Sheets (CSS) is also a major culprit causing the render-blocking resources issue in Magento 2. Especially, if you’re using a heavy theme.

In Magento 2, you can minify and bundle CSS files too. Follow these steps:

• In the Magento admin, navigate to Stores > Configuration > Advanced > Developer.
• Expand CSS Settings, and enable the respective options.
  
• Save the changes.

Add the critical CSS inline to reduce the number of requests. The critical CSS includes the styles required to load the above-the-fold content of the web page.

Leverage loadCSS to load critical files asynchronously using preload and non-critical files using onload.

Defer Parsing of JavaScript

The most effective way to eliminate render-blocking resources in Magento 2 is to defer the parsing of non-critical JavaScript files.

This means that these Js files will be loaded and executed after the page has been rendered. This can be done using the defer HTML tag.

Here’s how to do it in Magento 2:

• Find the Js files responsible for render-blocking. (You can find it using tools such as GTMetrix)
  
• Add defer attribute to the respective script tag in the source file of the webpage. This is generally present in the app/design/frontend/{Vendor}/{Theme}/Magento_Theme/layout.For example:<script src=”your_script.js” defer></script>

The above will defer the parsing of JavaScript and eliminate the render-blocking issue in Magento 2. You’ll require to do this for all the JavaScript resources blocking the render of the web page to fix the issue.

This can be exhausting when you are fixing the issue on a large scale. Furthermore, manually putting the defer variable is prone to errors. Our free Magento 2 Defer Parsing of JavaScript extension does this tedious work for you. The extension defers Js parsing site-wide and can be configured to exclude specific pages.

Final Take

Render-blocking resources is a common page speed issue that affects many resource-heavy websites. In the above article, we learned the major techniques to eliminate render-blocking resources in Magento 2. In addition to this, you can also follow other best practices to minimize the render-blocking resources in Magento 2, such as

• Local hosting of custom fonts
• Removing unused resources
• Load conditional CSS with media attributes

That’s it! I hope this article has added value to your Magento knowledge. In case you still have any doubts or queries, feel free to ask. 😊