Reduce Unused CSS In Magento 2

Having unused CSS can really slow down your applications and just makes your web page longer, which also makes it take longer to load. Therefore, it is important to keep your excess code to a minimum.

1. Identification

Tools like GT Metrix,lighthouse, Page speed insights.

2. Example

  • Find css files that are not in use like for the page or for the whole pages.
  • if your css is unused for Home page Remove from
Path: app/design/frontend/vendor/theme/Magento_Theme/layout
file: cms_index_index.xml
if your css is unused for all pages Remove from:
Examples like the Print.css file added into every page of magento2. It is used for removing some header and footer blocks from the Print page.
Path: app/design/frontend/vendor/Magento_theme/layout
File: default_head_blocks.xml
if your css is unused for Product page Remove from:
Path: app/design/frontend/vendor/theme/Magento_catalog/layout
file: catalog_product_view.xml
if your css is unused for listing page Remove from:
Path: app/design/frontend/vendor/theme/Magento_catalog/layout
file: catalog_category_view.xml