Eliminate Render blocking resources in Magento 2
- 1. Overview
- 2. Tools to identify render-blocking opportunities
- 3. What are render-blocking resources?
- 4. Why eliminate render-blocking resources?
- 5. How to Eliminate Render-Blocking JavaScript?
- Minify JavaScript
- Use the defer and async attributes
- Use Advance JavaScript Bundling
- 6. How to eliminate render-blocking CSS?
- Minify CSS
- Defer non-critical CSS
- 6.3 Preload CSS & fonts
- 7. Results achieved using the above techniques
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: