CSS-Download-Tests

CSS-Download-Tests copied to clipboard

Found this via @dgieselaar's https://medium.com/zoover-engineering/optimizing-css-by-removing-unused-media-queries-80b5508c6de9.

One thing to point out is that non-matching media query links are simply downloaded with lowest priority and thus should not interfere with mission-critical resources (last column):

@tomayac is there any reason why the browser will still download those sheets if it can tell that they are not important?

@tomayac is there any reason why the browser will still download those sheets if it can tell that they are not important?

@dgieselaar Well, the user could always decide to resize their window (width, height, aspect ratio), to print the document, etc., and even things that at first sight seem static (like the resolution) can change when a user with a multi-screen setup moves a window from say a Retina laptop screen to a bigger desktop monitor, or the user can unplug their mouse, and so on…

Truly static things that can't change (a TV device can't suddenly turn into something else) are actually being deprecated in Media Queries Level 4 (see the yellow note box); and the recommendation is to rather target media features instead (see the text under the red issue box).

Even invalid values still need to be considered, according to the ignore rules in the spec.

So long story short, browsers try to be as smart as possible by applying priorities, and Lowest is a reasonable value for the cases in @scottjehl's test.

Thanks! Very insightful.

On Thu, Nov 8, 2018, 17:17 Thomas Steiner [email protected] wrote:

@tomayac https://github.com/tomayac is there any reason why the browser will still download those sheets if it can tell that they are not important?

@dgieselaar https://github.com/dgieselaar Well, the user could always decide to resize their window (width https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width, height https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height, aspect ratio https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio), to print https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types the document, etc., and even things that at first sight seem static (like the resolution https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution) can change when a user with a multi-screen setup moves a window from say a Retina laptop screen to a bigger desktop monitor, or the user can unplug their mouse https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer, and so on…

Truly static things that can't change (a TV device can't suddenly turn into something else) are actually being deprecated in Media Queries Level 4 (see the yellow note box https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types); and the recommendation is to rather target media features https://drafts.csswg.org/mediaqueries/#media-feature instead (see the text under the red issue box https://drafts.csswg.org/mediaqueries/#media-types).

Even invalid values still need to be considered, according to the ignore rules https://www.w3.org/TR/CSS2/conform.html#ignore in the spec.

So long story short, browsers try to be as smart as possible by applying priorities, and Lowest is a reasonable value for the cases in @scottjehl https://github.com/scottjehl's test http://scottjehl.github.io/CSS-Download-Tests/.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/scottjehl/CSS-Download-Tests/issues/11#issuecomment-437055672, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVh3PnP-FegpkhYeITaRLwozvPUtPpcks5utFktgaJpZM4YTTwA .

I figured maybe more people might find my answer useful and have turned it into a blog post.

They are still counted as render blocking, right? I was thinking of putting a NOSCRIPT tag around our print.css, and using JavaScript on page load (async) to add the print stylesheet in, so at least it wouldn't be render blocking for normal JavaScript enabled browsers.

They are still counted as render blocking, right?

@ozcoder Actually no, check the frames below. At simulated Slow 3G (to more easily see the effect), the page renders at ~4.5s, when the two first stylesheets have finished loading:

The render-blocking ones are bootstrap.css and only-all.css, that is, the ones loaded with Highest priority. Everything else is loaded with Lowest priority and not render-blocking.