{"id":2787,"date":"2024-12-31T20:26:31","date_gmt":"2024-12-31T20:26:31","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-eliminate-render-blocking-resources-in-magento-2-complete-method\/"},"modified":"2025-01-02T10:00:23","modified_gmt":"2025-01-02T10:00:23","slug":"eliminate-render-blocking-resources-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/eliminate-render-blocking-resources-in-magento-2\/","title":{"rendered":"How to Eliminate Render-blocking Resources in Magento 2 [Complete Method]"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Render-blocking resources in&nbsp;<a href=\"https:\/\/business.adobe.com\/products\/magento\/magento-commerce.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2<\/a>&nbsp;store can significantly affect the loading speed. This can create a poor experience for the end users, which can ultimately affect the search engine rankings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say you launched a brand new store on Magento 2 store with a visually-appealing design. You audited the site through performance tools such as&nbsp;<a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a>&nbsp;or GTMetrix and the results are disappointing. One of the optimization opportunities you see is\u2014\u201cEliminate render-blocking resources.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But what does it mean? How do you&nbsp;<strong><em>eliminate render-blocking resources in Magento 2<\/em><\/strong>? Let\u2019s understand through this micro-post.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-render-blocking-resources\">What are Render-blocking Resources?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Browsers load web pages line-by-line from top to bottom.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The JS and CSS resources present in the head or top of the body are loaded before the actual content. This delays the rendering of the web page on the browser and affects the page experience. These are called Render-blocking resources.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Take the following screenshot, for example:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/05\/Eliminate-render-blocking-resources-in-Magento-2.png\" alt=\"Eliminate render-blocking resources in Magento 2\" class=\"wp-image-32038\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Quite often these resources are not required initially when the browser renders the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-eliminate-render-blocking-resources-in-magento-2\">Why Eliminate Render-blocking Resources in Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eliminating render-blocking resources in Magento 2 can&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/speed-up-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">speed up page loading<\/a>&nbsp;and improve the user experience.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/05\/Eliminate-render-blocking-resource-gtmetrix.png\" alt=\"Eliminate render-blocking resource Gtmetrix\" class=\"wp-image-32039\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Render-blocking resources are known to affect the core web vitals metrics&nbsp;<strong>First Contentful Paint<\/strong>&nbsp;and&nbsp;<strong>Largest Contentful Paint<\/strong>. Therefore, eliminating the render-blocking resources can help you improve the PageSpeed Insights score.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-eliminate-render-blocking-resources-in-magento-2\">How to Eliminate Render-blocking Resources in Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are many ways to get rid of render-blocking resources in Magento 2. You can either remove the unnecessary resources or defer their parsing. Here are the most actionable ways to eliminate render-blocking resources in Magento 2:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"minify-and-bundle-javascript\">Minify &amp; Bundle JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript minification refers to reducing the file size of the Js files by omitting unnecessary characters. Bundling refers to packing multiple Js files into a single one. This reduces the total number of requests to load required resources.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, Magento 2 offers functionality to enable JavaScript minification and bundling from the backend. Follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Magento 2 admin panel, go to&nbsp;<strong>Stores &gt; Configuration<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/05\/Go-to-stores-configuration-in-Magento-2.png\" alt=\"Stores &gt; Configuration in Magento 2\" class=\"wp-image-32040\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>In the configuration, scroll down to&nbsp;<strong>Advanced &gt; Developer&nbsp;<\/strong>and expand the&nbsp;<strong>JavaScript Settings&nbsp;<\/strong>section. Set&nbsp;<strong>Enable JavaScript Bundling<\/strong>&nbsp;and&nbsp;<strong>Minify JavaScript Files<\/strong>&nbsp;to&nbsp;<strong>Yes<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/05\/Enable-Js-minification-and-bundling-in-Magento-2.png\" alt=\"Enable Js Minification and Bundling in Magento 2\" class=\"wp-image-32041\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Click&nbsp;<strong>Save&nbsp;<\/strong>at the top-right corner of the page.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optimize-css-delivery\">Optimize CSS Delivery<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cascading Style Sheets (CSS) is also a major culprit causing the render-blocking resources issue in Magento 2. Especially, if you\u2019re using a heavy theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Magento 2, you can minify and bundle CSS files too. Follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Magento admin, navigate to&nbsp;<strong>Stores &gt; Configuration &gt; Advanced &gt; Developer<\/strong>.<\/li>\n\n\n\n<li>Expand&nbsp;<strong>CSS Settings<\/strong>, and enable the respective options.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/05\/Enable-CSS-minification-and-bundling-in-Magento-2.png\" alt=\"Enable CSS Minification and Bundling in Magento 2\" class=\"wp-image-32043\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Save<\/strong>&nbsp;the changes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Add the critical CSS inline to reduce the number of requests. The critical CSS includes the styles required to load the above-the-fold content of the web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Leverage&nbsp;<a href=\"https:\/\/github.com\/filamentgroup\/loadCSS\/blob\/master\/README.md\" target=\"_blank\" rel=\"noreferrer noopener\">loadCSS<\/a>&nbsp;to load critical files asynchronously using preload and non-critical files using onload.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"defer-parsing-of-javascript\">Defer Parsing of JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The most effective way to eliminate render-blocking resources in Magento 2 is to defer the parsing of non-critical JavaScript files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This means that these Js files will be loaded and executed after the page has been rendered. This can be done using the defer HTML tag.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s how to do it in Magento 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Find the Js files responsible for render-blocking. (You can find it using tools such as GTMetrix)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/05\/Find-Js-files-responsible-for-render-blocking-in-Magento-2.png\" alt=\"Find Js files Responsible for render blocking in Magento 2\" class=\"wp-image-32045\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Add&nbsp;<strong>defer&nbsp;<\/strong>attribute to the respective script tag in the source file of the webpage. This is generally present in the&nbsp;<strong>app\/design\/frontend\/{Vendor}\/{Theme}\/Magento_Theme\/layout<\/strong>.For example:&lt;script src=\u201dyour_script.js\u201d defer&gt;&lt;\/script&gt;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The above will defer the parsing of JavaScript and eliminate the render-blocking issue in Magento 2. You\u2019ll require to do this for all the JavaScript resources blocking the render of the web page to fix the issue.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can be exhausting when you are fixing the issue on a large scale. Furthermore, manually putting the&nbsp;<strong>defer&nbsp;<\/strong>variable is prone to errors. Our free&nbsp;<a href=\"https:\/\/meetanshi.com\/magento-2-defer-parsing-javascript.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Defer Parsing of JavaScript<\/a>&nbsp;extension does this tedious work for you. The extension defers Js parsing site-wide and can be configured to exclude specific pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-take\">Final Take<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Render-blocking resources is a common page speed issue that affects many resource-heavy websites. In the above article, we learned the major techniques to eliminate render-blocking resources in Magento 2. In addition to this, you can also follow other best practices to minimize the render-blocking resources in Magento 2, such as<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Local hosting of custom fonts<\/li>\n\n\n\n<li>Removing unused resources<\/li>\n\n\n\n<li>Load conditional CSS with media attributes<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! I hope this article has added value to your Magento knowledge. In case you still have any doubts or queries, feel free to ask.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Render-blocking resources in&nbsp;Magento 2&nbsp;store can significantly affect the loading speed. This can create a poor experience for the end users, which can ultimately affect the&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2787","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2787"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2787\/revisions"}],"predecessor-version":[{"id":3795,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2787\/revisions\/3795"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}