Qu'est-ce que le score PageSpeed Insights et comment l'améliorer radicalement
PageSpeed Insights (PSI) est l'outil officiel de Google pour mesurer la vitesse et la performance de votre site web.
Il ne donne pas juste un score. Il explique ce qui va mal et comment le réparer.
Si vous n'utilisez qu'un seul outil SEO, utilisez celui-là.
Ce que mesure PageSpeed Insights
Le score global (0-100)
| Score | Couleur | Signification |
|---|---|---|
| 90-100 | Vert | Excellent |
| 50-89 | Orange | À améliorer |
| 0-49 | Rouge | Mauvais |
Règle : un site en dessous de 50 sur mobile est pénalisé par Google. Un site au-dessus de 90 est récompensé.
Les 5 métriques principales
1. First Contentful Paint (FCP)
- "Quand est-ce que quelque chose apparaît ?"
- Objectif : < 1.8s
2. Largest Contentful Paint (LCP)
- "Quand est-ce que le contenu principal est visible ?"
- Objectif : < 2.5s
- C'est la métrique la plus importante
3. Total Blocking Time (TBT)
- "Pendant combien de temps le site est-il figé ?"
- Objectif : < 200ms
4. Cumulative Layout Shift (CLS)
- "Est-ce que la page bouge pendant le chargement ?"
- Objectif : < 0.1
5. Speed Index (SI)
- "À quelle vitesse le contenu remplit l'écran ?"
- Objectif : < 3.4s
Lab Data vs Field Data
Lab Data : test simulé dans des conditions contrôlées. Reproductible.
Field Data : données réelles des utilisateurs Chrome (Chrome User Experience Report). Plus fiable mais moins détaillé.
Conseil : fiez-vous d'abord au Lab Data pour le diagnostic. Suivez le Field Data pour la tendance.
Les diagnostics et opportunités
PageSpeed Insights liste les problèmes par ordre d'impact. Voici les plus fréquents.
1. Éliminer les ressources bloquant le rendu
Problème : CSS et JavaScript dans le <head> qui empêchent le navigateur d'afficher quoi que ce soit.
Solution Next.js :
- CSS automatiquement optimisé et minifié
- JavaScript chargé de manière différée quand possible
- Critical CSS inline
2. Réduire le temps d'exécution JavaScript
Problème : Trop de JavaScript qui ralentit le thread principal.
Solution Next.js :
- Code splitting automatique
- Server Components (0 JS envoyé pour le contenu statique)
- Tree shaking (élimination du code mort)
3. Properly size images
Problème : Images trop grandes pour leur conteneur.
Solution Next.js :
<Image src="/photo.jpg" width={800} height={600} />
- Redimensionnement automatique
- Format WebP/AVIF
- srcset responsive
4. Efficiently encode images
Problème : Images mal compressées.
Solution : compression à 80-85% qualité. Format WebP.
5. Serve images in next-gen formats
Problème : Images en JPEG/PNG au lieu de WebP/AVIF.
Solution : Next.js convertit automatiquement en WebP.
6. Enable text compression
Problème : Fichiers texte (HTML, CSS, JS) envoyés sans compression.
Solution : gzip ou Brotli activés sur le serveur. Vercel/Netlify le font par défaut.
7. Reduce server response times (TTFB)
Problème : Le serveur met trop de temps à répondre.
Solution Next.js :
- SSG (HTML pré-généré, pas de calcul serveur)
- CDN edge (serveur proche du visiteur)
- Pas de base de données à interroger
8. Avoid enormous network payloads
Problème : La page totale pèse trop lourd.
Solution :
- Images optimisées
- Pas de vidéo autoplay
- JavaScript minimal
- Polices limitées
9. Minify CSS / JavaScript
Problème : Espaces, commentaires, sauts de ligne inutiles.
Solution : Next.js minifie automatiquement.
10. Remove unused CSS
Problème : Framework CSS complet chargé alors que 10% est utilisé.
Solution : Tailwind CSS avec purge automatique. Pas de Bootstrap entier.
Comment améliorer votre score : plan d'action
Si vous êtes entre 0 et 49 (Rouge)
Priorité 1 :
- Passer à un hébergement/CDN rapide
- Compresser toutes les images
- Réduire le JavaScript
- Activer la compression gzip/Brotli
Priorité 2 :
- Supprimer les plugins inutiles
- Optimiser les polices
- Lazy loading des images
Délai estimé pour passer au vert : 1-4 semaines avec Next.js.
Si vous êtes entre 50 et 89 (Orange)
Optimisations :
- Convertir les images en WebP
- Réduire le TTFB (cache, CDN)
- Minifier les ressources
- Reporter les scripts non critiques
Délai estimé pour passer au vert : 1-2 semaines.
Si vous êtes entre 90 et 100 (Vert)
Maintenir :
- Surveiller à chaque nouvelle page
- Tester chaque image uploadée
- Vérifier les nouveaux scripts tiers
Les outils complémentaires
| Outil | Fonction |
|---|---|
| WebPageTest | Test détaillé, waterfall, comparaison |
| GTmetrix | Score + recommandations + historique |
| Chrome DevTools | Audit Lighthouse intégré |
| SpeedCurve | Suivi continu des performances |
Notre garantie PageSpeed
Chez Promto.be, on s'engage sur chaque site livré :
Score PageSpeed Insights mobile ≥ 90
Comment on y arrive :
- Next.js avec SSG
- Composant Image optimisé
- Polices optimisées
- Code minimal
- CDN global
Pas de plugin miracle. Pas de cache complexe. Juste la bonne architecture.
Et si votre score n'atteint pas 90 ? On corrige. Gratuitement.
Conclusion
PageSpeed Insights n'est pas qu'un score. C'est un diagnostic complet de la santé de votre site.
Un mauvais score = moins de visiteurs, moins de conversions, moins de revenus.
Un bon score = plus de visiteurs, meilleur SEO, meilleure expérience utilisateur.
La différence entre 30 et 90 n'est pas une question de chance. C'est une question d'architecture.
Next.js nous permet d'atteindre systématiquement 90+. Pas exceptionnellement. Normalement.