I've heard that to avoid render-blocking issues, it's good to inline critical CSS directly in the <HEAD> tag by including the actual CSS in <STYLE> tags, and then load the rest of the CSS asynchronously.

At the other hand, I read it's bad to inline too much CSS.

Is there some limit for critical CSS after which it becomes a negative performance impact?

up vote 8 down vote accepted

As of 2011, you will see the first drop in page performance after 14.6 KB has been sent. For the speediest page, all of your HTML code from the first byte up to and including the critical CSS should fit within this amount of data.

14.6 KB is the size of an HTTP server's initial TCP congestion window assuming a default TCP IW value of 10 (which was agreed on for major web browsers in RFC 6928). This 14.6KB payload represents how much data the server can send to the client before hearing acknowledgement that the data was received (aka before waiting for the first network round-trip).

If you think of the HTTP connection as a series of boat expeditions from the server to the client, 14.6 KB is when the first explorer's ship is full, and the rest of the HTML has to sit around and wait for the cargo ships.

Illustration of boats on TCP

So if the beginning of your HTML - up until the end of your critical inlined CSS - is less than 14.6 KB, that is optimal. Due to the way TCP congestion control works (doubling the amount of data sent as each burst is acknowledged), you can send 98 KB (14 KB + 28 KB + 56 KB) within 3 round-trips - so Google recommends that all above-the-fold content should be renderable with the first 98 KB of the document for mobile page speed reasons.

In short, 14.6 KB is the upper limit for critical inlined resources to fit within the first RTT. To fit within three RTTs and Google's recommendation, the cutoff is 98 KB.

  • Also, it would make sense to me that the 14.6 KB figure would be after gzipping, since the compression protocol is negotiated from the get-go in the Accept-Encoding request header sent with the initial HTTP request. – Maximillian Laumeister Oct 10 at 18:33
  • Amazing answer ;) – Emirodgar Oct 11 at 7:10
  • @MaximillianLaumeister btw, does HTTP/2 without inlining anything completely eliminate the render-blocking issue or just reduce it? – stckvrw Oct 25 at 11:31
  • @stckvrw On the contrary, single page performance-wise that's the same or worse than inlining (still better than 1.1 though). If you want more detailed responses I encourage you to ask a new question! – Maximillian Laumeister Oct 25 at 15:12
  • @MaximillianLaumeister one more question: if critical CSS enqueues a font with @font-face{src:url(...)}, is it the first round trip? – stckvrw Dec 7 at 17:16

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.