- Non-screen stylesheets (ex, print) are not an issue: they do not block rendering or DCL events (ex)
- Media queries which evaluate to false do not block rendering or DCL event (ex)
- Alternate stylesheets do not block rendering or DCL events (ex)
- Script injected stylesheets should follow same behavior: if media query is false then NonBlocking; blocking otherwise
There is currently no way to have a element in the Document and have the browser conditionally load it (the download always happens). The only way around this is to inject the link element via JS on the client. It is also not clear that the browser should skip the download: if you have two stylesheets for portrait and landscape and we only load portrait, then rotating the device would result in a slow resource fetch and a poor user experience. That is, unless we assume that this is something the designer would have to take into account and set their breakpoints + file boundaries such that they avoid these jarring experiences. (IMHO, this seems reasonable).
Ex: make sure mobile.css contains all the necessary breakpoints, but if a user docks his mobile phone to a larger screen/projector, then we can trigger the downloads, since that's a significant step-change in the nature of the device (and is likely to cause window manager changes as well).
If above scenario is valid, then the browser could (in theory) be extended to have preloader+parser lazy-load the resources for media query breakpoints. Otherwise, the browser behavior is good as is, and we would have to rely on client-side code to manage this process and conditionally + dynamically inject stylesheets into the document. Which works, but is unlikely to be a popular pattern, since it places the burden on the developer to make it work, and also hides all of the resource information from the parser and preloader, which is a poor long-term plan as it doesn't allow us to introduce further optimizations.
- complex media queries are implicitly assumed to target "screen" (not actually evaluated)
- non screen media types do not block the parser or DCL events, ex: http://jsbin.com/3/omulof/6/quiet
- Loading of non-blocking stylesheets is deferred until after DCL event: http://jsbin.com/3/omulof/7/quiet
- Seems like we can improve this case. If pre-loader reached EOF, and the parser is blocked, we could schedule the pending downloads to accelerate onload?
- Extend the logic in preloader to evaluate (at least some) of the complex media queries and disable download?
- Evaluating media queries in preloader requires a lot of work. Alternative: remove pending downloads in parser after eval.
With regards to delivering content within the first 14kb, have you ever thought about using something like phantom to grab the above the fold content as a screenshot and displaying that as an image and then deferring all resources?
You could blur the image and then remove it once the CSS and any content dependent JS has loaded.