Terug naar blog
Webdesign en ontwikkeling

Core Web Vitals 2026: optimalisatie voor Next.js en React

Door Josep Purroy
27 januari 2026
18 min leestijd
Uitgelichte afbeelding: core web vitals 2026 nextjs react

Core Web Vitals 2026: optimalisatie voor Next.js en React

De Core Web Vitals zijn aanzienlijk geëvolueerd sinds hun introductie in 2020. In 2026, met de consolidatie van INP (Interaction to Next Paint) als officiële metriek en de geavanceerde mogelijkheden van Next.js 15, vereist het optimaliseren van webprestaties een geheel nieuwe aanpak. Deze technische gids laat u precies zien hoe u elke metriek kunt beheersen met behulp van de modernste tools in het React-ecosysteem.

Google heeft bevestigd dat sites die de drempels van Core Web Vitals overschrijden een 24% lagere bounce rate hebben en betere posities in de zoekresultaten. Voor projecten ontwikkeld met React en Next.js zijn de optimalisatiemogelijkheden enorm, maar ook de technische uitdagingen.

Wat zijn de Core Web Vitals in 2026 en waarom zijn ze belangrijk?

De Core Web Vitals zijn een set gebruikersgerichte metrieken die de daadwerkelijke ervaring van laden, interactiviteit en visuele stabiliteit van een webpagina meten. In 2026 zijn de drie fundamentele metrieken:

  • LCP (Largest Contentful Paint): Tijd totdat het grootste element in het viewport zichtbaar is
  • INP (Interaction to Next Paint): Latentie van alle gebruikersinteracties
  • CLS (Cumulative Layout Shift): Visuele stabiliteit gedurende de hele sessie

In tegenstelling tot synthetische metrieken zoals Time to First Byte of Speed Index, weerspiegelen de Core Web Vitals de ervaring zoals die door echte gebruikers wordt waargenomen onder echte netwerk- en apparaatcondities.

Bijgewerkte drempels voor 2026

De meest significante verandering was de vervanging van FID (First Input Delay) door INP in maart 2024. Terwijl FID alleen de eerste interactie mat, evalueert INP de latentie van alle interacties tijdens de sessie, wat een veel realistischer beeld van de interactiviteit biedt.

Hoe werkt LCP en hoe optimaliseer je het in Next.js 15?

LCP meet de tijd die nodig is om het grootste zichtbare inhoudselement in het viewport te renderen. Typisch is dit element een hero-afbeelding, een prominente tekstblok of een videoposter.

Elementen die in aanmerking komen voor LCP

  • elementen (inclusief binnen )
  • Achtergrondafbeeldingen geladen via url() in CSS
  • elementen met poster
  • Tekstelementen (

    ,

    , etc.) met betekenisvolle inhoud

  • Elementen met inline achtergrondafbeeldingen

LCP optimalisatietechnieken in Next.js 15

1. Correct gebruik van de Image-component

Next.js 15 bevat een geoptimaliseerde Image-component die slimme lazy loading implementeert, maar voor het LCP-element hebben we het tegenovergestelde gedrag nodig:

// app/page.tsx
import Image from 'next/image';

export default function HomePage() {
  return (
    <main>
      <section className="hero">
        {/* LCP-afbeelding: priority + fetchPriority */}
        <Image
          src="/hero-banner.webp"
          alt="Beschrijving van de hero"
          width={1920}
          height={1080}
          priority // Deactiveert lazy loading
          fetchPriority="high" // Hint aan de browser
          sizes="100vw"
          quality={85}
        />
      </section>
      
      {/* Overige afbeeldingen: lazy loading standaard */}
      <Image
        src="/secondary-image.webp"
        alt="Secundaire afbeelding"
        width={800}
        height={600}
        loading="lazy"
      />
    </main>
  );
}

2. Preload van kritieke resources

In de App Router van Next.js 15 kunt u preloads direct in de layout beheren:

// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Mijn Website',
  other: {
    'link': [
      {
        rel: 'preload',
        href: '/fonts/inter-var.woff2',
        as: 'font',
        type: 'font/woff2',
        crossOrigin: 'anonymous',
      },
    ],
  },
};

