In google page-speed test it shows best opportunity to speed up is eliminate blocking resource. So is there anyone who can guide me to do this?
2 Answers
You can try this:
Merge js files.
Minify js files.
Enable Javascript bundling.
Merge CSS files.
Minify CSS files.
Optimise CSS delivery by enabling LoadCSS js library.
Minify the critical CSS.
Move JS to the bottom.
Review above-the-fold (AF) content. Do you see any parts that are rendered by javascript? Get that javascript placed in head section so that your AF is not distorted initially.
Identify critical CSS - ie. CSS that is needed to render AF content. Place critical CSS in head section.
Place all the other CSS at bottom of a page.
You can try the following points:
1. 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 is in developer Mode
- Go to Stores > Configuration > Advanced > Developer > Javascript settings
- Set minify javascript files yes
- Cache clean and cache flush
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=”test.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=”test.js” > < /script >
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 > Enable JavaScript Bundling.
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) From CLI
- Set store mode as production
- Run full deployment
- Clear all cache and set all permissions
After Bundle –
i) Looks like most of the js code is missing in the newly created bundle js files
ii) Along with newly created bundle js files. All js files present in the request queue
iii) Observed that the Merge JavaScript Files option automatically set as “Yes” but was not before.
4. 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 time and block resources.
5. 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” >