search

SassNinja / postcss-extract-media-query

PostCSS plugin to extract all media query from CSS and emit as separate files.
MIT License
130 stars 20 forks source link

README file suggests this approach has a bigger performance impact than it actually does #27

Open philwolstenholme opened 4 years ago

philwolstenholme commented 4 years ago

In the README file we say:

It would be much better if a mobile user doesn't need to load desktop specific CSS, wouldn't it?

But the media attribute of a stylesheet doesn't actually prevent it from downloading on non-matching media queries:

https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513/

Instead, what happens is the CSS file is given a lower download priority.

It would be good if the README was updated to provide a more accurate description of the performance benefits that the approach of media query splitting actually gives.

SassNinja commented 4 years ago

Hi @philwolstenholme

I agree the wording might be misunderstood – any idea how that text should look?

Instead, what happens is the CSS file is given a lower download priority.

Furthermore the browser doesn't apply that styles so there's a performance gain (though not comparable with not loading the actual file)

I've mentioned "dynamic import" as a notice this plugin doesn't take care of this but you have to do it yourself.

philwolstenholme commented 4 years ago

@SassNinja I've raised a PR with some suggested changes to the README that might be useful to people who are interested in this plugin but don't fully understand what the performance benefits would be :) Feel free to make any changes!