Apprendre
Speed Index : comprendre la métrique et rendre les pages visuellement plus rapides
Speed Index montre à quelle vitesse la partie visible se remplit. Apprenez à améliorer la progression visuelle plutôt que le seul temps de chargement final.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
Ce que mesure Speed Index
Speed Index estime à quelle vitesse le viewport visible devient visuellement complet pendant le chargement. Une valeur plus basse signifie que l’utilisateur voit du contenu utile plus tôt et que la page paraît plus rapide, même avant la fin de tous les téléchargements.
Contrairement à un horodatage unique comme FCP ou LCP, Speed Index observe la progression visuelle dans le temps. Il est utile pour repérer les pages qui révèlent le contenu trop lentement à cause de CSS, images, JavaScript ou scripts tiers.
Pourquoi Speed Index se dégrade
- Gros fichiers CSS ou feuilles de style bloquantes qui retardent le premier layout visible.
- Images hero et médias above the fold chargés tard ou à la mauvaise taille.
- JavaScript lourd qui bloque le rendu et laisse le viewport vide ou incomplet.
- Réponse serveur lente et cache insuffisant qui retardent toutes les requêtes suivantes.
- Scripts tiers qui concurrencent les ressources critiques au démarrage.
Comment améliorer Speed Index
Priorisez le premier viewport. Gardez le layout initial simple, inlinez seulement le CSS critique, préchargez l’image ou la police principale et différez tout ce qui n’est pas nécessaire au premier écran. L’objectif est une progression visible régulière, pas seulement un événement load plus rapide.
Réduisez la pression sur le main thread en supprimant le JavaScript inutilisé, en découpant les bundles, en retardant les tags tiers et en évitant le rendu client coûteux pour du contenu qui pourrait arriver en HTML. Ajoutez redimensionnement d’images, formats modernes, cache et CDN.
Erreurs fréquentes
- Réduire le poids total de la page alors que le premier viewport attend toujours du CSS bloquant.
- Lazy-loader des images above the fold qui devraient charger en priorité.
- Livrer une grosse application JavaScript avant le texte et le layout de base.
- Tester seulement un run desktop rapide et manquer la lenteur visuelle mobile.
- Traiter Speed Index séparément de LCP, FCP et TTFB au lieu de les lire ensemble.
Comment valider la correction
Comparez les filmstrips ou captures avant et après, pas seulement le score. Le premier viewport doit se remplir plus tôt et plus régulièrement. Vérifiez ensuite que FCP, LCP, TTFB et les opportunités de rendu bloquant évoluent dans le même sens.
Après déploiement, relancez DomainLens et regardez d’abord les données Lighthouse mobile. Si Speed Index s’améliore mais que LCP reste mauvais, poursuivez avec l’élément LCP précis et les corrections de réponse serveur.