Le matériel, dont nous publions la traduction aujourd'hui, est consacré à l'indice de vitesse du site, qui peut être calculé à l'aide de Google PageSpeed Insights.
Ce n'est un secret pour personne que la vitesse d'un site à notre époque est devenue l'une de ses caractéristiques les plus importantes. Plus le site se charge et se prépare rapidement pour le travail, plus les revenus qu'il rapporte à son propriétaire peuvent être élevés. Accélérer un site, c'est réduire le nombre d'utilisateurs qui, ayant à peine visité ce site, le quittent, fatigués d'attendre le téléchargement de son matériel. Une importance particulière pour les performances du site est le fait que désormais, les indicateurs Google PageSpeed sont utilisés comme l'un des facteurs classant les sites dans les résultats de recherche. En conséquence, de nombreuses organisations prêtent aujourd'hui une attention particulière à la vitesse de leurs sites.
Changements dans les algorithmes de classement des sites
L'année dernière, Google a apporté deux changements majeurs à ses algorithmes d'indexation de recherche et de classement de sites.
- En mars, l'indexation est devenue basée sur la version mobile de la page plutôt que sur le bureau.
- En juillet, l'algorithme de classement SEO a été mis à jour . Lors du calcul pour les pages mobiles et publicitaires, ils ont commencé à utiliser l'indice de vitesse de la page.
Ces faits nous permettent de tirer les conclusions suivantes:
- La vitesse de la version mobile du site affectera son classement SEO global.
- Si les pages du site se chargent lentement, cela réduira le score de qualité des annonces et les publicités coûteront plus cher.
Voici ce que Google en dit: «Des sites plus rapides améliorent non seulement l'expérience utilisateur; des données récentes montrent que l'augmentation de la vitesse du site conduit en outre à une diminution du coût de son support. Nous apprécions vraiment la vitesse. On peut en dire autant de nos utilisateurs. C'est pourquoi nous avons décidé que lors du calcul des indicateurs de classement de recherche, nous prendrions également en compte la vitesse du site. »
Afin de comprendre comment ces changements affectent nos projets en termes d'optimisation de leurs performances, nous devons comprendre les technologies qui sous-tendent l'évaluation de la vitesse du site.
PageSpeed 5.0 est une version entièrement révisée de ce système. Maintenant, il est basé sur Lighthouse et
CrUX (Chrome User Experience Report).
Cette mise à jour, en outre, a apporté un nouvel algorithme de notation, ce qui complique grandement la tâche d'obtenir un score élevé dans PageSpeed.
Qu'est-ce qui a changé dans PageSpeed 5.0?
Avant la version 5.0, l'outil PageSpeed vérifiait la page, analysant sa conformité avec un ensemble de règles heuristiques. S'il y avait de grandes images non compressées sur la page, PageSpeed pourrait conseiller au développeur Web de compresser ces images. Pas d'en-têtes de cache? Le système pourrait leur conseiller d'ajouter.
Les recommandations étaient liées à ces vérifications de page. Les recommandations suivantes pourraient améliorer les performances des pages. Mais les règles heuristiques étaient plutôt superficielles, elles n'avaient pas pour but d'explorer quelles impressions une page de chargement et de rendu de page causerait à un vrai visiteur d'un site.
Dans PageSpeed 5.0, les pages sont chargées dans un véritable navigateur Chrome, contrôlé par Lighthouse. Lighthouse enregistre les métriques obtenues à partir du navigateur, leur applique le modèle de score et affiche un score de performance global. Des recommandations pour l'amélioration des performances sont données sur la base des points notés par la page étudiée pour les indicateurs individuels.
Lighthouse, comme PageSpeed, dispose d'un système d'évaluation des performances du site. Dans PageSpeed 5.0, l'évaluation des performances provient directement de Lighthouse. Le score de performance généré par PageSpeed est désormais le même que celui produit par Lighthouse.
La note de performance de PageSpeed est basée sur la note générée par LighthouseMaintenant que nous savons d'où vient le score PageSpeed, parlons de la façon dont ce score est calculé et de ce qui peut être fait pour améliorer la vitesse du site.
Qu'est-ce que Google Lighthouse?
Lighthouse est un projet open source, qui est géré par une équipe spéciale, choisie parmi les développeurs de Google Chrome. Au cours des deux dernières années, Lighthouse est devenu l'outil gratuit standard pour analyser les performances du site.
Lighthouse utilise le protocole de débogage à distance de Chrome (Chrome Remote Debugging Protocol) pour lire des informations sur les demandes réseau, pour mesurer les performances du code JavaScript, pour vérifier la conformité aux normes d'accessibilité du contenu des pages. Cet outil mesure des indicateurs de temps centrés sur la perception de la page par les utilisateurs. Parmi eux, par exemple,
First Contentful Paint ,
Time to Interactive et Speed Index.
Si vous êtes intéressé par Lighthouse - jetez un œil à
ce matériel dans le référentiel officiel du projet, dédié à la description générale de son architecture.
Calcul de la cote de performance du site dans Lighthouse
Dans le cadre d'une étude des performances de la page, Lighthouse écrit de nombreuses métriques qui se concentrent sur l'évaluation de ce que l'utilisateur voit et de ce qu'il ressent lors de l'utilisation de la page. Voici six mesures utilisées pour dériver un score de performance global:
- Time to Interactive (TTI, temps de téléchargement pour l'interaction).
- Indice de vitesse.
- First Contentful Paint (FCP, First Content Download Time).
- Premier processeur inactif.
- Première peinture significative (FMP, temps de téléchargement pour un contenu suffisant).
- Latence d'entrée estimée.
Chacun de ces indicateurs est évalué sur une échelle de 0 à 100. L'évaluation est effectuée en obtenant les 75e et 95e centiles pour les pages mobiles à partir de l'
archive HTTP et en utilisant la fonction
log normal .
En suivant cet algorithme et en considérant les données utilisées pour calculer le TTI, vous pouvez voir que si la page pouvait devenir «interactive», adaptée à l'interaction avec l'utilisateur, en 2,1 secondes, alors le TTI serait égal à 92/100.
TTIAprès le calcul de chacun des indicateurs, un certain poids lui est attribué, qui est utilisé comme modificateur dans le calcul de l'indicateur total. Voici les pondérations attribuées aux différentes mesures.
Les pondérations indiquent comment chacun des indicateurs affecte l'expérience de l'utilisateur mobile avec la page.
À l'avenir, cet ensemble pourrait être étendu pour inclure des indicateurs tirés de l'ensemble de données Chrome User Experience Report liés aux perceptions des utilisateurs des sites.
Vous pourriez être intéressé à savoir comment l'utilisation des poids affecte la note de performance finale. Si oui, jetez un œil à
ce tableau créé par l'équipe du Phare. Après l'avoir analysé, vous pouvez mieux comprendre ce processus.
Fragment d'un tableau illustrant le calcul de l'indice de performance des pagesSi vous modifiez la métrique
interactive dans l'exemple ci-dessus (c'est ce que nous appelons ici TTI) de 5 secondes à 17 secondes (c'est-à-dire au niveau du TTI moyen global pour les pages mobiles), la note de la page tombera à 56% ( c'est-à-dire qu'elle obtiendra 56 points sur 100 possibles).
Si vous définissez le
first-contentful-paint indicateur de
first-contentful-paint satisfaisante sur 17 secondes, la note tombera à 62%.
Par conséquent, nous pouvons conclure que la métrique TTI a le plus grand impact sur la note finale du site. Il s'ensuit que pour obtenir une page PageSpeed hautement cotée, vous devez démontrer un TTI décent.
Amélioration TTI
Si nous considérons globalement le problème de l'amélioration du TTI, alors nous pouvons dire qu'il y a deux facteurs qui affectent extrêmement fortement cet indicateur:
- La quantité de code JavaScript chargé sur la page.
- Le temps qu'il faut pour terminer diverses tâches JavaScript dans le fil principal.
Ici vous pouvez trouver des détails sur TTI, mais si vous souhaitez rapidement, sans avoir besoin de recherches supplémentaires, améliorer le TTI de votre site Web, nous pourrions recommander de réduire la quantité de code JavaScript.
Dans la mesure du possible, supprimez le code JavaScript inutilisé ou essayez de vous assurer que la page ne charge que les scripts utilisés sur cette page. Le respect de cette recommandation peut signifier se débarrasser des anciennes polyfills ou remplacer les bibliothèques tierces par des alternatives plus compactes et plus modernes.
Il est important de se rappeler que ce qu'on appelle le "
prix JavaScript " n'est pas seulement le temps nécessaire pour télécharger le code. Le navigateur doit décompresser, analyser, compiler et, finalement, exécuter le code JavaScript chargé. Toutes ces opérations peuvent prendre un temps considérable. Surtout sur les appareils mobiles.
Parmi les mesures efficaces pour réduire la quantité de code JS utilisé par les pages, on peut noter les suivantes:
- Analyse des polyfills utilisés et rejet de ceux qui ne sont plus nécessaires à votre public.
- Connaître le «coût» de chacune des bibliothèques tierces utilisées. Pour en savoir plus sur les tailles des bibliothèques utilisées dans le projet, vous pouvez utiliser des outils tels que webpack-bundle-analyzer et source-map-explorer .
- Les outils JavaScript modernes (comme le webpack) peuvent décomposer de grandes applications JS en ensembles de petits ensembles, qui sont automatiquement chargés lorsqu'ils deviennent nécessaires. En particulier, lorsqu'un utilisateur passe de page en page d'un site. Cette approche d'optimisation des performances du site est connue sous le nom de fractionnement de code . Son utilisation a un très bon effet sur le TTI.
- Utilisez des techniciens de service qui mettent en cache le bytecode résultant de l'analyse et de la compilation de scripts. Si vous pouvez inclure de tels mécanismes de mise en cache dans votre projet, les ressources système des visiteurs du site seront consacrées à l'analyse et à la compilation du code uniquement lorsque vous accédez à la ressource pour la première fois. Lors de visites répétées sur le site, le matériel nécessaire sera retiré de la cache.
Surveillance TTI
Afin d'explorer avec succès la façon dont votre site est perçu par les utilisateurs qui le consultent, nous vous recommandons d'utiliser des systèmes de surveillance des performances du site Web comme
Calibre . En particulier, nous parlons du fait que les sites sont testés sur au moins deux appareils - sur un ordinateur de bureau rapide et sur un téléphone mobile, dont les performances sont au niveau des appareils de classe moyenne lents.
Avec cette approche, vous aurez des données pour la meilleure option pour travailler avec votre site et pour le pire. Dans le même temps, vous devrez vous habituer au fait que les visiteurs de votre site n'utilisent pas les mêmes appareils puissants que ceux utilisés par votre équipe.
Profilage manuel soigné
Afin de tirer le meilleur parti du profilage des performances du code JS, les pages de test sont testées sur des appareils mobiles spécialement ralentis. Si vous avez un vieux téléphone dans votre tiroir de bureau, la réalisation de cette idée peut lui donner une merveilleuse seconde vie.
Un bon substitut aux appareils réels est les capacités des outils de développement Chrome.
Voici des informations sur le profilage des applications React à l'aide de ces outils.
Autres métriques
Des mesures telles que l'indice de vitesse, la première peinture enrichissante et la première peinture significative sont basées sur la façon dont le navigateur affiche la page. Ils sont influencés par des facteurs similaires à ceux dont nous avons déjà parlé. L'impact sur ces facteurs conduit souvent à une amélioration de tous ces indicateurs.
Objectivement parlant, l'amélioration de ces métriques est plus facile que TTI. Le fait est que la base de leur calcul est la vitesse de rendu des pages par le navigateur. Ces mesures peuvent être améliorées en suivant exactement les directives données après l'analyse des pages à l'aide de Lighthouse.
Si vous ne préchargez pas les polices ou n'optimisez pas la page en tenant compte des caractéristiques des requêtes critiques, vous pouvez très bien commencer à améliorer les performances de rendu de votre site à partir de ces deux directions uniquement. Dans
cet article, vous pouvez trouver des informations détaillées sur la façon dont le navigateur se charge et affiche les ressources critiques utilisées dans la formation des pages Web.
Résultats: sur la surveillance des sites et sur l'amélioration tangible de leur travail
La console de recherche Google mise à jour, Lighthouse et PageSpeed Insights sont d'excellents outils qui vous permettent d'évaluer instantanément les performances globales du site. Cependant, ils ne sont pas bien adaptés aux équipes qui doivent surveiller et améliorer en permanence la performance de leurs projets.
La surveillance continue des performances est un élément essentiel d'un flux de travail visant à maintenir constamment les performances du site à un niveau élevé. Avec cette approche, l'équipe de projet apprend instantanément les problèmes de performances. Avec les tests de performances manuels, une dispersion inattendue des résultats est possible. Par conséquent, sans créer un environnement de test spécialisé, il est presque impossible de tester les performances du site à l'aide de différents appareils ou de simuler d'autres paramètres changeants des systèmes d'utilisateurs potentiels.
La vitesse des pages est devenue un facteur critique dans le classement SEO des pages. Cette affirmation est particulièrement forte de nos jours, lorsque près de 50% du trafic Web est généré par les appareils mobiles.
Pour vous assurer que votre site ne perd pas sa position dans les résultats de recherche, essayez d'utiliser des versions modernes d'outils pour analyser les performances de ses pages les plus importantes et maintenir sa vitesse à un niveau qui vous convient.
Chers lecteurs! Optimisez-vous vos projets web en tenant compte de l'amélioration des indicateurs influençant les notes de Google PageSpeed?