// Of gebruikmakend van de head
export default function RootLayout({ children }) {
  return (
    <html lang="nl">
      <head>
        <link
          rel="preload"
          href="/hero-banner.webp"
          as="image"
          fetchPriority="high"
        />
        <link
          rel="preconnect"
          href="https://fonts.googleapis.com"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

3. Streaming en Suspense voor LCP

Een geavanceerde techniek is het gebruik van Suspense om de LCP-inhoud te prioriteren:

// app/page.tsx
import { Suspense } from 'react';
import HeroBanner from '@/components/HeroBanner';
import DynamicContent from '@/components/DynamicContent';

export default function Page() {
  return (
    <>
      {/* LCP-inhoud rendert onmiddellijk */}
      <HeroBanner />
      
      {/* Secundaire inhoud in streaming */}
      <Suspense fallback={<ContentSkeleton />}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

Wat is INP en waarom verving het FID?

INP (Interaction to Next Paint) meet de latentie tussen een gebruikersinteractie en het volgende visueel bijgewerkte frame. In tegenstelling tot FID, dat alleen de eerste interactie beschouwde, evalueert INP alle interacties en rapporteert een waarde die dicht bij het slechtste geval ligt.

Anatomie van een interactie

Elke interactie heeft drie fasen:

  1. Input delay: Tijd vanaf het evenement tot de handler begint
  2. Processing time: Tijd voor het uitvoeren van de event handlers
  3. Presentation delay: Tijd totdat de browser het frame rendert
[Klik] → [Input Delay] → [Processing] → [Presentation] → [Visual Update]
         └─────────────── INP Totaal ───────────────────┘

Interacties die INP meetelt

  • Muisklikken
  • Taps op touchscreens
  • Toetsaanslagen (zowel fysiek als op schermtoetsenbord)

Niet meegerekend: Hover, scroll of zoom (beschouwd als continue interacties).

INP optimalisatie in React en Next.js

1. Vermijd blokkades van de main thread

Het meest voorkomende probleem van INP in React zijn uitgebreide synchrone renders:

// ❌ FOUT: Kostbare her-render blokkeert interacties
function ProductList({ products }) {
  const [filter, setFilter] = useState('');
  
  // Synchroon filteren bij elke render
  const filtered = products.filter(p => 
    p.name.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <>
      <input 
        value={filter} 
        onChange={e => setFilter(e.target.value)} 
      />
      {filtered.map(p => <ProductCard key={p.id} product={p} />)}
    </>
  );
}

// ✅ GOED: useDeferredValue voor prioriteit input
import { useDeferredValue, useMemo } from 'react';

function ProductList({ products }) {
  const [filter, setFilter] = useState('');
  const deferredFilter = useDeferredValue(filter);
  
  const filtered = useMemo(() => 
    products.filter(p => 
      p.name.toLowerCase().includes(deferredFilter.toLowerCase())
    ),
    [products, deferredFilter]
  );
  
  const isStale = filter !== deferredFilter;
  
  return (
    <>
      <input 
        value={filter} 
        onChange={e => setFilter(e.target.value)} 
      />
      <div style={{ opacity: isStale ? 0.7 : 1 }}>
        {filtered.map(p => <ProductCard key={p.id} product={p} />)}
      </div>
    </>
  );
}

2. useTransition voor niet-dringende updates

import { useState, useTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();
  
  function handleTabChange(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  
  return (
    <div>
      <nav>
        {['home', 'products', 'about'].map(t => (
          <button
            key={t}
            onClick={() => handleTabChange(t)}
            className={tab === t ? 'active' : ''}
          >
            {t}
          </button>
        ))}
      </nav>
      
      <div style={{ opacity: isPending ? 0.8 : 1 }}>
        <TabContent tab={tab} />
      </div>
    </div>
  );
}

3. Virtualisatie voor lange lijsten

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualizedList({ items }) {
  const parentRef = useRef(null);
  
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 80,
    overscan: 5,
  });
  
  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              transform: `translateY(${virtualItem.start}px)`,
              height: `${virtualItem.size}px`,
            }}
          >
            <ItemCard item={items[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

Hoe voorkom je CLS in moderne React-applicaties?

CLS (Cumulative Layout Shift) meet de onverwachte veranderingen in de layout gedurende de hele levensduur van de pagina. Een hoge CLS frustreert gebruikers die proberen te interacteren met elementen die verschuiven.

Veelvoorkomende oorzaken van CLS

  1. Afbeeldingen zonder dimensies: De browser reserveert geen ruimte totdat de afbeelding is gedownload
  2. Advertenties en dynamische embeds: Ingevoegde inhoud die de layout verschuift
  3. Webfonts (FOIT/FOUT): Grootteveranderingen bij het laden van fonts
  4. Dynamisch ingevoegde inhoud: Banners, meldingen, modals

Specifieke oplossingen voor Next.js 15

1. Aspect ratio voor media

// Afbeeldingscomponent met gegarandeerde aspect ratio
function ResponsiveImage({ src, alt, aspectRatio = '16/9' }) {
  return (
    <div style={{ aspectRatio, position: 'relative' }}>
      <Image
        src={src}
        alt={alt}
        fill
        style={{ objectFit: 'cover' }}
        sizes="(max-width: 768px) 100vw, 50vw"
      />
    </div>
  );
}

2. Skeleton loaders met vaste afmetingen

// components/ProductSkeleton.tsx
export function ProductSkeleton() {
  return (
    <div className="product-card" style={{ height: '320px' }}>
      <div 
        className="skeleton" 
        style={{ height: '200px', background: '#e0e0e0' }} 
      />
      <div 
        className="skeleton" 
        style={{ height: '24px', marginTop: '16px', width: '80%' }} 
      />
      <div 
        className="skeleton" 
        style={{ height: '20px', marginTop: '8px', width: '40%' }} 
      />
    </div>
  );
}

// Gebruik met Suspense
import { Suspense } from 'react';

export default function ProductPage() {
  return (
    <Suspense fallback={<ProductSkeleton />}>
      <ProductDetails />
    </Suspense>
  );
}

3. Optimalisatie van fonts in Next.js 15

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Vermijd FOIT
  variable: '--font-inter',
  preload: true,
  fallback: ['system-ui', 'sans-serif'],
  adjustFontFallback: true, // Past fallback-metrieken aan
});

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-mono',
});

