search

alistapart / AListApart

The A List Apart front end repo
http://alistapart.com/
MIT License
671 stars 68 forks source link

Inlining CSS to improve first render time #175

Open justmarkup opened 9 years ago

justmarkup commented 9 years ago

I am currently running some tests to measure the impact of inlining CSS and as one example I took alistapart.com.

I copied the source code and made two versions which I hosted temporarily on my site to test on webpagetest.org

1) The original source code 2) The original source code with all the CSS inlined

Although the CSS is ~100kb the tests show that it still makes sense to inline it. It would be even better to find the critical CSS and inline it and load the other CSS async but if this is no option inlining all the CSS is still better in every browser I tested (Firefox, Chrome, Chrome mobile, Safari, IE8, IE11) than loading it via link.

I am not really familiar with ExpressEngine but it seems it is possible to inline CSS with Minimee, see http://johndwells.github.io/Minimee/#exampleEmbedInline

murtaugh commented 8 years ago

Michael!

We're so sorry, we let your issue slip through the cracks and never thanked you for the info. We're at the very early stages of planning for a full re-factoring of the site's front end, after which we'll be looking into inlining our critical CSS. (If we can get our CSS down even further below 100k, maybe it'd be worth inlining the whole thing, if I read you right?)

justmarkup commented 8 years ago

Hi Tim,

according to Paul Irish inlining CSS will "always" be a win when the CSS is < ~=50k see:

https://twitter.com/paul_irish/status/556523201946087424

As I assume you have a lot of reccuring visitors and with Service Worker now available in Chrome (Firefox soon, IE hopefully as well in the near future) it may also make sense to inline CSS only fort first visit (save a cookie) and save CSS from sw cache for the following visits.

This is an assumption but I think this may work great for AListPart.

As I am really interested to find the best way to load CSS nowadays I am happy to help you testing, trying different approaches - let me know if I can help.