Critical CSS

Critical CSS is the minimal set of style rules needed to render the visible upper part of a page, loaded inline so the page appears styled immediately while the remaining stylesheet loads afterwards without blocking the first render.

In practice

Critical CSS is a targeted technique for improving First Contentful Paint – and, where the LCP element is a block of text, the LCP value as well. The usual trigger is a weak FCP combined with the Lighthouse recommendation to eliminate render-blocking resources. It brings additional complexity into the build process and is not necessary for every project; it is worth using above all on pages with a lot of content visible above the fold.

Matching service

Sources

← Back to the glossary