export default function RootLayout({ children }) {
  return (
    <html lang="nl" className={`${inter.variable} ${robotoMono.variable}`}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

4. Ruimte reserveren voor dynamische inhoud

// Bannercomponent met gereserveerde hoogte
function PromoBanner() {
  const [isVisible, setIsVisible] = useState(true);
  
  if (!isVisible) {
    // Ruimte behouden of zachtjes inklappen
    return null;
  }
  
  return (
    <div 
      className="promo-banner"
      style={{ 
        minHeight: '60px', // Gereserveerde hoogte
        containIntrinsicSize: '0 60px', // content-visibility optimalisatie
      }}
    >
      <p>Speciale aanbieding! 20% korting</p>
      <button onClick={() => setIsVisible(false)}>×</button>
    </div>
  );
}

Hoe beïnvloeden de React Server Components de Core Web Vitals?

De React Server Components (RSC), volledig geïntegreerd in Next.js 15 App Router, transformeren fundamenteel hoe we Core Web Vitals optimaliseren. Door uitsluitend op de server te draaien, verminderen ze drastisch de hoeveelheid JavaScript die naar de client wordt gestuurd.

Voordelen van RSC voor elke metriek

LCP: Direct renderen

// app/products/[id]/page.tsx
// Dit component is standaard een Server Component

import { getProduct } from '@/lib/api';
import ProductImage from '@/components/ProductImage';

export default async function ProductPage({ params }) {
  // Fetch op de server - geen waterfall op de client
  const product = await getProduct(params.id);
  
  return (
    <article>
      {/* Volledige HTML verzonden in de initiële respons */}
      <ProductImage 
        src={product.image} 
        alt={product.name}
        priority 
      />
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      {/* Alleen dit component heeft JavaScript nodig */}
      <AddToCartButton productId={product.id} />
    </article>
  );
}

INP: Minder JavaScript = minder blokkades

// Vergelijking van bundles

// ❌ Traditionele aanpak (volledig Client Component)
// Bundle: ~150KB JavaScript
'use client';
import { useState, useEffect } from 'react';
import { formatPrice, calculateDiscount } from '@/lib/utils';
import { fetchReviews } from '@/lib/api';

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);
  const [reviews, setReviews] = useState([]);
  
  useEffect(() => {
    // Fetches in cascade op de client
  }, [productId]);
  
  // Alle formatteringscode wordt naar de client gestuurd
}

// ✅ Hybride RSC-aanpak
// Bundle: ~15KB JavaScript (alleen interactiviteit)

// Server Component - 0KB naar de client
async function ProductPage({ params }) {
  const [product, reviews] = await Promise.all([
    getProduct(params.id),
    getReviews(params.id),
  ]);
  
  // Formatteren uitgevoerd op de server
  const formattedPrice = formatPrice(product.price);
  const discount = calculateDiscount(product);
  
  return (
    <article>
      <h1>{product.name}</h1>
      <p className="price">{formattedPrice}</p>
      
      {/* Alleen interactieve componenten zijn Client Components */}
      <InteractiveGallery images={product.images} />
      <AddToCartButton product={product} />
      
      {/* Reviews gerenderd op de server */}
      <ReviewList reviews={reviews} />
    </article>
  );
}

Optimale compositiepatroon

