Accompagner l'évaluation PageSpeed ​​Insights de Google

Si vous êtes propriétaire d'une entreprise, vous souhaitez obtenir de meilleurs classements de recherche pour votre site Web. Si vous êtes un développeur, vous devrez répondre aux besoins du client et créer un site capable de bien se classer. Google prend en compte des centaines de caractéristiques lorsqu'il détermine l'ordre des sites Web dans sa page de classement des moteurs de recherche (SERP).

La vitesse de la page a été officiellement citée comme un attribut de classement important à la mi-2018. Dans cet article, nous expliquerons les scores de performance auxquels les propriétaires d'entreprise doivent prêter attention : PageSpeed ​​Insights. Nous approfondirons certains détails techniques qui aideront les développeurs de logiciels à apporter des améliorations dans des cas compliqués, comme ceux liés aux applications d'une seule page.

Pourquoi réussir le test PageSpeed ​​Insights de Google est important

Lorsque Google a introduit PageSpeed ​​Tools en 2010, la plupart des propriétaires de sites Web en ont pris connaissance. Ceux qui ne l'ont pas fait devraient ouvrir PageSpeed ​​Insights pour vérifier leurs sites.

Le service fournit des détails sur les performances d'un site Web à la fois sur les navigateurs de bureau et mobiles. Il est facile de passer à côté du fait que vous pouvez passer de l'un à l'autre à l'aide des onglets Mobile et Desktop en haut de l'analyse :

Étant donné que les appareils mobiles sont compacts et visent à préserver la durée de vie de la batterie, leurs navigateurs Web ont tendance à afficher des performances inférieures à celles des appareils exécutant des systèmes d'exploitation de bureau, alors attendez-vous à ce que le score du bureau soit plus élevé.

Les grandes entreprises technologiques ne marqueront dans le rouge dans aucun domaine, mais les sites plus petits fonctionnant avec des budgets plus serrés peuvent le faire. Les propriétaires d'entreprise peuvent également exécuter PageSpeed ​​Insights sur les sites de leurs concurrents et comparer les résultats avec les leurs pour voir s'ils doivent investir dans l'amélioration des performances.

Quel score est suffisant pour réussir l'évaluation PageSpeed ?

PageSpeed ​​utilise les métriques de Core Web Vitals pour fournir une évaluation réussite/échec.

Cet outil a trois scores :

1. PageSpeed ​​affiche bien en évidence le score de performance dans un cercle coloré dans la section Diagnostiquer les problèmes de performance. Il est calculé à l'aide des machines virtuelles intégrées de PageSpeed ​​avec des caractéristiques correspondant à l'appareil mobile ou de bureau moyen. Veuillez garder à l'esprit que cette valeur est pour le chargement de la page et pour la machine virtuelle de PageSpeed, et n'est pas prise en compte par le moteur de recherche Google.

   Ce chiffre est utile lorsque les développeurs mettent en œuvre des modifications sur un site Web, car il leur permet de vérifier l'effet des modifications sur les performances. Cependant, le moteur de recherche de Google ne prend en compte que les scores détaillés.

2. Les scores détaillés pour une page spécifique - et pour ceux que PageSpeed ​​considère comme similaires à la page analysée - sont calculés à partir de statistiques que les navigateurs Chrome collectent sur de vrais ordinateurs et envoient à Google. Cela signifie que les performances de Firefox, Safari et d'autres navigateurs autres que Chromium ne sont pas prises en compte.

3. Le résumé pour toutes les pages du site Web est obtenu de la même manière que le score d'une seule page. Pour y accéder, sélectionnez l'onglet Origine au lieu de l'onglet Cette URL. L'URL répertoriée sous la barre d'onglets sera différente, car Origin affichera la page principale du site (domaine uniquement).

Google met constamment à jour la liste des métriques prises en compte par PageSpeed, donc la meilleure source de ce qui est important est la section Expérience / Core Web Vitals dans Google Search Console, en supposant que vous y ayez déjà ajouté votre site Web.

Pour réussir l'évaluation Core Web Vitals, tous les scores doivent être au vert :

Pour que les valeurs soient vertes, la page doit obtenir un score d'au moins 75 % au test, et de nombreux utilisateurs doivent obtenir des valeurs égales ou supérieures. Le seuil diffère pour chaque score et il est nettement plus élevé pour le FID.

Pour mieux comprendre les valeurs, cliquez sur le titre de la partition :

Ceci renvoie à un article de blog expliquant plus en détail les seuils pour la catégorie donnée.

Les données sont accumulées pendant 28 jours, et il existe deux autres différences majeures par rapport à ce que les vrais utilisateurs pourraient rencontrer :

1. Les performances des appareils réels et les vitesses Internet varient, ce test produit donc des résultats différents des résultats de la machine virtuelle de PageSpeed.
2. Les notes détaillées sont calculées pendant toute la durée de vie de la page, en prenant les pires valeurs de chaque intervalle de cinq secondes pendant lequel la page est ouverte.

