Learning material for professionals eager to explore the science behind building a successful online product

The single most effective technique I employ to fix a slow First Paint

Recently I shared the most effective technique I end up relying on, when fixing a slow First Paint. It is not mind blowing, it is not novel, and it is certainly not complicated. Still, that’s what I spend most of my time doing, so I decided to expand a little bit more. What I am talking about is deferring blocking resources, such as CSS, as much as possible.

Boom. Feeling mind blown? I don’t expect you to. But let’s see why it matters so much, in the pre-HTTP2 era.

CSS is a render blocking resource, meaning that the browser won’t render any content until the CSSOM is constructed.

That’s it. It doesn’t get any simpler. Whenever you

a file, or @import some CSS (but you never would, would you?), you are asking your users to wait on two events before they can see ANY content:

  • The CSS needs to be requested and downloaded
  • The CSS needs to be processed and “computed”

Among the two, the first event is the real bottleneck today. Every HTTP request adds delay and, even if you rely on HTTP2 for distributing your assets, downloading those bytes may still be a time consuming process for those users navigating on slow networks.

While this holds true for every blocking resource (