How to manage CSS performance in Magento 2?

magento.stackexchange https://magento.stackexchange.com/questions/303543

  •  08-04-2021
  •  | 
  •  

Question

I have a performance question about css and themes in Mangeto 2.

Is is better for performance write the specific css for some page like homepage in a separated file, and only load that file in homepage?

or it is the same if i put all the css in one place like magento base came.

Was it helpful?

Solution

Yes css separate file is useful when we want our site page Optimization improve. it's gives a fast speed up to load page.

One css file which have common class which are used in every page and other files css for specific page.

So it's best way separate css for particular page because unused css are also load when page load. So Remove this unused css.

Do Same for JavaScript also.

Click here to check unused css

OTHER TIPS

Yes its better idea for speed optimize and only load the required css file particular page

and you can do this by creating separate css files for particular page like home page create new css custom-home.css and only call this css and remove all other css using layout xml

in cms_index_index.xml 

 <head>
        <remove src="css/styles-m.css" />
        <remove src="all-other.css"/>
        <css src="css/custom-home.css"  />
    </head>

do same for other page like for category page use catalog_category_view.xml and for product page use catalog_product_view.xml

Hope this will help you.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top