Skip to content
Eliminate Render blocking resources in Magento 2
1. Overview
During your site audit in Google Page Speed Insight Tool (PSI) or GT Metrix or any other performance checking tool, you may have seen the opportunity section “Eliminate Render Blocking Resources”, What does it mean? How you can fix this? there are many questions in your mind.
After reading this blog, you will get answers to all your above questions. Let’s see the blog in detail.
2. Tools to identify render-blocking opportunities
Below given tools will be useful to identify render-blocking opportunities. These tools will list the files from where you can eliminate render-blocking.
3. What are render-blocking resources?
Render blocking resources are static files that are required for the rendering of a web page, such as fonts, HTML, CSS, and JavaScript.
When the browser encounters a render-blocking resource, it pauses all other downloads until these crucial files have been processed. Meanwhile, the entire rendering process has been halted. Non-render blocking resources, on the other hand, do not delay the page’s rendering. After the initial page renders, the browser can safely download them in the background.
Both scripts and stylesheets are render-blocking resources, delaying FCP and, as a result, LCP. To speed up the loading of your web page’s core content, defer any non-critical JavaScript and CSS.
4. Why eliminate render-blocking resources?
Eliminating render-blocking resources gives you several benefits, some of them are listed below.
- Reduce page load time.
- Increasing user experience.
- Improvement in search engine optimization.
- Fewer HTTP requests.
- Improvement in largest contentful paint (LCP).
- Improvement in first contentful paint (FCP).
5. How to Eliminate Render-Blocking JavaScript?
Programmers used comments, white space characters, tabs, block delimiters, newline characters to style their code. But the browser does not require additional spaces, tabs, or line breaks in order to interpret the code. The functionality of the code will not be affected if all code styling and comments are removed. So we can minify code and minimize file size.
Download and deliver only the bare minimum of JavaScript to users. Reduced blocked JavaScript results in a quick render and, as a result, a better LCP.
Use the below techniques to eliminate render-blocking:
5.1 Minify JavaScript
The objective of minifying js is to reduce the number of characters in the code. The smaller file size, then the browser will download and process fast.
Magento 2 should be in production mode.
./bin/magento deploy:mode:set production- Go to Stores -> Configuration -> Advanced -> Developer
- Set Minify Javascript Files option to Yes.
- Flush Cache at System > Cache Management page.
5.2 Use the defer and async attributes
By default, JavaScript files added to the document’s section are considered as render-blocking resources.
Instead of the < head > section, place the < script > tags just before the closing < /body > tag to remove them from the critical rendering path.
Async – allows the HTML parser (e.g., a visitor’s browser) to download the JavaScript while the remainder of the HTML is being parsed. That is, it does not cease parsing altogether while the file downloads. However, once the script has been downloaded, it will pause the HTML parser and execute the script.
< scrip async src=”script.js” > < /script >
Defer – lets the HTML parser download the JavaScript while parsing the rest of the HTML and waits to execute the script until the HTML parsing is finished.
< scrip defer src=”script.js” > < /script >
5.3 Use Advance JavaScript Bundling
Advance JavaScript bundle feature of Magento 2 helps to reduce the number of server requests and the size of those server requests.
For example, it will help to reduce the
This is the inbuilt feature of Magento 2, enable this setting from Magento backend.
Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings, or from the command line.
6. How to eliminate render-blocking CSS?
6.1 Minify CSS
CSS files can include characters like space, indentation, and comments to make them simpler to read. All of these characters are superfluous for the browser, and by minifying these files, they will be deleted. At the end of the day, lowering the amount of blocking CSS will always improve the time it takes to fully render the page’s core content (LCP).
6.2 Defer non-critical CSS
To detect any wasted CSS on your web page, utilize the Coverage tab in Chrome DevTools.
To improve: Remove any unneeded CSS from your site or relocate it to a different stylesheet if it’s needed on a different page.
Use loadCSS to load files asynchronously for any CSS that isn’t required for initial rendering, leveraging
rel="preload" and onload.html
6.3 Preload CSS & fonts
In the Preloading process, you should tell the browser to fetch certain resources which are most important for the respective page.
You can preload resources by adding a tag with rel=”preload” to the head of your HTML document:
7. Results achieved using the above techniques
Before (Desktop)
After (Desktop)
Before (Mobile)
After (Mobile)
