Core Web Vitals & SpeedFCP

First Contentful Paint

Definition

First Contentful Paint (FCP) measures the time elapsed from page navigation until the browser renders the first piece of DOM content, such as text, images, SVG graphics, or non-white canvas elements.

Why It Matters

FCP provides the user with the earliest confirmation that their request was acknowledged and the page is actively loading. A prolonged blank screen triggers user abandonment, high bounce rates, and reduced organic engagement. FCP accounts for 10% of the aggregate Google Lighthouse performance score.

Google Lighthouse & Web Vitals FCP Thresholds

Criterion / State	Requirement / Target	Status
Good (Fast)	≤ 1.8 seconds	Optimal
Needs Improvement	1.8 s – 3.0 seconds	Needs Work
Poor (Slow)	> 3.0 seconds	Avoid / Fail

Practical Implementation Example

font-display: swap allows the browser to paint text immediately using local system fonts, preventing Flash of Invisible Text (FOIT) from stalling FCP.

src/app/layout.tsx

<!-- Optimize web font loading to prevent invisible text during FCP -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    font-display: swap; /* Immediately renders fallback font while downloading */
    src: url('/fonts/inter.woff2') format('woff2');
  }
</style>

Automated Verification

How to Audit FCP in ScanWise

ScanWise inspects server connection times, critical CSS weight, and font-display properties to eliminate blank white screens and deliver rapid first visual paint.

Audit your FCP critical rendering path in ScanWise

Common FCP Mistakes & How to Fix Them

Common FCP Mistakes & How to Fix Them
Mistake	Why It Hurts	The Fix
Loading non-critical external third-party scripts synchronously in the document <head>.	Every synchronous <script> halts HTML parsing completely until the script downloads and evaluates.	Use defer, async, or Next.js <Script strategy='afterInteractive' /> for all tracking and analytics tags.
Shipping massive monolithic CSS bundles exceeding 200 KB before first paint.	Browsers treat stylesheets as render-blocking by default; parsing huge CSS trees pushes FCP past 3 seconds.	Purge unused CSS, adopt modern utility frameworks (Tailwind CSS v4), and inline critical above-the-fold styles.