What is Render-blocking resource?

Identifying them

Any stylesheet link in the head without a media attribute that excludes the current context, and any script tag without async or defer that appears before the content. Lighthouse lists them with an estimated saving, which is a good starting point rather than a verdict.

The fixes, in order of return

1. Remove what is not needed. The fastest resource is the one not requested
2. Defer scripts that do not affect the first paint
3. Split CSS so only what the first screen needs blocks
4. Self-host fonts and preload the one the heading uses
5. Only then consider inlining, which trades caching for first-paint speed

The trade-off worth stating

Inlining a stylesheet removes a request and helps the first visit. It also removes cross-page caching, so every subsequent page re-downloads the same bytes. On a content site with many pages per session, that is often a bad trade.

Where this is covered in depth

A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.

Who wrote this

Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.