In most of your store, you uncounter render blocking issues. It’s really common issue for any store.
8 out of 10 stores have this issue. You can check this issue in “google pageSpeed insights”.
Now, what exactly is “render blocking” and how we can solve this issue.
The standard sequence to load web content is:
1. Html
2. Supporting files(like CSS , js etc)
Please check the image below to understand how render blocking created.
While loading any website whenever browser encounters any scripting or css files then it creates render blocking.
Now to fix this issue in magento follow the step below.
1. First, you need to figure out which js files are working after and before DOM load. Add defer attribute in script tag whichever js files are working after DOM load.
2. Now find your all external js (like analytics js etc) and add async attribute in their script tag.
3. Make sure to use only one file for CSS or merge your CSS.
4. While doing these changes keep checking after every single change because magento have lots dependencies in js as well.
For internal Javascript file
‹script src=”“…/js/js.js”” defer=”defer” type=”“text/javascript””›
‹/script>OR‹script src=”“…/js/js.js”” defer=”defer” type=”“text/javascript””› ‹/script›
For external Javascript file
<script type=“text/javascript” src=“https://www.google.com/js/js.js” async></script>
Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Magento. You can also visit the Magento development page to check the services we offer.
