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

> Checklist actionnable pour atteindre un score Google PageSpeed 90+ et passer les Core Web Vitals 2026 : images, fonts, JavaScript, CDN, contexte marocain.

- Source : https://deadline.ma/conseils/developpement-web/core-web-vitals-pagespeed-checklist
- Auteur : Équipe deadLine — Agence web & digital à Casablanca
- Publié le 14 avril 2026
- Éditeur : deadLine, agence web à Casablanca (https://deadline.ma), éditeur du logiciel LINEPROD (https://lineprod.ma)

## En bref

Pour atteindre un PageSpeed 90+ en 2026, attaquez les 3 Core Web Vitals : LCP < 2,5s (image hero en AVIF + preload), INP < 200ms (réduire le JavaScript bloquant), CLS < 0,1 (dimensions réservées). Au Maroc, ajoutez Cloudflare comme CDN — gain typique de 1,5s sur LCP.

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 :

| Métrique | Mesure | Cible 2026 | Mauvais |
|---|---|---|---|
| **LCP** (Largest Contentful Paint) | Vitesse de chargement perçue | < 2,5s | > 4s |
| **INP** (Interaction to Next Paint) | Réactivité aux interactions | < 200ms | > 500ms |
| **CLS** (Cumulative Layout Shift) | Stabilité visuelle | < 0,1 | > 0,25 |

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](https://pagespeed.web.dev/)
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. Pour le faire en deux clics,
notre [compresseur d'images gratuit](/outils/compresseur-images) convertit
et allège vos JPEG/PNG en WebP directement dans le navigateur.

```html
<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.

```html
<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](https://requestmap.webperf.tools/)
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 :

```html
<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](/conseils/developpement-web) — la pillar du silo
- [WordPress vs Next.js vs Shopify](/conseils/developpement-web/wordpress-vs-nextjs-vs-shopify) — pourquoi Next.js sort PageSpeed 90+ par défaut
- [Hébergement web au Maroc : comparatif](/conseils/developpement-web/hebergement-web-maroc-comparatif) — Cloudflare comme CDN essentiel
- [SEO technique : checklist complète](/conseils/developpement-web/seo-technique-checklist-site-web) — 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](/contact) — nous auditons votre
score PageSpeed actuel et identifions les 3 optimisations à plus fort
ROI pour passer rapidement à 90+.

## Questions fréquentes

### Qu'est-ce que les Core Web Vitals en 2026 ?

Trois métriques Google mesurent l'expérience utilisateur réelle : LCP (Largest Contentful Paint, vitesse perçue, cible < 2,5s), INP (Interaction to Next Paint, réactivité, cible < 200ms), CLS (Cumulative Layout Shift, stabilité visuelle, cible < 0,1). Sous ces seuils, le score PageSpeed dépasse 90.

### Pourquoi mon score PageSpeed est-il si bas ?

Causes typiques classées par fréquence : images non optimisées (60%), JavaScript bloquant le rendu (50%), fonts non préchargées (40%), absence de CDN (35%), CMS lourd type WordPress avec trop de plugins (30%).

### Comment améliorer le LCP de mon site ?

Identifiez l'élément LCP avec PageSpeed Insights (généralement l'image hero), convertissez-la en AVIF ou WebP, redimensionnez-la à la taille d'affichage, et ajoutez un <link rel=preload> dans le head. Gain typique : 1 à 2 secondes.

### WordPress peut-il atteindre un PageSpeed 90+ ?

Difficilement. WordPress par défaut sort entre 30 et 60 sur mobile. Avec optimisation aggressive (caching, CDN, lazy load, suppression des plugins inutiles), on monte à 70-85. Atteindre 90+ régulièrement demande de basculer sur Next.js ou un site statique généré.

### Cloudflare améliore-t-il vraiment les performances au Maroc ?

Oui, significativement. Cloudflare a des datacenters proches du Maroc (Marseille, Madrid) qui ramènent la latence à ~30ms. Pour un site hébergé en France hors CDN, on gagne typiquement 1 à 2 secondes sur le LCP en ajoutant Cloudflare.

### Combien de temps pour passer mon site à PageSpeed 90+ ?

Sur un site moderne (Next.js, Astro), 1 à 3 jours d'optimisation ciblée. Sur un WordPress chargé de plugins, 1 à 2 semaines de travail (cache, CDN, désactivation plugins, optimisation images, et souvent migration de thème).