0

I read up on the use of less files by Magento. I checked the size of the two files inside the pub/static folder and I noticed that the style-m.css file is twice the size of style-l.css.

Why? I simply activated the blank theme and yet the css file for mobile is double the size of style-l.css

How can I reduce the weight of style-m.css? Can I disable, for example, from compiling "media-common"?

Thanks for any help

Improve this question

2 Answers 2

Reset to default
2

To reduce the weight of style-m.css, you can try several things:

Minify the CSS: You can use a CSS minifier tool to reduce the size of the CSS file by removing unnecessary whitespace, comments, and other non-essential characters.

Use a CSS preprocessor: Magento supports Sass and Less preprocessors, which can help you organize your CSS and reduce its size. You can use variables, mixins, and functions to avoid duplication and improve readability.

Disable unnecessary CSS: If you don't need certain CSS styles for mobile devices, you can try to disable them by modifying the app/design/frontend///Magento_Theme/layout/default_head_blocks.xml file. Look for the section and comment out the line or any other unnecessary CSS files.

Improve this answer
3
  • Man, I have already tried to do these operations but the result was not very nice. My question is why is style-m twice as large as style-l? Maybe because it loads so many resolutions of the various mobile devices?
    – Jackom
    Mar 26 at 16:13
  • The style-m.css file is usually larger than the style-l.css file because it contains styles for mobile devices, which require more specific styles due to the smaller screen sizes and the need for responsive design. Mobile devices often require more CSS rules and media queries to adapt to different screen sizes and orientations, which can increase the file size of the CSS file.
    – HuanTH
    Mar 27 at 1:46
  • @huanth styles-m.css is larger than styles-l.css because styles-m.css contains CSS rules for both mobile and desktop while styles-l.css contains only CSS rules for desktop.
    – Tu Van
    Mar 28 at 15:02
1

Styles-m.css is larger than styles-l.css because styles-m.css contains CSS rules for use on both mobile and desktop while styles-l.css contains only CSS rules for desktop.

When LESS compiling into CSS, the code @media-common, .media-width will be merged and converted to CSS media queries, finally only a few media queries in styles-m.css, styles-l.css. You can open styles-m.css and styles-l.css to check it.

So you just leave it as is, it's already optimized, not the same CSS rule as you know.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.