Retour au blog
Design et développement web

Core Web Vitals 2026 : optimisation pour Next.js et React

Par Josep Purroy
27 janvier 2026
18 min de lecture
Image de l'article: core web vitals 2026 nextjs react

Core Web Vitals 2026 : optimisation pour Next.js et React

Les Core Web Vitals ont considérablement évolué depuis leur introduction en 2020. En 2026, avec la consolidation de l'INP (Interaction to Next Paint) comme métrique officielle et les capacités avancées de Next.js 15, optimiser la performance web nécessite une approche entièrement renouvelée. Ce guide technique vous montre exactement comment maîtriser chaque métrique en utilisant les outils les plus modernes de l'écosystème React.

Google a confirmé que les sites qui dépassent les seuils des Core Web Vitals ont un taux de rebond réduit de 24 % et de meilleures positions dans les résultats de recherche. Pour les projets développés avec React et Next.js, les opportunités d'optimisation sont énormes, mais les défis techniques le sont tout autant.

Qu'est-ce que les Core Web Vitals en 2026 et pourquoi sont-ils importants ?

Les Core Web Vitals sont un ensemble de métriques centrées sur l'utilisateur qui mesurent l'expérience réelle de chargement, d'interactivité et de stabilité visuelle d'une page web. En 2026, les trois métriques fondamentales sont :

  • LCP (Largest Contentful Paint) : Temps jusqu'à ce que l'élément le plus grand du viewport soit visible
  • INP (Interaction to Next Paint) : Latence de toutes les interactions utilisateur
  • CLS (Cumulative Layout Shift) : Stabilité visuelle pendant toute la session

Contrairement à des métriques synthétiques comme le Time to First Byte ou le Speed Index, les Core Web Vitals reflètent l'expérience perçue par des utilisateurs réels naviguant dans des conditions réelles de réseau et de dispositif.

Seuils mis à jour pour 2026

Le changement le plus significatif a été le remplacement du FID (First Input Delay) par l'INP en mars 2024. Alors que le FID ne mesurait que la première interaction, l'INP évalue la latence de toutes les interactions pendant la session, offrant une vision beaucoup plus réaliste de l'interactivité.

Comment fonctionne le LCP et comment l'optimiser dans Next.js 15 ?

Le LCP mesure le temps nécessaire pour rendre l'élément de contenu le plus grand visible dans le viewport. Typiquement, cet élément est une image hero, un bloc de texte proéminent ou une affiche vidéo.

Éléments qualifiés pour le LCP

  • Éléments (y compris à l'intérieur de )
  • Images de fond chargées via url() en CSS
  • Éléments avec poster
  • Éléments de texte (

    ,

    , etc.) avec contenu significatif

  • Éléments avec images de fond inline

Techniques d'optimisation LCP dans Next.js 15

1. Utilisation correcte du composant Image

Next.js 15 inclut un composant Image optimisé qui implémente un lazy loading intelligent, mais pour l'élément LCP, nous avons besoin du comportement opposé :

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

export default function HomePage() {
  return (
    <main>
      <section className="hero">
        {/* Image LCP : priority + fetchPriority */}
        <Image
          src="/hero-banner.webp"
          alt="Description du hero"
          width={1920}
          height={1080}
          priority // Désactive le lazy loading
          fetchPriority="high" // Indication au navigateur
          sizes="100vw"
          quality={85}
        />
      </section>
      
      {/* Autres images : lazy loading par défaut */}
      <Image
        src="/secondary-image.webp"
        alt="Image secondaire"
        width={800}
        height={600}
        loading="lazy"
      />
    </main>
  );
}

2. Preload des ressources critiques

Dans le App Router de Next.js 15, vous pouvez gérer les preloads directement dans le layout :

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

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

// Ou en utilisant le head
export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <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 et Suspense pour LCP

Une technique avancée consiste à utiliser Suspense pour prioriser le contenu LCP :

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

export default function Page() {
  return (
    <>
      {/* Contenu LCP rendu immédiatement */}
      <HeroBanner />
      
      {/* Contenu secondaire en streaming */}
      <Suspense fallback={<ContentSkeleton />}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

Qu'est-ce que l'INP et pourquoi a-t-il remplacé le FID ?

L'INP (Interaction to Next Paint) mesure la latence entre une interaction utilisateur et le frame visuel suivant mis à jour. Contrairement au FID, qui ne considérait que la première interaction, l'INP évalue toutes les interactions et rapporte une valeur proche du pire cas.

Anatomie d'une interaction

Chaque interaction a trois phases :

  1. Input delay : Temps entre l'événement et le début du handler
  2. Processing time : Temps d'exécution des event handlers
  3. Presentation delay : Temps jusqu'à ce que le navigateur rende le frame
[Click] → [Input Delay] → [Processing] → [Presentation] → [Visual Update]
         └─────────────── INP Total ───────────────────┘

Interactions comptées par l'INP

  • Clics de souris
  • Taps sur écrans tactiles
  • Pressions de touches (physiques ou clavier à l'écran)

Non compté : Survol, défilement ou zoom (considérés comme des interactions continues).

Optimisation de l'INP dans React et Next.js

1. Éviter les blocages du main thread

Le problème le plus courant de l'INP dans React est les rendus synchrones étendus :

// ❌ MAUVAIS : Re-render coûteux bloque les interactions
function ProductList({ products }) {
  const [filter, setFilter] = useState('');
  
  // Filtrage synchrone à chaque rendu
  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} />)}
    </>
  );
}

