You open a supplier's site and, for a second, you only see the browser's blank canvas—no logo, no menu, no headline. That first empty moment shapes whether visitors wait or leave. FCP (First Contentful Paint) measures when the first meaningful pixel appears—text, an image, or an icon. In 2026 it remains a key signal for business websites, especially on mobile and in paid campaigns where fractions of a second matter.
This article explains what FCP captures, practical benchmarks, how it relates to TTFB, LCP, CLS, and INP, and which changes usually bring the first visual impression forward without dropping brand design.
What FCP measures
FCP is the moment the browser paints the first visible DOM content: a headline, logo, hero paragraph, or header image. It excludes bare document background and off-screen content not yet rendered.
- It starts when the user requests the URL (after redirects).
- It ends when visible text, image, SVG, or canvas appears.
- It is not interactivity (INP) or the largest element (LCP).
- It depends on HTML, critical CSS, fonts, and TTFB—no HTML, no first paint.
web.dev on FCP lists which elements count as content and how the metric fits Lighthouse timing.
Benchmarks in 2026
- Good: 1.8 s or less.
- Needs improvement: 1.8–3.0 s.
- Poor: above 3.0 s.
In CrUX, compare homepage, product pages, and contact forms separately. Acceptable desktop FCP can be poor on 4G if the hero is heavy or fonts block text.
FCP vs TTFB, LCP, CLS, and INP
Core Web Vitals chain together. High TTFB delays HTML and pushes FCP back. Slow FCP often foreshadows weak LCP when the hero block is heavy. CLS can worsen if you rush first paint without reserving space for images or fonts.
Prioritize FCP when users see a blank screen, when the menu or headline lags behind the browser spinner, or when ad traffic bounces on mobile despite later acceptable LCP.
Common causes on business sites
- Render-blocking CSS and JavaScript in the head.
- Web fonts without a strategy hiding hero text.
- Unoptimized above-the-fold images even when LCP is another element.
- Late HTML from slow backends or synchronous APIs in templates.
- Too many critical-path resources before first paint.
- Redirect chains adding latency before any content.
Modern formats like WebP and AVIF help LCP; FCP improves mainly by shrinking what the browser needs before the first visible layer.
How to measure FCP
- PageSpeed Insights / Lighthouse: First Contentful Paint in the performance report.
- Chrome DevTools → Performance: FCP on the timeline.
- Search Console → Page experience: speed trends by URL.
- WebPageTest: filmstrip showing the first content frame.
Test with mobile throttling and cold cache on the HTML URL. Repeat on blog templates and the homepage—they often share headers but not the same hero weight.
Actions that usually improve FCP
Critical CSS and resource order
Inline or prioritize CSS for the header, headline, and hero background. Defer styles for lower modules. Apply the same discipline as CSS and JS minification: fewer bytes on the critical path, not only total page weight.
Fonts and visible text
Use font-display: swap or subsets that cover the hero. Avoid hiding all text until the full family loads. If the logo is web text, ensure system fallback paints immediately.
Server and document cache
Cut TTFB with page cache on public routes and tuned queries. HTML arriving 400 ms earlier usually shifts FCP by nearly the same amount. Add a CDN close to users.
Above-the-fold images
Compress logo and hero, set width/height, and avoid lazy loading on what users see first. Use preload for only one or two truly critical assets.
Third-party scripts
Do not load chat, maps, or analytics tags before first paint. Follow third-party script guidance: defer anything not required to show the header and main message.
Mistakes that keep FCP high
- Optimizing only the hero video when CSS or fonts delay the headline.
- Full-screen spinners that delay perception of real content.
- Preloading half a dozen files «just in case», saturating the initial connection.
- Ignoring HTTP→HTTPS→www redirects that eat time before HTML.
Checklist before you ship a fix
- Did FCP improve in Lighthouse with mobile throttling on the HTML URL?
- Does WebPageTest's filmstrip show text or logo earlier?
- Did LCP and CLS on the same pages stay stable?
- Is branding still consistent after inlining critical CSS?
Conclusion
FCP answers a simple question: «When does the visitor see that the site has actually started loading?» On a business website, moving that moment forward cuts bounce, builds trust, and sets up good LCP and INP. Measure on your highest-converting URLs, fix the critical path for the first screen, and validate alongside your other performance metrics.
If you want a prioritized speed and Core Web Vitals plan scoped to your stack, AATSOFT audits templates, origin, and critical resources and proposes changes with measurable conversion impact.