// app/dashboard/page.tsx
import { Suspense } from 'react';
import DashboardHeader from '@/components/DashboardHeader';
import StatsCards from '@/components/StatsCards';
import RecentActivity from '@/components/RecentActivity';
import InteractiveChart from '@/components/InteractiveChart';

export default function DashboardPage() {
  return (
    <div className="dashboard">
      {/* Server Component - direct renderen */}
      <DashboardHeader />
      
      {/* Server Component met data - streaming */}
      <Suspense fallback={<StatsCardsSkeleton />}>
        <StatsCards />
      </Suspense>
      
      {/* Client Component - vertraagde lading */}
      <Suspense fallback={<ChartSkeleton />}>
        <InteractiveChart />
      </Suspense>
      
      {/* Server Component - parallelle streaming */}
      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}

Welke tools gebruiken om Core Web Vitals te meten?

Nauwkeurige metingen vereisen een combinatie van laboratoriumgegevens (synthetisch) en veldgegevens (echte gebruikers).

Laboratoriumtools

Lighthouse in Next.js

# Installeer Lighthouse CI
npm install -g @lhci/cli

# Configuratie: lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000/', 'http://localhost:3000/producten'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'interactive': ['error', { maxNumericValue: 3800 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

# Run in CI/CD
lhci autorun

Chrome DevTools Performance

  1. Open DevTools → Performance
  2. Activeer "Web Vitals" in het paneel
  3. Schakel "CPU throttling: 4x slowdown" in
  4. Schakel "Network: Slow 3G" in
  5. Neem een gebruikerssessie op

Veldtools (RUM)

web-vitals library

// lib/analytics.ts
import { onLCP, onINP, onCLS, Metric } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });
  
  // Gebruik sendBeacon om unload niet te blokkeren
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/vitals', body);
  } else {
    fetch('/api/vitals', { body, method: 'POST', keepalive: true });
  }
}

export function initWebVitals() {
  onLCP(sendToAnalytics);
  onINP(sendToAnalytics);
  onCLS(sendToAnalytics);
}
// app/layout.tsx
'use client';
import { useEffect } from 'react';
import { initWebVitals } from '@/lib/analytics';

export function WebVitalsReporter() {
  useEffect(() => {
    initWebVitals();
  }, []);
  
  return null;
}

Google Search Console en CrUX

Het Chrome User Experience Report (CrUX) biedt echte gebruikersdata van miljoenen Chrome-gebruikers. Toegang via:

  • Search Console: Core Web Vitals rapport per URL/groep
  • PageSpeed Insights: CrUX data + Lighthouse diagnose
  • CrUX Dashboard: Visualisaties in Data Studio
  • BigQuery: SQL-query's op de openbare dataset
-- CrUX-query in BigQuery
SELECT
  origin,
  p75_lcp,
  p75_inp,
  p75_cls
FROM
  `chrome-ux-report.materialized.metrics_summary`
WHERE
  origin = 'https://uwdomein.com'
  AND yyyymm = 202601

Next.js Analytics (Vercel)

// next.config.js
module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP', 'INP'],
  },
};

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Wat zijn de benchmarks van Core Web Vitals per type site?

De universele drempels van Google vertellen niet het hele verhaal. Verschillende soorten sites hebben unieke uitdagingen en verschillende verwachtingen.

E-commerce

Specifieke uitdagingen:

  • Productcarrousels (CLS)
  • Dynamische filters (INP)
  • Hoogwaardige afbeeldingen (LCP)

SaaS / Dashboards

Specifieke uitdagingen:

  • Complexe interactieve grafieken (INP)
  • Realtime updates (CLS)
  • Tabellen met veel data (INP, LCP)

Blogs / Content sites

Specifieke uitdagingen:

  • Grote hero-afbeeldingen (LCP)
  • Advertenties en embeds (CLS)
  • Lazy loading van inhoud (CLS)

Landing pages

Specifieke uitdagingen:

  • Inkomende animaties (CLS)
  • Autoplay video's (LCP)
  • Interactieve CTA's (INP)

Hoe implementeer je een continu monitoring pipeline?

Het optimaliseren van Core Web Vitals is geen eenmalige inspanning. Het vereist continue monitoring en vroege waarschuwingen.

GitHub Actions voor CI/CD

# .github/workflows/lighthouse.yml
name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: './lighthouserc.js'
          uploadArtifacts: true
          temporaryPublicStorage: true
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      
      - name: Comment PR with results
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const results = JSON.parse(
              fs.readFileSync('.lighthouseci/manifest.json', 'utf8')
            );
            // Genereer commentaar met metrieken

Aangepast monitoring dashboard

