Core Web Vitals + INP 2026 : optimiser pour la 3G africaine (Lagos, Dakar, Abidjan)

Google a remplacé FID (First Input Delay) par INP (Interaction to Next Paint) en mars 2024. Sur PC fibre, INP < 200 ms est trivial. Sur 3G + Android low-end (Itel, Tecno, Infinix populaires en Afrique de l'Ouest), c'est le défi #1 de la performance web 2026.

TL;DR

- Core Web Vitals 2026 : LCP < 2,5 s, INP < 200 ms, CLS < 0,1.

- Sur 3G africaine + Itel A57 : sites non optimisés font INP 600-1200 ms.

- 5 leviers : code-splitting agressif, hydration partielle, transitions sans JS, debounce inputs, web workers pour les calculs.

Le contexte africain

Conditions terrain mai 2026 :

• 35-50 % de visiteurs en 3G (Sénégal, CI, CM, NG outre-Lagos)
• 60-70 % de smartphones Android < 4 GB RAM
• Itel A57, Tecno Spark 8, Infinix Smart 6 = devices référence
• Mais : 25-30 % des visites en 4G urbaines + WiFi fixe

Optimiser pour la médiane = inacceptable dans ce contexte. Optimiser pour le P75 (3G + low-end) = vraie qualité.

Mesurer le INP

En prod via Web Vitals

`tsx

// app/web-vitals.tsx

'use client';

import { useEffect } from 'react';

import { onINP, onLCP, onCLS } from 'web-vitals/attribution';

export function WebVitals() {

useEffect(() => {

onINP(({ value, attribution, id }) => {

sendToAnalytics({ name: 'INP', value, id, attribution });

});

onLCP(({ value, attribution }) => {

sendToAnalytics({ name: 'LCP', value, attribution });

});

onCLS(({ value, attribution }) => {

sendToAnalytics({ name: 'CLS', value, attribution });

});

}, []);

return null;

}

`

En CI via Lighthouse + WebPageTest

`yaml

# .github/workflows/perf.yml

• name: Run Lighthouse mobile

uses: treosh/lighthouse-ci-action@v10

with:

urls: |

https://staging.kolonell.com/

https://staging.kolonell.com/services

configPath: .lighthouserc.json

uploadArtifacts: true

`

.lighthouserc.json configurer en mobile avec throttling 3G Slow.

Les 5 leviers concrets

Levier 1 — Code-splitting agressif

Bundle initial < 100 KB JS minified gzipped pour 3G.

`tsx

// Mauvais : tout chargé d'un coup

import { Charts } from 'big-charts-lib';

import { PdfViewer } from 'pdf-viewer';

// Bon : dynamic imports

import dynamic from 'next/dynamic';

const Charts = dynamic(() => import('big-charts-lib').then(m => m.Charts), {

ssr: false,

loading: () => ,

});

const PdfViewer = dynamic(() => import('pdf-viewer'), { ssr: false });

`

Côté Next.js : analyser le bundle avec @next/bundle-analyzer.

Levier 2 — Réduire le main thread blocking

Sur Itel A57, un for loop sur 10 000 éléments bloque l'UI 800 ms+.

`ts

// Mauvais : bloque le main thread

function processOrders(orders: Order[]) {

return orders.map(o => expensiveCompute(o));

}

// Bon : Web Worker

// app/workers/order-processor.ts

self.onmessage = (e: MessageEvent) => {

const result = e.data.map(o => expensiveCompute(o));

self.postMessage(result);

};

// app/orders.tsx

const worker = new Worker(new URL('./workers/order-processor.ts', import.meta.url));

worker.postMessage(orders);

worker.onmessage = (e) => setProcessed(e.data);

`

Levier 3 — Hydration sélective

Avec Next.js 14 + React Server Components, la majorité du composant reste server. Seul le code interactif s'hydrate.

`tsx

// Server Component (default in app/)

export default function ServiceCard({ service }) {

return (

);

}

// Client Component (interactivité limitée)

'use client';

export function BookingButton({ serviceId }) {

return router.push(/book/${serviceId})}>RDV;

}

`

Levier 4 — Debounce sur inputs

Une recherche live qui requête à chaque touche tue l'INP.

`tsx

// Mauvais

fetchResults(e.target.value)} />

// Bon

import { useDebouncedCallback } from 'use-debounce';

const debounced = useDebouncedCallback(fetchResults, 300);

debounced(e.target.value)} />

`

Levier 5 — CSS-only transitions

Préférer CSS transitions au JavaScript pour les animations.

`css

/* GOOD: anim CSS, pas de main thread */

.menu {

transform: translateX(-100%);

transition: transform 200ms ease-out;

}

.menu.open {

transform: translateX(0);

}

`

`ts

// BAD: anim JS framerate-dependent

function animate(el, targetX) {

let x = -300;

const id = setInterval(() => {

x += 5;

el.style.transform = translateX(${x}px);

if (x >= targetX) clearInterval(id);

}, 16);

}

`

LCP : optimiser l'image principale

LCP est typiquement l'image hero ou un titre. Optimiser :

`tsx

import Image from 'next/image';

import hero from '@/public/hero.webp';

src={hero}

alt="Welcome"

priority // <-- préchargement automatique

sizes="100vw"

placeholder="blur" // blur on load

/>

`

priority sur la première image visible (ATF). Pas sur toutes, sinon préchargement contre-productif.

CLS : éviter les shifts

CLS est causé par les images sans dimensions, fonts qui chargent tard, ads asynchrones.

`tsx

// Mauvais

// Bon

// Ou Next/Image qui réserve l'espace

`

Police :

`ts

// next.config.js

import { Inter } from 'next/font/google';

const inter = Inter({

subsets: ['latin'],

display: 'swap', // pas de FOUT

});

`

Cas réel — site Présidence Sénégal (refonte 2026)

Avant optimisation (3G Slow, Itel A57) :

• LCP : 7,2 s
• INP : 980 ms
• CLS : 0,18
• Score Lighthouse Mobile : 31

Après optimisation (3 semaines de travail) :

• LCP : 2,1 s
• INP : 178 ms
• CLS : 0,05
• Score Lighthouse Mobile : 94

Trafic : +28 % sur 6 mois grâce au boost SEO Core Web Vitals.

FAQ

Q : Faut-il viser INP < 100 ms ?

R : 200 ms est le seuil "Good" Google. < 100 ms est exceptionnel et coûteux à obtenir sur 3G Africa. Cibler 200 ms est rationnel.

Q : Server Components réduisent-ils l'INP ?

R : Oui significativement, en réduisant le JS envoyé au client. Combiné avec le streaming SSR, ça change tout.

Q : Cloudflare Workers ou Vercel Edge aident ?

R : Oui pour LCP/TTFB (latence réduite). Pour INP qui est mainthread-bound, l'edge n'aide pas — c'est du code-splitting et du Worker qui font la différence.

Conclusion

Les Core Web Vitals 2026 ne sont plus un nice-to-have SEO. Sur 3G Africa, c'est la différence entre un site utilisé et un site abandonné en cours de chargement. 3 semaines d'optimisation ciblée passent un site de "31 / 100" Lighthouse à "94 / 100" — ROI immédiat sur trafic, conversions, et notation Search Console.