// ✅ BIEN : useDeferredValue pour prioriser l'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 pour les mises à jour non urgentes

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. Virtualisation pour les longues listes

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>
  );
}

Comment prévenir le CLS dans les applications React modernes ?

Le CLS (Cumulative Layout Shift) mesure les changements inattendus dans le layout pendant toute la durée de vie de la page. Un CLS élevé frustre les utilisateurs qui tentent d'interagir avec des éléments qui se déplacent.

Causes courantes du CLS

  1. Images sans dimensions : Le navigateur ne réserve pas d'espace jusqu'à ce qu'il télécharge l'image
  2. Annonces et embeds dynamiques : Contenu injecté qui déplace le layout
  3. Polices web (FOIT/FOUT) : Changements de taille lors du chargement des polices
  4. Contenu inséré dynamiquement : Bannières, notifications, modales

Solutions spécifiques pour Next.js 15

1. Aspect ratio pour les médias

// Composant d'image avec aspect ratio garanti
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 avec dimensions fixes

// 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>
  );
}

// Utilisation avec Suspense
import { Suspense } from 'react';

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

3. Optimisation des polices dans Next.js 15

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

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Évite FOIT
  variable: '--font-inter',
  preload: true,
  fallback: ['system-ui', 'sans-serif'],
  adjustFontFallback: true, // Ajuste les métriques du fallback
});

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

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

4. Réserver de l'espace pour le contenu dynamique

// Composant de bannière avec hauteur réservée
function PromoBanner() {
  const [isVisible, setIsVisible] = useState(true);
  
  if (!isVisible) {
    // Maintenir l'espace ou s'effondrer doucement
    return null;
  }
  
  return (
    <div 
      className="promo-banner"
      style={{ 
        minHeight: '60px', // Hauteur réservée
        containIntrinsicSize: '0 60px', // optimisation content-visibility
      }}
    >
      <p>Offre spéciale ! 20% de réduction</p>
      <button onClick={() => setIsVisible(false)}>×</button>
    </div>
  );
}

Comment les React Server Components impactent-ils les Core Web Vitals ?

Les React Server Components (RSC), entièrement intégrés dans le App Router de Next.js 15, transforment fondamentalement la façon dont nous optimisons les Core Web Vitals. En s'exécutant exclusivement sur le serveur, ils réduisent drastiquement le JavaScript envoyé au client.

Avantages des RSC pour chaque métrique

LCP : Rendu instantané

// app/products/[id]/page.tsx
// Ce composant est un Server Component par défaut

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

export default async function ProductPage({ params }) {
  // Fetch sur le serveur - sans cascade sur le client
  const product = await getProduct(params.id);
  
  return (
    <article>
      {/* HTML complet envoyé dans la réponse initiale */}
      <ProductImage 
        src={product.image} 
        alt={product.name}
        priority 
      />
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      {/* Seul ce composant nécessite du JavaScript */}
      <AddToCartButton productId={product.id} />
    </article>
  );
}

INP : Moins de JavaScript = moins de blocages

// Comparaison de bundles

