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.
Use the below techniques to eliminate render-blocking:
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
- Flush Cache at System > Cache Management page.
Example of LCP improvement: Before and after minifying JS
5.2 Use the defer and async attributes
Instead of the < head > section, place the < script > tags just before the closing < /body > tag to remove them from the critical rendering path.
< scrip async src=”script.js” > < /script >
< scrip defer src=”script.js” > < /script >
For example, it will help to reduce the
This is the inbuilt feature of Magento 2, enable this setting from Magento backend.