Remove render blocking from magento site

render-blocking

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.
critical redenring

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>