// ❌ Approche traditionnelle (Client Component complet)
// Bundle : ~150KB de 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 en cascade sur le client
  }, [productId]);
  
  // Tout le code de formatage est envoyé au client
}

// ✅ Approche RSC hybride
// Bundle : ~15KB de JavaScript (seule l'interactivité)

// Server Component - 0KB au client
async function ProductPage({ params }) {
  const [product, reviews] = await Promise.all([
    getProduct(params.id),
    getReviews(params.id),
  ]);
  
  // Formatage exécuté sur le serveur
  const formattedPrice = formatPrice(product.price);
  const discount = calculateDiscount(product);
  
  return (
    <article>
      <h1>{product.name}</h1>
      <p className="price">{formattedPrice}</p>
      
      {/* Seuls les composants interactifs sont des Client Components */}
      <InteractiveGallery images={product.images} />
      <AddToCartButton product={product} />
      
      {/* Reviews rendues sur le serveur */}
      <ReviewList reviews={reviews} />
    </article>
  );
}

Modèle de composition optimal

// 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 - rendu instantané */}
      <DashboardHeader />
      
      {/* Server Component avec données - streaming */}
      <Suspense fallback={<StatsCardsSkeleton />}>
        <StatsCards />
      </Suspense>
      
      {/* Client Component - chargement différé */}
      <Suspense fallback={<ChartSkeleton />}>
        <InteractiveChart />
      </Suspense>
      
      {/* Server Component - streaming parallèle */}
      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}

Quelles outils utiliser pour mesurer les Core Web Vitals ?

La mesure précise nécessite de combiner des données de laboratoire (synthétiques) avec des données de terrain (utilisateurs réels).

Outils de laboratoire

Lighthouse dans Next.js

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

# Configuration : lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000/', 'http://localhost:3000/productos'],
      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',
    },
  },
};

# Exécuter dans CI/CD
lhci autorun

Chrome DevTools Performance

  1. Ouvrir DevTools → Performance
  2. Activer "Web Vitals" dans le panneau
  3. Activer "CPU throttling: 4x slowdown"
  4. Activer "Network: Slow 3G"
  5. Enregistrer une session utilisateur

Outils de terrain (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,
  });
  
  // Utiliser sendBeacon pour ne pas bloquer unload
  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 et CrUX

Le Chrome User Experience Report (CrUX) fournit des données réelles de millions d'utilisateurs Chrome. Accédez via :

  • Search Console : Rapport Core Web Vitals par URL/groupe
  • PageSpeed Insights : Données CrUX + diagnostic Lighthouse
  • CrUX Dashboard : Visualisations dans Data Studio
  • BigQuery : Requêtes SQL sur le dataset public
-- Requête CrUX dans BigQuery
SELECT
  origin,
  p75_lcp,
  p75_inp,
  p75_cls
FROM
  `chrome-ux-report.materialized.metrics_summary`
WHERE
  origin = 'https://votredomaine.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>
  );
}

Quels sont les benchmarks des Core Web Vitals par type de site ?

Les seuils universels de Google ne racontent pas toute l'histoire. Différents types de sites ont des défis uniques et des attentes distinctes.

E-commerce

Défis spécifiques :

  • Carrousels de produits (CLS)
  • Filtres dynamiques (INP)
  • Images de haute qualité (LCP)

SaaS / Dashboards

Défis spécifiques :

  • Graphiques interactifs complexes (INP)
  • Mises à jour en temps réel (CLS)
  • Tableaux avec beaucoup de données (INP, LCP)

Blogs / Sites de contenu

Défis spécifiques :

  • Grandes images hero (LCP)
  • Annonces et embeds (CLS)
  • Lazy loading de contenu (CLS)

Pages de destination

Défis spécifiques :

  • Animations d'entrée (CLS)
  • Vidéos autoplay (LCP)
  • CTAs interactifs (INP)

Comment mettre en place un pipeline de surveillance continue ?

L'optimisation des Core Web Vitals n'est pas un effort unique. Elle nécessite une surveillance continue et des alertes précoces.

GitHub Actions pour 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')
            );
            // Générer commentaire avec métriques

Dashboard de surveillance personnalisé

Pour les projets d'entreprise, notre équipe de développement Node.js implémente des dashboards de surveillance avec :

  • Alertes Slack/Email lorsque les métriques se dégradent
  • Comparaisons historiques par version
  • Segmentation par type de page et dispositif
  • Corrélation avec les métriques business

