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

Dhiren Vasoya

2 years ago

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?

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!