Indice de vitesse : qu'est-ce que c'est et comment optimiser votre site Web pour cela

L'indice de vitesse (SI) est une mesure intéressante lorsque l'on considère la vitesse de la page. C'est absolument une indication des performances de votre page, mais c'est complètement différent des autres mesures centrées sur l'utilisateur telles que First Contentful Paint et Largest Contentful Paint. SI indique à quelle vitesse votre site se charge au-dessus de la ligne de flottaison. Ou pour le dire autrement, lorsque tout le contenu dans la fenêtre de l'utilisateur est complètement visible. Lorsque vous regardez les temps de chargement de votre page, vous ne serez probablement pas pénalisé ou récompensé pour votre indice de vitesse. Ce n'est pas une raison pour l'ignorer. En tant que métrique unique, c'est l'une des rares qui englobe plusieurs autres métriques et peut vous donner une idée précise de la vitesse, de l'efficacité et des performances globales de votre site.

Abonnez-vous à notre chaîne Youtube

Qu'est-ce que l'indice de vitesse ?

Lighthouse, l'épine dorsale de Google pour PageSpeed ​​Insights, examine plusieurs mesures de performance pour évaluer votre site. L'indice de vitesse (SI) est l'un de ceux-ci, et le rapport affichera le temps en secondes plutôt qu'en millisecondes comme avec d'autres mesures. Google définit le SI comme « la rapidité avec laquelle le contenu d'une page est visiblement rempli ».

Assez simple, non?

Speed ​​Index ne prend pas en compte les scripts back-end ou autres charges non peintes. Ils l'affectent, cependant. L'IS est simplement une mesure du temps qu'il faut aux utilisateurs pour voir votre contenu dans son intégralité. C'est le coup de pied. En entier . Alors que d'autres mesures telles que le LCP sont mesurées lorsque la plus grande partie du contenu est affichée, l'indice de vitesse prend en compte tout le contenu qui doit être affiché.

Ce n'est pas une mesure de la vitesse globale de la page. Cela prend en compte le moment où le navigateur rend tous les éléments. Y compris les scripts non visibles et les éléments qui affectent les performances. Cependant, si vous voulez une bonne mesure du moment où vos utilisateurs perçoivent que la page est complètement chargée , SI est la métrique à surveiller. En raison de la façon dont il est centré sur l'utilisateur, le SI peut être une bonne indication de la santé globale du site ainsi qu'une base de référence pour l'expérience utilisateur (UX) de votre site.

Comment mesurer l'indice de vitesse

Comme pour la plupart des mesures de performance du site, l'un des meilleurs outils à utiliser est le propre PageSpeed ​​Insights de Google. Cet outil est également l'un des plus particuliers dans les résultats qu'il renvoie. Il est relativement critique, même pour les sites les mieux construits. PageSpeed ​​Insights fournit le plus souvent des données de laboratoire pour votre site, basées sur un agrégat des 28 derniers jours de collecte. Cependant, si vous avez suffisamment de visiteurs qui transmettent des informations à Google via Chrome, vous pouvez également obtenir des données de terrain du monde réel à partir du rapport. Cependant, tous les sites ne peuvent pas obtenir cela.

Comme vous pouvez le voir, la vitesse de bon nombre de ces métriques est dans le vert. Cela indique qu'ils sont « bons ». C'est évidemment là que vous voulez votre site. Cependant, l'indice de vitesse est de 4,0 secondes et orange. C'est un long moment pour l'utilisateur d'attendre pour tout voir au-dessus du pli.

Qu'est-ce qu'un bon score d'indice de vitesse ?

PageSpeed ​​Insights utilise les scores suivants pour classer l'indice de vitesse de votre site et le coder en couleur en conséquence :

• Vert (bon) – 0 à 3,4 secondes
• Orange (modéré) – 3,4 à 5,8 secondes
• Rouge (lent) – plus de 5,8 secondes

Comme nous l'avons dit précédemment, PageSpeed ​​Insights est très critique dans ses mesures. Si vous êtes dans l'orange ou le rouge, vous pouvez utiliser un outil tel que GTmetrix ou le test de vitesse de Pingdom pour voir ce que montrent leurs données en temps réel. Nous pensons qu'il est préférable de tester votre site à l'aide de plusieurs outils à différents moments pour obtenir la meilleure image des performances globales.

Comment optimiser votre score d'indice de vitesse

Vous pouvez prendre un certain nombre de mesures pour optimiser votre score Speed ​​Index. Si vous avez tous essayé d'optimiser votre site pour toute sorte d'augmentation de la vitesse de la page (ou, techniquement, de diminution), alors vous avez probablement également affecté d'une manière ou d'une autre votre score SI. Nous allons vous montrer quelques façons de cibler spécifiquement votre temps SI afin que votre page se charge le plus rapidement possible pour offrir à vos visiteurs la meilleure expérience possible.

Réduire les ressources de blocage de rendu

Plus précisément, la réduction de votre temps d'exécution JavaScript est l'un des meilleurs moyens d'augmenter votre score d'indice de vitesse. Les ressources de blocage de rendu sont des scripts et du code qui empêchent le chargement d'autres parties de votre site Web en prenant la priorité. Au lieu que le site charge différents éléments simultanément, certains éléments suspendent tous les autres jusqu'à ce qu'ils soient terminés.