Si de nombreux utilisateurs d'un site vivent dans des régions où l'accès à Internet est lent et utilisent des appareils obsolètes ou peu performants, la différence peut être surprenante. Ce n'est pas l'une des recommandations d'amélioration de PageSpeed ​​Insights. À première vue, il n'est pas évident de savoir comment traiter ce problème, mais nous essaierons d'expliquer plus tard.

Améliorer les scores à l'aide des recommandations de PageSpeed ​​Insights

La partie principale de la note provient de la façon dont la plupart des utilisateurs ouvrent la page. Malgré le fait que tous les utilisateurs ne visitent pas un site Web pendant une longue période et que la plupart visitent un site Web occasionnellement, tous les utilisateurs sont pris en compte dans les évaluations. Par conséquent, l'amélioration de la vitesse de chargement des pages, qui a un impact sur tout le monde, est un bon point de départ.

Nous pouvons trouver des recommandations dans la section Opportunités sous les résultats de l'évaluation.

Nous pouvons développer chaque élément et obtenir des recommandations détaillées pour des améliorations. Il y a beaucoup d'informations, mais voici les conseils les plus élémentaires et les plus importants :

• Améliorer la vitesse de réponse du serveur. Par exemple, si vous utilisez un hébergement partagé, mettez à niveau votre plan ou migrez vers un serveur privé virtuel (VPS) ou même un serveur dédié. De plus, tous les hôtes ne sont pas égaux. Essayez de choisir un hébergement fiable avec un bon matériel et des garanties de disponibilité.
• Réduisez le volume de trafic requis pour ouvrir votre site. Pour ce faire, vous pouvez remplacer les images par des images optimisées : modifiez leur format, ajustez la résolution et la compression, remplacez les images animées par des images statiques si nécessaire, etc. Les systèmes de gestion de contenu populaires disposent de plug-ins qui simplifient ce processus.
• Cachez plus de données. La façon la plus simple de le faire est d'utiliser un réseau de diffusion de contenu (CDN) comme Cloudflare pour le contenu statique (images, styles, scripts, pages qui ne changent pas). Vous pouvez configurer des règles de mise en cache pour optimiser les performances.

Examinons maintenant des facteurs plus compliqués, où un programmeur expérimenté peut vous aider.

Comment déboguer les scores pendant la durée de vie de la page

Comme mentionné, Google Search Console considère les scores moyens obtenus à partir des navigateurs basés sur Chromium au cours des 28 derniers jours et inclut également des valeurs pour toute la durée de vie de la page.

L'incapacité de voir ce qui se passe pendant la durée de vie de la page est un problème. La machine virtuelle de PageSpeed ​​ne peut pas tenir compte des performances de la page une fois qu'elle est chargée et que les utilisateurs interagissent avec elle, ce qui signifie que les développeurs de sites n'auront pas accès aux recommandations d'amélioration.

La solution consiste à inclure la bibliothèque Google Chrome Web Vitals dans la version développeur d'un projet de site pour voir ce qui se passe pendant qu'un utilisateur interagit avec la page.

Diverses options sur la façon d'inclure cette bibliothèque se trouvent dans son fichier README.md sur GitHub. Le moyen le plus simple consiste à ajouter le script suivant. Il est modifié pour afficher les valeurs sur la durée de vie de la page dans le <head> du modèle principal :

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Notez que le calcul Cumulative Layout Shift (CLS) et Largest Contentful Paint (LCP) est disponible uniquement pour les navigateurs basés sur Chromium, y compris Chrome, Opera, Brave (désactivez Brave Shields pour faire fonctionner la bibliothèque) et la plupart des autres navigateurs modernes, à l'exception de Firefox. , basé sur un moteur Mozilla, et le navigateur Safari d'Apple.

Après avoir ajouté le script et rechargé la page, ouvrez les outils de développement du navigateur et passez à l'onglet Console.

Pour voir comment ces valeurs sont calculées pour la version mobile, passez à l'appareil mobile à l'aide de la barre d'outils Appareil. Pour y accéder, cliquez sur le bouton Basculer la barre d'outils de l'appareil dans les outils de développement de votre navigateur.

Cela aidera à identifier les problèmes. Le développement de la ligne dans la console affichera des détails sur ce qui a déclenché le changement de score.

La plupart du temps, les conseils automatiques pour les autres scores suffisent pour avoir une idée sur la façon de les améliorer. Cependant, CLS change après le chargement de la page avec les interactions de l'utilisateur, et il se peut qu'il n'y ait tout simplement aucune recommandation, en particulier pour les applications d'une seule page. Vous pouvez voir un score parfait de 100 dans la section Diagnostiquer les problèmes de performances, même si votre page ne réussit pas l'évaluation des facteurs pris en compte par le moteur de recherche.

Pour ceux d'entre nous aux prises avec le CLS, cela sera utile. Développez l'enregistrement de journal, puis les entrées, l'entrée spécifique, les sources, la source spécifique et comparez currentRect avec previousRect :

Maintenant que nous pouvons voir ce qui a changé, nous pouvons identifier des moyens de le réparer.

Réduction du décalage de mise en page cumulé

