Eliminate Render Blocking Resources In Optimization Magento 2
Tools like GT Metrix,lighthouse, Page speed insights.
Technically Magento2 Backend setting:
- If your store in developer Mode
- 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 >
- 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.
1.4 Bundling Amasty through
Test cases –
- Enable js bundling: Yes
- Minify js files : No
- Move js code to bottom : Yes
- 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
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.
< link rel=”preload” as=”style” href=”https://static.sooqr.com/custom/117844/1/combined.css” >
Leave A Comment