Voor enterprise-projecten implementeert ons Node.js ontwikkelteam monitoring dashboards met:

  • Slack/Email alerts bij verslechtering van metrieken
  • Historische vergelijkingen per release
  • Segmentatie per paginatype en apparaat
  • Correlatie met bedrijfsmetriek

Conclusie: Prestaties als concurrentievoordeel

Het optimaliseren van Core Web Vitals in 2026 vereist een diepgaand begrip van de metrieken, beheersing van de tools van React en Next.js, en het onderhouden van een continu monitoringproces. Sites die investeren in prestaties zien tastbare verbeteringen in SEO, conversies en gebruikerssatisfactie.

De technieken die in dit artikel worden behandeld, van React Server Components tot virtualisatie en INP-optimalisatie, vertegenwoordigen de state-of-the-art in performante webontwikkeling. Ze correct implementeren vereist ervaring in frontend-architectuur en begrip van het echte gebruikersgedrag.

Heeft uw Next.js site optimalisatie van Core Web Vitals nodig? Bij KIWOP zijn we specialisten in React-ontwikkeling en prestatieoptimalisatie. Neem contact op met ons team voor een gratis audit van uw site.

Veelgestelde vragen over Core Web Vitals

Wat is het verschil tussen INP en FID?

FID (First Input Delay) mat alleen de latentie van de eerste interactie van de gebruiker met de pagina. INP (Interaction to Next Paint) evalueert alle interacties gedurende de hele sessie en rapporteert een waarde die representatief is voor het slechtste geval (percentiel 75). Dit betekent dat INP een veel veeleisender en realistischer metriek is van de waargenomen interactiviteit.

Beïnvloeden de Core Web Vitals direct de ranking in Google?

Ja, de Core Web Vitals zijn sinds 2021 een bevestigde rankingfactor. Google heeft echter verduidelijkt dat relevante en kwalitatieve inhoud nog steeds belangrijker is. De Core Web Vitals fungeren als "tie-breaker" tussen pagina's met vergelijkbare inhoud en als toegangsdrempel voor premium posities.

Hoe beïnvloeden de React Server Components de LCP?

De React Server Components verbeteren de LCP aanzienlijk omdat de HTML volledig op de server wordt gegenereerd en in de initiële respons wordt verzonden. Er is geen waterfall van JavaScript → fetch → render op de client. De LCP-inhoud is aanwezig vanaf de eerste byte van HTML.

Wat is een goede INP-score voor een e-commerce?

Voor competitieve e-commerce raden we een INP onder de 150ms aan (de "goede" drempel van Google is 200ms). De top performers behalen minder dan 100ms. Kritieke gebieden zijn productfilters, carrousels en checkoutprocessen.

Wordt de CLS gemeten gedurende de hele sessie of alleen bij de initiële lading?

CLS wordt gemeten gedurende de hele levensduur van de pagina, maar Google gebruikt "session windows" voor de uiteindelijke berekening. Een session window is een groep verschuivingen met minder dan 1 seconde ertussen en maximaal 5 seconden duur. De gerapporteerde CLS is het maximum van alle session windows.

Heeft Next.js 15 automatische optimalisaties voor Core Web Vitals?

Ja. Next.js 15 omvat: automatische optimalisatie van afbeeldingen (WebP/AVIF, lazy loading, dimensies), optimalisatie van fonts (preload, font-display), intelligente prefetching van routes, en React Server Components standaard die de hoeveelheid JavaScript naar de client verminderen.

Hoe kan ik Core Web Vitals van echte gebruikers meten, niet alleen Lighthouse?

Gebruik de web-vitals bibliotheek van Google om RUM (Real User Monitoring) metrieken vast te leggen. Combineer het met uw bestaande analytics stack of diensten zoals Vercel Analytics, Datadog RUM, of New Relic Browser. De CrUX data in Search Console toont ook metrieken van echte Chrome-gebruikers.

Is het de moeite waard om te optimaliseren voor het 75e percentiel of moet ik mikken op het 95e?

Google gebruikt het 75e percentiel (p75) voor zijn drempels, wat betekent dat 75% van uw gebruikers goede waarden moet ervaren. Voor premium sites garandeert optimalisatie voor p90 of p95 echter een consistente ervaring, zelfs voor gebruikers onder ongunstige omstandigheden (trage verbindingen, oude apparaten).

Technische
initiële audit.

AI, beveiliging en prestaties. Diagnose met gefaseerd voorstel.

NDA beschikbaar
Antwoord <24u
Gefaseerd voorstel

Je eerste gesprek is met een Solutions Architect, niet met een verkoper.

Diagnose aanvragen