FCP > 1.8s high
First Contentful Paint (FCP) too slow
More than 1.8 seconds pass before any text or image paints, so users stare at a blank screen on load.
What you see
First Contentful Paint 3.4 s FCP marks the time at which the first text or image is painted.
What’s actually happening
The page stays white well past the point where it should show something. Lighthouse scores FCP red (>3s) or orange (1.8-3s); field data in Search Console's Core Web Vitals or CrUX confirms real users see the same. Because Largest Contentful Paint is gated behind FCP, a slow FCP usually drags LCP down with it.
Common causes
- High TTFB: slow origin, no CDN, cold serverless functions, or uncached database-backed HTML, so the browser can't even start parsing for hundreds of ms.
- Render-blocking CSS and synchronous `<script>` in the `<head>` — the browser won't paint until they're fetched, parsed, and executed.
- Web fonts loaded without `font-display: swap`, hiding text during the font fetch (FOIT).
- Large JS bundles that the main thread must parse and execute before the initial render, common with client-side-rendered SPAs that ship an empty `<div id="root">`.
- No resource hints: critical CSS, fonts, or the LCP image aren't preloaded, so they're discovered late in the request chain.
How to fix it
- Cut TTFB firstMeasure server response with `curl -w "%{time_starttransfer}\n" -o /dev/null -s https://example.com`. Put a CDN in front, cache HTML at the edge where possible, and warm or right-size serverless instances. A 600ms TTFB is 600ms FCP can never get back.
- Inline critical CSS, defer the restExtract the above-the-fold CSS and inline it in `<head>`; load the full stylesheet with `<link rel="preload" as="style" onload="this.rel='stylesheet'">`. Add `defer` (or `type="module"`) to scripts so HTML parsing isn't blocked.
- Fix font loadingAdd `font-display: swap` to every `@font-face`, `<link rel="preload" as="font" crossorigin>` the one or two fonts used above the fold, and self-host instead of round-tripping to a third-party font host.
- Ship HTML, not just JSFor SPAs, server-render or pre-render the first view so the markup paints before hydration. Code-split so the initial bundle carries only what the first screen needs, and lazy-load the rest.
- Preload the critical pathAdd `<link rel="preconnect">` to required third-party origins and `preload` the LCP image and critical fonts. Re-run Lighthouse and check the network waterfall to confirm those requests now start early.
Stop it recurring
Set a Lighthouse-CI budget (FCP < 1.8s) on pull requests so a heavy dependency or a dropped `defer` gets caught before merge.
Related errors