How to Remove JS and CSS using Layout XML in Magento 2?

Hello Magento Friends,

In this tutorial, we will learn about How to Remove JS and CSS using Layout XML in Magento 2?

Magento default Luma theme has many JS and CSS files. Also, many Javascript and CSS files are added while creating a custom theme. These JS and CSS files affect the store’s performance and increase page load time.

To improve store performance and decrease page load time, you can merge and minify JS/CSS files. Other than that, you can also remove unnecessary JS and CSS files.

Let’s check out How to Remove JS and CSS using Layout XML in Magento 2?

Contents

1 Steps to Remove JS and CSS using Layout XML in Magento 2:
2 Conclusion:

Steps to Remove JS and CSS using Layout XML in Magento 2:

Step 1: Go to your layout file

app\code\Vendor\Extension\view\frontend\layout\your_layout_file.xml

To remove JS and CSS, you need to add <remove> tag in layout XML under the <head> tag.

<?xml version="1.0"?>
 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <remove src="Vendor_Extension::css/custom.css"/>
        <remove src="Vendor_Extension::js/custom.js"/>
    </head>

</page>

Conclusion:

As simple as that! Hence, you can Remove JS and CSS using Layout XML in Magento 2. Share the tutorial with your friends who need to lift their Magento 2 store performance. Also, check out Magento Development services to fulfill your other requirements. Stay updated to learn more about Magento 2.

Happy Coding!

Click to rate this post!

[Total: 193 Average: 5]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