I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.
TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/
async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).
Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:
- A) Use an ordinary
linkelement to reference the stylesheet, and place it at the end of the HTML document, after all the content. (This is what Google recommends here https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent )
headof the page, by appending a
linkelement to page dynamically. (To ensure it's async, I'm setting the
link's media to a non-applicable media query, then toggling it back after the request goes out).
B would initiate the request sooner, since
A would be dependent on the size of the content in the document - parsing it in entireity before kicking off the request.
In this case, sooner would be ideal to reduce impact on our page load process, since there could be minor reflows that are triggered by the styles in the non-critical CSS file (ideally, the critical CSS would have all reflow-triggering styles in it, but that so far, that's been hard to pull off across the breakpoints of a responsive design, and given that the initial inlined CSS should be kept very small to fit into the first round trip from the server).
I made some test pages, and they do seem to confirm that B will load the CSS sooner (
B requests the css file after around
A usually requests it around
130-200ms). It's consistently about twice as fast.
- Demo A (static
linkat end of page): http://scottjehl.com/test/loadingcss/fromhtml.html
- Demo B (dynamically loaded
B comes with the additional benefits of qualifying the request based on whatever conditions we care to test too, which is nice.
- Update noted here: https://gist.github.com/scottjehl/87176715419617ae6994#comment-1243423
- Another note: @adactio helpfully pointed out that the approach would be a bit better if the non-critical CSS still loaded for non-JS environments. Wrapping a
linkto that file in a
noscripttag and placing it at the end of the page would be a nice way to address that.
- Update: loadCSS has its own home now! https://github.com/filamentgroup/loadCSS/
@thienedits I don't think that's really a drawback. If something is sitting in a separate file or if it's injected into the document, your styling with behave the same way. Your browser will cache an injected stylesheet too. In fact, this is a common way of dealing with SVG files. You can keep your SVG cachable, and inject it's contents directly into your HTML during page load. This gives the advantage of caching but allows allows you to leverage every aspect of SVG's, such as dynamically changing SVG element styles, etc, which you cannot do when simply referencing an external SVG file.