In default, Magento style-m.css and style-l.css files are loading desktop and mobile screens.

But for style-l.css, the chrome inspector shows that styles-l.css is 100% unused for mobile. It's affecting speed. So, am trying to remove this file from the homepage.

So how can we remove this style-l.css from mobile without using the Mobile theme?

1 Answer 1


Are you sure it is affecting the speed of the site?

In default Magento, the style-l.css is loading like as shown in the image enter image description here

You can see the style-m.css comes with a media="all" and style-l.css comes with media="screen and (min-width: 768px)". This is an important descrimenation to be noted. Because this makes style-m.css is always a render-blocking asset and style-l.css become render-blocking asset only when the media query satisfies. i.e, it will become a render blocking asset only on screen larger than 768px.

Since style-l.css is asynchronously loading in mobile devices and not render-blocking, it won't be an issue in terms of speed concern. Actually, reducing the size of style-m.css will give much more impact in mobile.

For more reading on this topic, please refer Developers Google's Render Blocking CSS

If you still want to avoid style-l.css loading on mobile devices, then this is possible only through javascript. You need a script like this somewhat.

if (<!mobile_view>) {
   document.write('<link rel="stylesheet" href="path/to/style-l.css" />');
  • For testing purposes I removed style-l.css in XML. After checking the speed it's improved in terms of unused CSS from GooglePageSpeed. So we need to remove it only for the mobile screen. But I am not able to remove it only for mobile. I have tried using javascript. But it's not worked.
    – Emily
    Commented Jul 20, 2021 at 13:58

Your Answer

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

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