Eliminate Render Blocking Resources In Optimization Magento 2
Render blocking resources are static files that are required for the rendering of a web page, such as fonts, HTML, CSS, and JavaScript.Eliminate render-blocking JavaScript and CSS in above-the-fold content.
1. Identification
Tools like GT Metrix,lighthouse, Page speed insights.
1.2 Minify JavaScript
Minification can help reduce JavaScript file sizes by removing comments, white spaces, and redundant code, and in some cases, also makes the code more efficient by using shorter variable and function names.
Technically Magento2 Backend setting:
- If your store in developer Mode
- Go to Stores > Configuration > Advanced > Developer > javascript settings
- Set minify javascript files yes
- Cache clean and cache flush
1.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.
Async – You should use async if your script contains the following conditions:
- The DOM you need is already present (or the script doesn’t need the DOM)
- The script doesn’t depend on other scripts.
< script async src=”script.js” > < /script >
Defer – Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
< script defer src=”script.js” > < /script >
1.3 Use Advanced JavaScript Bundling
Bundling JavaScript modules for better performance is about reducing two things
- The number of server requests.
- The size of those server requests.
This is the inbuilt feature of Magento 2, enabling this setting from the Magento backend.
Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings, or from the command line.
1.4 Bundling Amasty through
Stores > Configuration > Amasty Extension > Google Page speed optimizer > Javascript setting
Test cases –
i) Backend > store > Configuration > Advanced > Developer > Javascript settings
- Merge javascript file : No
- Enable js bundling: Yes
- Minify js files : No
- Move js code to bottom : Yes
ii) Backend > store > Configuration > Amasty extension > Google page speed optimizer > settings > Javascript
- Amasty js optimization : Enabled
- Is magento Cloud : No
- Run optimization option and follow all steps
- Click on save config button
iii) From CLI
- Set store mode as production
- Run full deployment
- Clear all cache and set all permissions
After Bundle –
i) Looks most of js code is missing in newly created bundle js files
ii) Along with newly created bundle js files. All js files present in request queue
iii) Observed that Merge JavaScript Files option automatic set as “Yes” but was not before.
2. How to eliminate render-blocking CSS
Css files can include characters like space,indentation, and comments to make them simpler to read .Unused css block the time and block the resources.
3. 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).
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.
Example
< link rel=”preload” as=”style” href=”https://static.sooqr.com/custom/117844/1/combined.css” >
