This is real interesting. What about caching?
That's my wonder too - I always thought part of the reason for putting the CSS in an external file was to cache it, so that on subsequent page loads or internal pages you would be able to render those much quicker because it's in the browser cache already. Initial load might be a tiny bit longer, but it pays off over the entire experience of the page.
A single page site might benefit more from this than a larger site, I would think.
Caching would definitely work, there are so many different methods that one can choose from - it's important to use the one that serves your site best.
Same curiosity here—a follow-up post employing a few caching strategies would be interesting for comparison purposes.
I'm working on that already...
Glad to hear it!
On a large site that goes through fairly regular UI tweaks and flux over the course of its lifespan, how does one employ this tactic from a practical perspective? Beyond caching benefits, external CSS files make updating styles fairly straight forward.
Likely could be implemented as a part of the build process. I've been experimenting with some of our internal apps and that's how I've gone about it.
I think you would have to look at your CSS and if you have one, your style guide. If there certain that are static and consistent - this would be considered your core CSS - you could employ this tactic. I'm looking at doing a comparison to caching and seeing how that fairs. On a slightly different note - there are a number of methods one can use to improve performance - it's just important to make you choose a suitable one.
You probably shouldn't even attempt this unless you already have an asset pipeline in place. (All of our products use Rails, so we use their built-in asset pipeline.)
That being said, once the asset pipeline in place, rendering the CSS to the page instead of linking to an external resource should be trivial. I might try this on Designer News and see how it performs.
Seems like it could be a prime use case. Whichever way you land on the experiment, it'd be interesting to read about!
In comparison, the next diagram below, I’ve minified the CSS and placed it into the head of the html page.
That doesn’t seem like a fair comparison. Minified and external vs minified and in the head would be fairer.
Having said that, I agree with the article. I think doing as much work once on the server side, so the client can download and render faster makes a lot of sense.
Nice. I shall try this with my small projects. With all the talk of page loads being more than 1MB and the wonderful article "Words" by Justin Jackson, this technique is worth considering.
It's important to note that this technique doesn't actually decrease the size of your page — you're just moving the CSS from an external file to the document.
In practice, it's actually likely that this will increase the amount of data that will be transferred over the network, since you don't have the benefit of caching the external CSS file. However, it may be worth the tradeoff, depending on how important the first load experience is, how many different stylesheets they have, how often they change, etc.
This Grunt task might help: https://github.com/dayvson/grunt-static-inline