De tous les scores, CLS est le plus difficile à saisir, mais il est crucial pour l'expérience utilisateur. Un changement de disposition se produit lorsqu'un élément est ajouté au modèle d'objet de document (DOM) ou que la taille ou la position d'un élément existant est modifiée. Cela provoque le déplacement des éléments situés en dessous de cet élément et l'utilisateur a l'impression qu'il ne peut pas contrôler ce qui se passe, ce qui l'oblige à quitter le site Web.

Il est relativement facile de gérer cela sur une simple page HTML. Définissez les attributs de largeur et de hauteur des images afin que le texte en dessous ne soit pas décalé pendant leur chargement. Cela résoudra probablement le problème.

Si votre page est dynamique et que les utilisateurs l'utilisent comme avec une application, envisagez les étapes suivantes pour résoudre les problèmes de CLS :

1. Configurez la page pour afficher le contenu 500 millisecondes après que l'utilisateur a cliqué sur un bouton ou un lien sans déclencher le CLS.
2. Modifiez les paramètres qui ne provoquent pas de décalage des autres éléments DOM : arrière-plan, couleur, etc.
3. Assurez-vous que les autres éléments ne se déplacent pas lors de la modification de la taille ou de la position d'un élément.

Des recommandations plus détaillées sont disponibles sur la page Google Developers Optimize CLS.

Comment 500 millisecondes peuvent réduire le CLS

Pour illustrer comment utiliser le seuil de 500 millisecondes, nous utiliserons un exemple impliquant un téléchargement d'image.

Normalement, lorsqu'un utilisateur télécharge un fichier, le script ajoute un élément <img> au DOM, puis le navigateur client télécharge l'image depuis le serveur. La récupération d'une image à partir d'un serveur peut prendre plus de 500 millisecondes et peut entraîner un changement de mise en page.

Mais il existe un moyen d'obtenir l'image plus rapidement car elle se trouve déjà sur l'ordinateur client, et donc de créer l'élément <img> avant la fin du délai de 500 millisecondes.

Voici un exemple universel sur ECMAScript pur sans bibliothèques qui fonctionnera sur la plupart des navigateurs modernes :

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Comme nous l'avons vu précédemment, la résolution de ces types de problèmes peut nécessiter une agilité mentale. Avec les appareils mobiles, en particulier ceux bon marché, et avec un Internet mobile lent, l'art de l'optimisation des performances des années 90 devient utile et les approches de programmation Web à l'ancienne peuvent inspirer notre technique. Les outils de débogage de navigateur modernes vous aideront à cela.

Mettre à jour la console de recherche Google

Après avoir trouvé et éliminé les problèmes, le moteur de recherche de Google peut prendre un certain temps pour enregistrer les modifications. Pour mettre à jour les résultats un peu plus rapidement, informez Google Search Console que vous avez résolu les problèmes.

Sélectionnez la page sur laquelle vous travaillez à l'aide de la zone de propriété Rechercher dans le coin supérieur gauche. Accédez ensuite à Core Web Vitals dans le menu hamburger de gauche :

Cliquez sur le bouton Ouvrir le rapport en haut à droite du rapport mobile ou de bureau. (Si vous rencontrez des problèmes avec les deux, n'oubliez pas de répéter les mêmes actions pour le deuxième rapport plus tard.)

Ensuite, accédez à la section Détails sous le graphique et cliquez sur la ligne avec l'avertissement d'échec de validation.

Cliquez ensuite sur le bouton Voir les détails pour ce problème.

Et enfin cliquez sur Démarrer une nouvelle validation.

Ne vous attendez pas à des résultats immédiats. La validation peut prendre jusqu'à 28 jours.

L'optimisation est une lutte continue

L'optimisation SEO est un processus continu, et il en va de même pour l'optimisation des performances. Au fur et à mesure que votre audience augmente, les serveurs reçoivent plus de demandes et les réponses deviennent plus lentes. L'augmentation de la demande signifie généralement que de nouvelles fonctionnalités sont ajoutées à votre site et qu'elles peuvent affecter les performances.

Lorsqu'il s'agit de l'aspect coût/bénéfice de l'optimisation des performances, il est nécessaire de trouver le juste équilibre. Les développeurs n'ont pas besoin d'obtenir les meilleures valeurs sur tous les sites, tout le temps. Concentrez-vous sur ce qui cause les problèmes de performances les plus importants ; vous obtiendrez des résultats plus rapidement et avec moins d'effort. Les grandes entreprises peuvent se permettre d'investir beaucoup de ressources et de battre tous les records, mais ce n'est pas le cas des petites et moyennes entreprises. En réalité, une petite entreprise n'a probablement besoin que d'égaler ou de surpasser les performances de ses concurrents, et non des poids lourds de l'industrie comme Amazon.

Les propriétaires d'entreprise doivent comprendre pourquoi l'optimisation du site est essentielle, quels aspects du travail sont les plus importants et quelles compétences rechercher chez les personnes qu'ils embauchent pour le faire. Les développeurs, pour leur part, doivent garder à l'esprit les performances à tout moment, en aidant leurs clients à créer des sites qui non seulement se sentent rapides pour les utilisateurs finaux, mais obtiennent également de bons résultats dans PageSpeed ​​Insights.