Et cela réduit l'indice de vitesse de votre site. Pour contourner ce problème, vous pouvez différer n'importe quel nombre de scripts et de morceaux de code qui se chargent jusqu'à ce que les éléments visibles aient été peints dans le DOM. L'identification des coupables est en fait relativement facile, car vous pouvez utiliser les outils de développement Chrome pour jeter un œil à votre site au fur et à mesure qu'il se charge, et l'outil indiquera ce qui arrête le rendu des éléments.

De plus, les utilisateurs de WordPress peuvent utiliser un plugin de mise en cache (ou un plugin d'optimisation de site) tel que W3 Total Cache ou WP Rocket pour gérer cela. Souvent, ces plugins ont une simple bascule pour différer les ressources bloquant le rendu.

Les utilisateurs de Divi ont également un avantage majeur pour bloquer ces ressources, car les options de thème vous permettent de basculer le report CSS bloquant le rendu, ainsi que les scripts jQuery. En plus de cela, les fonctionnalités CSS critiques du thème décomposent de gros morceaux de code qui peuvent retarder le contenu de votre site et les amener à se charger beaucoup plus rapidement qu'ils ne le feraient autrement. Bien que certains d'entre eux soient des bascules, Divi en active automatiquement d'autres. L'installation de Divi devrait aider votre score SI immédiatement dans la plupart des cas.

Réduire le travail sur le fil principal de votre site

À l'instar des ressources bloquant le rendu, vous pouvez obstruer les performances de votre site en chargeant différents éléments qui consomment beaucoup de puissance de traitement de votre serveur. Les réduire peut aider à pousser le site vers le navigateur plus rapidement.

La solution la plus simple pour cela est d' arrêter d'utiliser autant de JavaScript . GTmetrix le dit le mieux :

En général, plus votre page contient de JavaScript, plus le processus d'analyse/compilation est long ; résultant en une attente plus longue pour que les utilisateurs visualisent le contenu et interagissent avec votre page.

Nous reconnaissons que cela pourrait ne pas être facile. Vous avez conçu le site pour qu'il fonctionne d'une certaine manière. Cependant, il peut y avoir du code inutilisé que vous pouvez supprimer, et vous pourrez peut-être optimiser tout JavaScript tiers que vous chargez sur votre site. Aussi, minifiez votre JavaScript.

En plus de l'audit JS, assurez-vous de minifier vos CSS et HTML. Cela allégera encore plus la tension du fil principal. Les plugins de mise en cache et d'optimisation ont souvent ces options aussi.

Les utilisateurs de Divi, une fois de plus, ont une longueur d'avance ici, car le thème minimise et divise automatiquement CSS et JavaScript en morceaux de la taille d'une bouchée pour un débit plus rapide, éliminant ainsi le besoin de beaucoup de concentration de votre fil principal.

Indice de vitesse Foire aux questions

L'indice de vitesse est un concept simple qui a des ramifications complexes. Nous souhaitons répondre à certaines questions fréquemment posées sur SI pour vous aider à optimiser votre site Web du mieux que vous le pouvez.

Comment l'indice de vitesse s'intègre-t-il dans les performances globales de mon site Web ?

L'indice de vitesse, en tant que mesure unique, est une très bonne indication des performances de votre site Web dans un certain nombre de domaines différents. Parce qu'il prend en compte le contenu entièrement visible et au-dessus de la ligne de flottaison, vous pouvez l'utiliser comme indicateur non seulement du chargement perçu par l'utilisateur, mais également d'une estimation approximative de ce que fait votre site dans un certain nombre de domaines différents.

En fait, il ne vous donne pas beaucoup d'informations sur ce que fait votre site Web. Il peut être considéré comme une métrique fourre-tout qui, comme le dit GTmetrix, « constitue une référence globale utile pour évaluer les performances de votre site Web dans son intégralité ».

Dois-je me concentrer spécifiquement sur mon score d'indice de vitesse ?

Probablement pas, non.

Bien qu'il soit très utile de comparer votre site, se concentrer sur d'autres problèmes plus granulaires tels que First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to First Byte (TTFB) et First Input Delay (FID) sont beaucoup plus important. Vous pouvez prendre un certain nombre de mesures pour les améliorer individuellement, ce qui améliorera à son tour votre indice de vitesse. Et lorsqu'il est pris comme référence globale, vous pouvez voir à quel point vos optimisations fonctionnent grâce à SI.

Conclusion

L'optimisation de la vitesse des pages est une bataille sans fin que mènent les propriétaires de sites Web. Vous devez trouver un équilibre entre la convivialité, l'expérience et les performances, et trouver cet équilibre peut être difficile. Lorsque les tests renvoient autant de scores différents sur autant d'éléments différents, il peut être difficile de savoir où mettre votre énergie et vos ressources. L'indice de vitesse peut vous aider, en tant que mesure unique qui vous montre les performances de votre site lorsque vous ajustez d'autres parties plus spécifiques des performances de votre site.

Qu'avez-vous fait pour optimiser l'indice de vitesse de votre site Web au fil des ans ?

Article présenté en image par HappyDrawing / shutterstock.com