Comparison
Critical CSSvsRender-blocking resource
Critical CSS
the styles for the first screen are inlined in the head and the rest of the stylesheet loads afterwards.
Extracting the rules needed to render the initial viewport and inlining them, so first paint does not wait on a stylesheet request. It reliably improves first contentful paint on a slow connection. It is also fragile: the extraction has to be regenerated with every change, the inlined bytes are not cacheable, and getting the set wrong produces a flash of unstyled content instead.
Full entry →Render-blocking resource
the page stayed blank until a stylesheet in the head finished downloading from a third-party domain.
A resource the browser will not paint without: any stylesheet in the document, and any synchronous script, which also blocks HTML parsing. Each one adds its full download time to first paint, and a chain of them adds up serially. The audit is short — count what is in the head, and for each one decide whether it is needed for the first screen or can be deferred.
Full entry →