First Contentful Paint
The time from navigation start until the browser renders the first piece of DOM content; a diagnostic metric rather than a Core Web Vital.
TechnicalCritical rendering path
Render-blocking resources
Stylesheets and synchronous scripts in the head that must be downloaded and processed before the browser can paint anything.
In full
CSS is render-blocking by default and synchronous `<script>` tags block parsing as well. The remedies are inlining critical CSS, loading the rest with media queries or asynchronously, adding `defer` or `async` to scripts, and moving non-essential third parties out of the head. Reducing blocking directly improves FCP and, on text-led pages, LCP.
Example
A 240 KB stylesheet in the head delays first paint by 600 ms on 4G; inlining 8 KB of above-the-fold CSS removes the delay.
Related terms
Largest Contentful Paint
A Core Web Vital measuring the render time of the largest image, video poster or text block visible in the viewport; good is 2.5 s or less…
Third-party scripts
Externally hosted JavaScript such as analytics, tag managers, consent tools, chat widgets and ad code, which are a leading cause of poor…
Preload
A resource hint that tells the browser to fetch a critical resource for the current page at high priority, before the parser would…
Lighthouse
An open-source automated auditing tool in Chrome DevTools and PageSpeed Insights that runs lab tests for performance, accessibility, best…