Magento2 - Google Pagespeed Insight : any idea why it takes account of desktop css?

Question

My question might not be magento specific, but I'm curious, as I couldn't find the answer elsewhere (or failed to find the correct terms).

When I use Google Pagespeed Insight on a magento 2 website with a template based on the basic one (or Luma), it says :

Remove unused CSS

…css/styles-l.min.css

But the code for the link to this CSS is :

<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="https://www.magento2-website.com/static/versionxxxx/frontend/Template/base/fr_FR/css/styles-l.min.css" />

So it's supposed to be only use if width is more than 768px.

Any idea why Pagespeed thinks it have to be taken account ?

Thanks !

Edit : add Insight to be more specifis. The problem is not with mod_pagespeed, but with the fact that Pagespeed Insight takes account of a file that it shouldn't

Answer 1

The browser downloads all CSS resources, regardless of the media attribute. Check your network tab on your site and you'll notice even on mobile devices it downloads styles-l.css.

The media attribute allows the user agent to pick the best adapted one for the device it runs on, in other words it will de-prioritise styles-l.css which helps prevent it from blocking the rendering of the DOM but it will still be downloaded.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes and https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css are good resources on this.