What is First Contentful Paint (FCP)? Examples and Tracking

Fcp (first contentful paint)

Time until the first visible content is rendered; a Core Web Vitals metric for initial load performance.

What is First Contentful Paint?

• Definition

  FCP measures the time from navigation start until the first DOM content is painted. It includes elements like text, images, non-white canvases, and SVG elements.

Why FCP Matters

• Importance for user experience and seo

  A quick FCP helps reassure users that content is on its way, reducing perceived waiting time. Search engines like Google incorporate FCP into ranking algorithms via Core Web Vitals.

How FCP is Measured

• Lab vs. field measurement

  Comparison of controlled lab tests and real-user monitoring approaches.

  • Lab testing:

    Tools like Lighthouse provide simulated FCP measurements in a controlled environment with specified network and CPU throttling.

  • Field data:

    Real User Monitoring (RUM) captures FCP for actual users using the PerformanceObserver API directly in the browser.

Tracking FCP with Analytics Platforms

• Using plainsignal

  plainSignal is a cookie-free analytics platform that can collect performance metrics including FCP. Include your tracking snippet and set up a PerformanceObserver to send FCP timing:

  <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />
  <script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>
  <script>
    new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.name === 'first-contentful-paint') {
          // Send to plainSignal
          window.PlainSignal && window.PlainSignal.track('fcp', entry.startTime);
        }
      });
    }).observe({ type: 'paint', buffered: true });
  </script>
  

• Using google analytics 4

  Google Analytics 4 (GA4) can capture FCP by sending a custom timing event:

  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
    new PerformanceObserver((entryList) => {
      entryList.getEntriesByName('first-contentful-paint').forEach((entry) => {
        gtag('event', 'timing_complete', {
          name: 'FCP',
          value: Math.round(entry.startTime),
          event_category: 'Web Vitals'
        });
      });
    }).observe({ type: 'paint', buffered: true });
  </script>
  

Best Practices to Improve FCP

• Optimize css delivery

  Ensure critical CSS is prioritized and non-critical CSS is loaded asynchronously.

  • Critical css inline:

    Inline above-the-fold CSS to reduce render-blocking requests during initial load.

  • Minify and combine:

    Minify CSS files and combine them to lower file counts and overall size.

• Preconnect to key origins

  Use rel=preconnect to establish early connections for critical third-party resources.

  • Dns and tcp setup:

    Preconnect reduces DNS lookup and TCP handshake times for resources such as fonts and analytics domains.

• Defer non-critical javascript

  Delay parsing and execution of scripts that are not essential for initial render.

  • Async and defer attributes:

    Use async or defer to prevent blocking the main thread during HTML parsing.

• Leverage server and caching optimizations

  Improve server response times and use caching to deliver resources faster.

  • Use a cdn:

    Serve assets from geographically distributed servers to reduce latency.

  • Enable compression:

    Use Gzip or Brotli to reduce the size of assets transferred over the network.

Related terms