Sommaire
Comprendre le score PageSpeed et ce qu'il mesure vraiment
PageSpeed Insights ne mesure pas une vitesse il mesure six métriques pondérées différemment. Le LCP (Largest Contentful Paint) représente à lui seul 25% du score. Savoir quelle métrique pénalise le plus votre score est la première étape.
| Métrique | Poids dans le score | Seuil "Bon" |
|---|---|---|
| LCP | 25% | ≤ 2,5 s |
| TBT (Total Blocking Time) | 30% | ≤ 200 ms |
| CLS | 15% | ≤ 0,1 |
| FCP | 10% | ≤ 1,8 s |
| SI (Speed Index) | 10% | ≤ 3,4 s |
| TTI (Time to Interactive) | 10% | ≤ 3,8 s |
Images : le gain le plus rapide et le plus impactant
1. Convertir en WebP/AVIF
WebP est 25-35% plus léger qu'un JPEG équivalent. AVIF est encore 20% plus léger que WebP mais moins bien supporté. Pour 2025, WebP est le standard minimum. Sur WordPress, ShortPixel, Imagify ou WebP Express gèrent la conversion automatiquement.
2. Définir width et height sur toutes les images
Sans dimensions explicites, le navigateur ne peut pas réserver l'espace avant le chargement résultat : layout shift (CLS élevé). Ajoutez systématiquement width="X" height="Y" sur toutes vos balises img.
3. Lazy loading sur toutes les images non-hero
L'attribut loading="lazy" est supporté nativement par tous les navigateurs modernes. Appliquez-le à toutes les images hors viewport initial. Ne l'appliquez JAMAIS à l'image hero elle doit se charger immédiatement.
4. Preload l'image hero
Dans votre <head>, ajoutez <link rel="preload" as="image" href="hero.webp">. C'est l'amélioration LCP la plus simple et l'une des plus efficaces.
Polices de caractères : éviter le FOUT et le CLS
5. Preconnect vers Google Fonts
Ajoutez ces deux lignes avant votre lien Google Fonts : <link rel="preconnect" href="https://fonts.googleapis.com"> et <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Économie : 100-200ms sur le FCP.
6. font-display: swap
Ajoutez &display=swap à votre URL Google Fonts. Le texte s'affiche immédiatement avec la police système, puis bascule vers votre police personnalisée pas de texte invisible pendant le chargement.
7. Limiter les variantes de polices
Chaque poids (400, 500, 600, 700...) est un fichier supplémentaire. Chargez uniquement les poids que vous utilisez réellement. Chaque variante supprimée = 15-30KB économisés.
JavaScript : différer et minifier
8. Scripts tiers en defer ou async
Tout script non critique doit avoir defer ou async. La différence : async s'exécute dès le chargement (risque de conflit), defer attend le parsing HTML (plus sûr).
9. Auditer et supprimer les scripts inutilisés
Chrome DevTools > Coverage vous montre exactement quel % de chaque script est utilisé. Souvent, 30-60% du JavaScript chargé n'est jamais exécuté. Les pires offenseurs : anciens pixels, chat widgets désactivés, jQuery non utilisé.
Cache et CDN
10. Cache navigateur long terme
Configurez les en-têtes Cache-Control: max-age=31536000 pour vos assets statiques (images, CSS, JS avec hash). Les visiteurs récurrents chargeront votre site instantanément.
11. Compression Brotli (ou Gzip)
Brotli compresse 15-25% mieux que Gzip pour les fichiers texte (HTML, CSS, JS). Activable en 2 minutes sur Nginx ou Apache. Sur Cloudflare et la plupart des CDN, c'est activé par défaut.
12. CDN pour les assets statiques
Un CDN sert vos assets depuis le serveur géographiquement le plus proche de l'utilisateur. Pour un site ciblant la France, Cloudflare (gratuit) ou Bunny CDN suffit amplement. Impact sur le TTFB : souvent -200 à -500ms.
Votre site est lent et vous perdez des clients ?
NEXYN réalise des audits de performance web complets avec implémentation des corrections. Score PageSpeed cible ≥ 90 sur mobile et desktop, garanti.
Demander un audit gratuit
