PageSpeed et Core Web Vitals : la checklist pour passer à 90+

Atteindre un score Google PageSpeed supérieur à 90 en 2026 n'est plus optionnel — c'est devenu un facteur de classement direct. Sur les mêmes mots-clés, un site qui charge en 0,8 seconde ranke systématiquement au-dessus d'un concurrent qui charge en 4 secondes. Cette checklist liste les optimisations qui produisent le plus de gains mesurables, dans l'ordre de priorité.

Les 3 Core Web Vitals à connaître

Google mesure l'expérience réelle des utilisateurs via 3 métriques :

Pour atteindre PageSpeed 90+, il faut être au vert sur les 3. Sous 2,5s en LCP, sous 200ms en INP, sous 0,1 en CLS — sinon le score plafonne sous 90 quoi que vous fassiez.

Diagnostic en 3 minutes

1. Ouvrez PageSpeed Insights
2. Collez votre URL, lancez l'analyse mobile (pas desktop, c'est le mobile que Google utilise pour ranker)
3. Notez les 3 scores Core Web Vitals + le score global
4. Lisez la section "Diagnostics" — Google liste précisément ce qui pose problème

Si LCP > 2,5s : suivez la section LCP ci-dessous. Si INP > 200ms : section INP. Si CLS > 0,1 : section CLS.

Optimiser le LCP (vitesse de chargement)

Le LCP correspond au moment où le plus gros élément visible (souvent l'image hero, parfois un titre H1) finit de s'afficher. Les leviers classés par impact :

Servir les images en AVIF ou WebP

Le format JPEG date de 1992. AVIF (2019) compresse 50% mieux à qualité égale. WebP (2010) compresse 25-35% mieux. Convertir l'image hero seule fait souvent gagner 0,5 à 1 seconde de LCP.

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1600" height="900" />
</picture>

Sur un site Next.js, la balise <Image> fait ça automatiquement avec les bons paramètres formats: ['image/avif', 'image/webp'].

Précharger l'image hero

Un <link rel="preload"> dans le head force le navigateur à télécharger l'image en parallèle du CSS, au lieu d'attendre. Gain typique : 0,3 à 0,8 seconde.

<link rel="preload" as="image" href="/hero.avif" />

Redimensionner les images à la taille d'affichage

Servir une image 4000×3000 affichée en 800×600 gaspille 90% du téléchargement. Toujours servir la taille d'affichage réelle, et des variantes responsive via srcset.

Utiliser un CDN (Cloudflare au Maroc)

Sans CDN, votre image traverse 3 000 km depuis votre serveur français vers le visiteur marocain (environ 250-400ms de latence). Avec Cloudflare, l'image est servie depuis Marseille ou Madrid (~30ms). Gain typique : 1 à 2 secondes sur le LCP au Maroc.

Optimiser l'INP (réactivité)

L'INP mesure le délai entre une interaction utilisateur (clic, tap, saisie) et la réponse visuelle. Un site lent à réagir frustre immédiatement.

Réduire le JavaScript bloquant

Le navigateur ne peut pas répondre aux clics tant qu'il exécute du JavaScript. Les coupables typiques : tags analytics chargés synchronously, plugins WordPress mal codés, librairies React inutiles.

Solutions :

• Charger les scripts non-critiques en async ou defer
• Différer les tags marketing (Google Tag Manager) avec strategy="afterInteractive" sur Next.js
• Supprimer les librairies JavaScript non utilisées

Code-split par route

Sur Next.js, chaque page charge uniquement le JS dont elle a besoin. Sur WordPress, un seul plugin lourd chargé sur toutes les pages peut ruiner l'INP.

Limiter les third-party scripts

Chaque tag externe (Hotjar, Intercom, Crisp, Facebook Pixel) ajoute de l'INP. Auditer la liste avec Request Map et garder seulement les essentiels.

Optimiser le CLS (stabilité visuelle)

Le CLS mesure les "sauts" visuels pendant le chargement — quand une image apparaît et pousse le texte vers le bas, par exemple. Les 3 causes principales :

Images sans dimensions réservées

Toujours déclarer width et height sur les balises <img>. Le navigateur réserve l'espace avant le téléchargement.

Fonts en FOIT (flash of invisible text)

Une font qui charge tardivement décale le texte. Précharger les fonts critiques :

<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin />

Et utiliser font-display: swap dans le CSS pour afficher une fallback pendant le chargement.

Bannières insérées dynamiquement

Les bannières cookies, popups d'inscription ou notifications dynamiques décalent le contenu. Utiliser position: fixed ou position: absolute pour les sortir du flux normal.

La checklist complète en 12 points

1. Score PageSpeed mobile > 90
2. LCP < 2,5s sur la page d'accueil
3. INP < 200ms
4. CLS < 0,1
5. Images en AVIF/WebP avec dimensions déclarées
6. Image hero préchargée avec <link rel="preload">
7. Fonts critiques préchargées
8. CDN Cloudflare actif
9. JavaScript non-critique en async ou defer
10. Pas de bannière qui décale le contenu (ou en position: fixed)
11. Plugins WordPress audités et minimaux (si WordPress)
12. Cache navigateur configuré (Cache-Control headers)

Erreurs courantes en optimisation perf

1. Optimiser desktop alors que Google mesure mobile — toujours tester sur mobile, c'est ce qui compte
2. Ajouter trop de plugins WordPress de "performance" — ils se neutralisent ou pire, ralentissent
3. Utiliser un service de cache mal configuré — le cache trop aggressif sert du contenu obsolète, le cache trop léger n'apporte rien
4. Ignorer les third-party scripts — Google Analytics seul peut ajouter 200ms d'INP
5. Tester une seule fois — PageSpeed varie selon l'heure, moyenner sur 5 mesures pour une vraie lecture

Pour aller plus loin

• Création de site web au Maroc — guide complet 2026 — la pillar du silo
• WordPress vs Next.js vs Shopify — pourquoi Next.js sort PageSpeed 90+ par défaut
• Hébergement web au Maroc : comparatif — Cloudflare comme CDN essentiel
• SEO technique : checklist complète — performance + structure + schema

Conclusion

Atteindre PageSpeed 90+ en 2026 est devenu une condition d'entrée pour ranker. Les optimisations qui produisent le plus de gains sont presque toujours les mêmes : images modernes (AVIF/WebP), CDN, JavaScript déféré, fonts préchargées. 90% des sites marocains ne font aucune de ces optimisations — c'est une opportunité immédiate.

Échangez 20 min avec notre équipe — nous auditons votre score PageSpeed actuel et identifions les 3 optimisations à plus fort ROI pour passer rapidement à 90+.