Comparison
Above the foldvsCritical CSS
Above the fold
you optimise only what is visible before any scrolling and let everything below load later.
The part of the page visible in the viewport before the user scrolls, which is what every first-paint metric measures. It is device-dependent and, on a long page, a small fraction of the document, which is what makes deferring the rest so effective. The term is borrowed from newspapers and is imprecise on purpose: the useful version is 'what the browser must have to paint the first screen'.
Full entry →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 →