How to Remove JS and CSS in Magento 2 Using Layout XML
Is your Magento 2 store having low efficiency and high loading time? Do you want to have speed optimization of Magento 2 store? While managing a successful E-commerce store, the store owners have to deal with a lot of problems. One such problem is higher page load time.
While creating a store, you may add custom CSS and JS in Magento 2 for attractive layouts and better features. On the other hand, you end up calling numbers of requests and increasing page loading speed. After the page speed analysis, you require to remove JS and CSS in Magento 2 which no longer useful and can improve the page load time. You can also enable merge CSS, javascript in Magento 2 for better performance.
Also, sometimes the confliction between the theme and module may require you to remove JS and CSS from a page.
Today, I’ve come up with the solution to remove JS and CSS in Magento 2 using layout XML which can lead to improved load time of the store.
Programmatic Solution to Remove JS and CSS in Magento 2 Using Layout XML
Create cms_index_index.xml at app/design/frontend/[Namespace]/[theme]/Magento_Theme/layout directory and make use of <remove> tag under the <head> tag to remove JavaScript and CSS.
|
1 2 3 4 5 6 7 8 9 |
<?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="js/custom.js"/> <remove src="css/custom.css"/> </head> </page> |
That’s what you need to do to remove JS and CSS in Magento 2 using layout XML.
Any doubts? Feel free to ask in the Comment section below.
I would be happy to answer.
Do not forget to share the post with Magento Community via social media.
Thank you.
Related Post:
4 Comments
I tried it. but it is not working. any ideas?
Hello Peyman,
It’s working properly from our end.
Please check whether you’ve set it on the proper theme and check the folder structure too.
Thank You
Hey Hi
I tried it worked but can you tell if I want to remove css js form specific page only.
Hello Atul,
You need to create a layout file for which you want to remove and then place the code in that layout file.
Thank You.