First Contentful Paint (FCP): Stop the blank screen that kills trust

Counts for FCP:
✓ Text (even if web font hasn't loaded)
✓ Images (including background images)
✓ SVG elements
✓ Canvas elements
✓ Non-white background colors on elements

Does NOT count:
✗ Iframes
✗ White canvas/SVG (no visible content)
✗ Loading spinners (usually)

// Chrome DevTools Performance tab:
// 1. Open DevTools (F12)
// 2. Go to Performance tab
// 3. Click Record, reload page, stop recording
// 4. Look for "FCP" marker in the timeline
// 5. Screenshot view shows first paint moment

// The filmstrip view shows:
// - Blank frames before FCP
// - First visible content at FCP
// - Progressive content loading

Install the web-vitals library:

npm install web-vitals

Then track FCP:

import {onFCP} from 'web-vitals';

onFCP((metric) => {
  console.log('FCP:', metric.value);

  // Send to analytics
  analytics.track('fcp', {
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    delta: metric.delta,
    navigationType: metric.navigationType
  });
});

// Or use Paint Timing API directly
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', entry.startTime);
    }
  }
});

observer.observe({ type: 'paint', buffered: true });

<!-- Preload the most critical font -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload hero image -->
<link rel="preload" href="/hero.jpg" as="image">

<!-- Preconnect to critical third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Priority hints for important images -->
<img src="/hero.jpg" alt="Hero" fetchpriority="high">

Warning: Don't preload too many resources
- Limit to 2-3 critical resources
- Over-preloading delays everything

// Bad: Heavy parsing/execution blocks FCP
import { createApp } from 'vue';
import router from './router';
import store from './store';
import components from './components'; // 200+ components
import './styles.css';

createApp(App)
  .use(router)
  .use(store)
  .use(components)
  .mount('#app');

// Good: Lazy load non-critical code
import { createApp } from 'vue';

// Minimal initial bundle
const app = createApp(App);

// Load router/store/components after FCP
requestIdleCallback(() => {
  import('./router').then(({ default: router }) => {
    app.use(router);
  });

  import('./store').then(({ default: store }) => {
    app.use(store);
  });
});

app.mount('#app');

Result:
- Initial bundle: 200KB -> 50KB
- Parse time: 400ms -> 80ms
- FCP improvement: 300-500ms

// Next.js: Server-side render for instant FCP
export async function getServerSideProps() {
  const data = await fetchCriticalData();
  return { props: { data } };
}

export default function Page({ data }) {
  return (
    <div>
      {/* This HTML is sent from server, renders immediately */}
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

// Client-side rendering (CSR):
// 1. Load HTML (100ms)
// 2. Load JS (300ms)
// 3. Execute JS (200ms)
// 4. Fetch data (150ms)
// 5. Render (50ms)
// = 800ms to FCP

// Server-side rendering (SSR):
// 1. Server renders HTML (150ms)
// 2. Send HTML (50ms)
// 3. Browser renders (50ms)
// = 250ms to FCP

// React 18: Stream HTML as it renders
import { renderToPipeableStream } from 'react-dom/server';

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    onShellReady() {
      // Send initial HTML immediately
      res.setHeader('Content-Type', 'text/html');
      pipe(res);
      // Browser starts rendering before full page loads
    }
  });
});

// Benefits:
// - FCP happens instantly (shell renders first)
// - Content streams in progressively
// - Users see something in 50-100ms

<!-- Early hints (HTTP 103) for instant resource loading -->
Link: </critical.css>; rel=preload; as=style
Link: </hero.jpg>; rel=preload; as=image

<!-- Implemented in Cloudflare Workers / Fastly -->
export default {
  async fetch(request) {
    return new Response(html, {
      status: 200,
      headers: {
        'Link': '</critical.css>; rel=preload; as=style'
      }
    });
  }
}

// Browser receives hints before HTML, starts loading immediately
// Can save 100-300ms on critical resources

<!-- Show skeleton/placeholder immediately -->
<div class="page">
  <div class="skeleton-header"></div>
  <div class="skeleton-content"></div>
</div>

<style>
  /* Inline skeleton styles for instant FCP */
  .skeleton-header {
    width: 100%;
    height: 60px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    animation: loading 1.5s infinite;
  }

  @keyframes loading {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
  }
</style>

<!-- Load actual content via JS -->
<script defer src="/app.js"></script>

Result:
- FCP: 200ms (skeleton renders)
- Meaningful paint: 800ms (content loaded)
- User sees progress immediately

<!-- Bad: Third-party scripts block FCP -->
<script src="https://www.googletagmanager.com/gtag/js"></script>
<script src="https://connect.facebook.net/en_US/sdk.js"></script>

<!-- Good: Defer all third-party scripts -->
<script src="https://www.googletagmanager.com/gtag/js" async></script>
<script src="https://connect.facebook.net/en_US/sdk.js" defer></script>

<!-- Better: Lazy load after FCP -->
<script>
  // Wait for page to be interactive
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      loadAnalytics();
      loadChatWidget();
    });
  } else {
    setTimeout(() => {
      loadAnalytics();
      loadChatWidget();
    }, 2000);
  }
</script>

import {onFCP} from 'web-vitals';

onFCP((metric) => {
  analytics.track('fcp', {
    value: metric.value,
    rating: metric.rating,
    page_path: location.pathname,
    navigation_type: metric.navigationType,
    connection_type: navigator.connection?.effectiveType,
    device_memory: navigator.deviceMemory,

    // Breakdown: Time to first byte
    ttfb: getTTFB(),

    // Detect render-blocking resources
    blocking_resources: getBlockingResources()
  });
});

function getBlockingResources() {
  const resources = performance.getEntriesByType('resource');
  return resources
    .filter(r => r.renderBlockingStatus === 'blocking')
    .map(r => ({ url: r.name, duration: r.duration }));
}