New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test page ignores priorities #11

Open
tomayac opened this Issue Nov 7, 2018 · 6 comments

Comments

Projects
None yet
3 participants
@tomayac

tomayac commented Nov 7, 2018

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):

screenshot 2018-11-07 at 22 04 30

@dgieselaar

This comment has been minimized.

dgieselaar commented Nov 8, 2018

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

@tomayac

This comment has been minimized.

tomayac commented Nov 8, 2018

@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.

@dgieselaar

This comment has been minimized.

dgieselaar commented Nov 8, 2018

@tomayac

This comment has been minimized.

tomayac commented Nov 8, 2018

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

@ozcoder

This comment has been minimized.

ozcoder commented Nov 13, 2018

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.

@tomayac

This comment has been minimized.

tomayac commented Nov 16, 2018

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:

screenshot 2018-11-16 at 13 41 28

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment