How can I remove styles-l.css loading for mobile only without mobile theme?

Question

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?

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

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.

<script>
if (<!mobile_view>) {
   document.write('<link rel="stylesheet" href="path/to/style-l.css" />');
}
</script>