Conclusion : la performance comme avantage compétitif

Optimiser les Core Web Vitals en 2026 nécessite de comprendre profondément les métriques, de maîtriser les outils de React et Next.js, et de maintenir un processus de surveillance continue. Les sites qui investissent dans la performance voient des améliorations tangibles en SEO, conversions et satisfaction utilisateur.

Les techniques couvertes dans cet article, des React Server Components à la virtualisation et l'optimisation INP, représentent l'état de l'art en développement web performant. Les implémenter correctement nécessite une expertise en architecture frontend et une compréhension du comportement réel des utilisateurs.

Votre site Next.js a besoin d'optimisation des Core Web Vitals ? Chez KIWOP, nous sommes spécialistes en développement React et optimisation de performance. Contactez notre équipe pour un audit gratuit de votre site.

Questions fréquentes sur les Core Web Vitals

Quelle est la différence entre INP et FID ?

Le FID (First Input Delay) ne mesurait que la latence de la première interaction de l'utilisateur avec la page. L'INP (Interaction to Next Paint) évalue toutes les interactions pendant toute la session et rapporte une valeur représentative du pire cas (percentile 75). Cela signifie que l'INP est une métrique beaucoup plus exigeante et réaliste de l'interactivité perçue.

Les Core Web Vitals affectent-ils directement le classement sur Google ?

Oui, les Core Web Vitals sont un facteur de classement confirmé depuis 2021. Cependant, Google a clarifié que le contenu pertinent et de qualité reste plus important. Les Core Web Vitals agissent comme "départage" entre des pages avec un contenu similaire, et comme barrière d'entrée pour des positions premium.

Comment les React Server Components affectent-ils le LCP ?

Les React Server Components améliorent significativement le LCP car le HTML est généré complètement sur le serveur et envoyé dans la réponse initiale. Il n'y a pas de cascade JavaScript → fetch → render sur le client. Le contenu LCP est présent dès le premier octet de HTML.

Quel est un bon score d'INP pour un e-commerce ?

Pour un e-commerce compétitif, nous recommandons un INP inférieur à 150ms (le seuil "bon" de Google est 200ms). Les meilleurs performeurs atteignent moins de 100ms. Les zones critiques sont les filtres de produits, les carrousels et les processus de checkout.

Le CLS est-il mesuré pendant toute la session ou seulement lors du chargement initial ?

Le CLS est mesuré pendant toute la durée de vie de la page, mais Google utilise des "fenêtres de session" pour le calcul final. Une fenêtre de session est un groupe de décalages avec moins de 1 seconde entre eux et un maximum de 5 secondes de durée. Le CLS rapporté est le maximum de toutes les fenêtres de session.

Next.js 15 a-t-il des optimisations automatiques pour les Core Web Vitals ?

Oui. Next.js 15 inclut : optimisation automatique des images (WebP/AVIF, lazy loading, dimensions), optimisation des polices (preload, font-display), prefetching intelligent des routes, et React Server Components par défaut qui réduisent le JavaScript envoyé au client.

Comment puis-je mesurer les Core Web Vitals des utilisateurs réels, pas seulement Lighthouse ?

Utilisez la bibliothèque web-vitals de Google pour capturer des métriques RUM (Real User Monitoring). Combinez-la avec votre stack d'analytics existant ou des services comme Vercel Analytics, Datadog RUM, ou New Relic Browser. Les données de CrUX dans Search Console montrent également des métriques d'utilisateurs Chrome réels.

Vaut-il la peine d'optimiser pour le percentile 75 ou dois-je viser le 95 ?

Google utilise le percentile 75 (p75) pour ses seuils, ce qui signifie que 75% de vos utilisateurs doivent expérimenter de bonnes valeurs. Cependant, pour les sites premium, optimiser pour p90 ou p95 garantit une expérience cohérente même pour les utilisateurs dans des conditions défavorables (connexions lentes, dispositifs anciens).

Audit
technique initial.

IA, sécurité et performance. Diagnostic avec proposition par phases.

NDA disponible
Réponse <24h
Proposition par phases

Votre premier rendez-vous est avec un Architecte Solutions, pas un commercial.

Demander un diagnostic