{"id":1118,"date":"2020-07-15T17:48:07","date_gmt":"2020-07-15T17:48:07","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/07\/15\/enable-merge-css-javascript-in-magento-2\/"},"modified":"2025-05-22T12:33:20","modified_gmt":"2025-05-22T07:03:20","slug":"enable-merge-css-javascript-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/enable-merge-css-javascript-in-magento-2\/","title":{"rendered":"How to Enable Merge CSS, Javascript in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The online stores that can keep up with offering the best user experience can only stand the competition in today\u2019s market.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, store performance is all about the user experience. There\u2019s no denying to the fact that&nbsp;<a href=\"https:\/\/developer.chrome.com\/blog\/search-ads-speed\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google<\/a>&nbsp;considers the website loading speed as one of the ranking factors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These statistics from&nbsp;<a href=\"https:\/\/webtribunal.net\/blog\/how-speed-affects-website#gref\" target=\"_blank\" rel=\"noreferrer noopener\">Hosting Tribunal<\/a>&nbsp;says it all:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1-second delay<strong>&nbsp;reduces page views by 11%.<\/strong><\/li>\n\n\n\n<li>1-second delay&nbsp;<strong>decreases customer satisfaction by 16%.<\/strong><\/li>\n\n\n\n<li>1-second delay eats away&nbsp;<strong>7% of the coveted conversion rate.<\/strong><\/li>\n\n\n\n<li>1-3 seconds in loading time see a&nbsp;<strong>very low bounce rate probability \u2013 only 32%.<\/strong><\/li>\n\n\n\n<li>Add 1 second more to that and the&nbsp;<strong>chance for users to bounce triples, reaching 90%.<\/strong><\/li>\n\n\n\n<li>On an annual basis,<strong>&nbsp;the 1-second delay can lead to $2.5 million<\/strong>&nbsp;in missed revenue if your shop generates $100,000 per day.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we know how precious just a second can be when it comes to website loading speed, one should not take any chance to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/speed-up-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">speed up Magento 2 store<\/a>&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And one of the ways to do so is to&nbsp;<em><strong>enable merge CSS, javascript in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unmerged CSS and javascript are one of the reasons for the low efficiency and high loading time of Magento 2 store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Merging refers to the process of eliminating unnecessary or redundant data like line breaks without affecting how the browser processes the resource. It forbids the modification of the file after merging CSS and js.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The reduced number of requests to the server due to merge CSS and javascript will result in improved load time of the store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And fortunately, our favourite CMS offers default feature to enable merge javascript, CSS from the admin panel!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Enable Merge CSS, Javascript in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. <strong>Login<\/strong>&nbsp;to admin panel<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Go to&nbsp;<strong>Stores &gt; Settings &gt; Configuration<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. From the left panel, expand the&nbsp;<strong>Advanced&nbsp;<\/strong>tab and select the&nbsp;<strong>Developer&nbsp;<\/strong>option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Enable Merge CSS in Magento 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand CSS Settings<\/li>\n\n\n\n<li>Set \u201cYes\u201d in the Merge CSS Files dropdown.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/07\/Enable-Merge-CSS-in-Magento-2.png\" alt=\"Enable Merge CSS in Magento 2\" class=\"wp-image-9658\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">5. Enable Javascript in Magento 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expand the&nbsp;<strong>JavaScript Settings<\/strong>&nbsp;section<\/li>\n\n\n\n<li>Set the \u201cyes\u201d option in the&nbsp;<strong>Merge JavaScript Files<\/strong>&nbsp;dropdown.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">6. <strong>Save<\/strong>&nbsp;configuration<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it. Also if you made a CSS change into the files of your theme and if you are not able to see those changes in pub\/static folder then&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/regenerate-css-file-in-pub-static-folder-in-magento-2\/\">regenerate CSS file in pub\/static folder in Magento 2<\/a>&nbsp;and get a solution to your error.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also refer to the video tutorial to Enable Merge CSS, Javascript in Magento 2 from our&nbsp;<a href=\"https:\/\/www.youtube.com\/playlist?list=PLBTOxSAJzwEjM5MilmEqj98Ib80tKBu7r\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 video tutorial<\/a>&nbsp;series:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Enable Merge CSS, Javascript in Magento 2\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/OSkSGZ5OKUI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also check the 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 that automates defer parsing of Javascript for Magento 2 to speed up the store\u2019s page load time and improve the user experience<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, I\u2019d be grateful if you could share the post with fellow Magento developers via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The online stores that can keep up with offering the best user experience can only stand the competition in today\u2019s market. Now, store performance is&#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-1118","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1118","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=1118"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1118\/revisions"}],"predecessor-version":[{"id":14790,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1118\/revisions\/14790"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}