Chrome 88 nouvellement publié ajoute des fonctionnalités pour les développeurs impatients de la prochaine mise à jour “Page experience”, qui ajoutent les mesures relativement nouvelles de Core Web Vitals à tous les signaux préexistants de classement de l’expérience utilisateur.
Les signaux web essentiels mesure plusieurs choses qui sont ensuite rassemblées en trois scores sommaires en tant que Core Web Vitals : Largest Contentful Paint, First Input Delay, et Cumulative Layout Shift.
Chacun d’eux doit être optimisé pour atteindre les seuils de performances (timings) afin d’éviter de souffrir face à des pairs plus performants qui pourraient s'afficher au-dessus de vous dans les classements Google.
2 nouvelles fonctionnalités de note
La première nouvelle fonctionnalité de note pour nous est que Chrome 88 prend maintenant en charge une propriété CSS appelée “aspect-ratio”.
Les règles d’aspect-ratio vous permettent de définir des ratios pour des éléments qui, dans certaines circonstances, peuvent vous aider à optimiser le Cumulative Layout Shift.
À ce jour, vous pouvez définir soit une largeur ou un attribut HTML de hauteur dans une balise d’image, et la plupart des navigateurs vont essayer de calculer l’attribut manquant.
Un concepteur le ferait avec des images variables, telles que celles fournies par les utilisateurs, pour adapter le résultat dans un système de mise en page.
Cette capacité est maintenant disponible pour vous pour appliquer une règle CSS aux images ainsi que d’autres types d’éléments. Entre autres avantages, cette nouvelle règle peut vous aider à mieux planifier les mises en page réactives (responsives) sans avoir à recourir à des “piratages” de calculs de dimension en pourcentage pour obtenir un look de mise en page finale.
Une voie Web Vitals dans Chrome 88 DevTools
L’autre nouvelle fonctionnalité passionnante est que Web Vitals obtient maintenant son propre couloir de rapport dans Chrome 88 DevTools.
Bien que les indicateurs du couloir de chronométrage pour ces mesures (et quelques autres) soient disponibles depuis un certain temps, il y a beaucoup de nouveaux espaces réservés dans le nouveau couloir Web Vitals pour des rapports encore plus détaillés.
En conséquence, les “flags” dans le couloir Web Vitals sont codés en couleur avec le vert en cas de score de succès et le rouge en cas d’échec de franchissement du bon seuil de performance.
Faire survoler votre souris au-dessus d’un flag particulier fait ressortir l’abréviation d’identification du nom métrique et le moment enregistré en millisecondes.
Les couleurs des mesures dans le couloir des chronométrages ne sont pas indicatives d’un score.
Il y a aussi une nouvelle zone de rapports de longues tâches qui peuvent être utilisés pour s’aligner avec les événements de thread principal pour détecter quels scripts sont évalués afin que vous puissiez dépanner ou corriger si vous pouvez optimiser ou éliminer le code.
Afin d’ajouter le nouveau couloir Web Vitals à DevTools, accédez à l’onglet “Performances” et sélectionnez la case à cocher associée.
Vous pouvez le faire même après que les données de rapport ont été collectées au cas où vous exécutez un rapport avant de sélectionner la case à cocher, et vous pouvez fermer Chrome qui se souviendra comment vous avez quitté l’état de la case à cocher après le dernier enregistrement lorsque vous le rouvrirez.
Gardez à l’esprit que n’importe quel score particulier est un résumé d’autres mesures que vous devriez chercher à trouver l’activité précédant ou aligner avec un jalon de score d’échec afin de comprendre ce qui pourrait être à l’origine du problème.
Les couloirs de déclaration réseaux (Networks) et CPU peuvent vous aider à détecter ce qu’ils sont. Vous pouvez trouver des références à des scripts de blocage de rendu pour évaluer et charger des événements de chargement d’image où vous pourriez découvrir la possibilité de les compresser ou de les redimensionner.
Rapports de performance de démarrage à froid
Pour que ces mesures soient les plus précises, vous devrez charger un rapport de performances sans actifs actuellement stockés dans le cache du navigateur. Démarrez un enregistrement et maintenez le bouton “Shift” du clavier appuyé tout en rafraichissant la page dans le navigateur ("shift-refresh'') qui devrait forcer votre navigateur à charger toutes les ressources du réseau.
Vous pouvez également sélectionner le bouton de raffraichissement (reload) dans les “Outils de développement” sous l’onglet "Performances''. Soyez prévenu, cependant, que le rapport résultant ne va pas nécessairement capturer tout ce que vous voulez.
Les deux approches sont valables. Un démarrage à froid avec un processus d’enregistrement ouvert vous permet de décider quand commencer à recueillir des informations avec le "shift-refresh'' et quand traiter le résultat dans le rapport final lorsque vous cliquez pour arrêter le processus d’enregistrement.
Vous avez la capacité de sélectionner, réduire et amplifier les sujets de préoccupation le long de la timeline de déclaration une fois votre rapport chargé. Chrome stocke également un historique des rapports que vous pouvez effacer au moment d’analyser une autre page.
Comme c’est le cas avec tous les signaux de classement, aucun facteur unique ne va augmenter votre score vers la première position dans l’ensemble. Gardez à l’esprit que les sites Web peu performants peuvent toujours bien se classer lorsque le contenu est indexable et est d’une qualité qui attire les utilisateurs de Search.
En ce qui concerne le référencement technique, Core Web Vitals n’est pas du tout une indication que votre contenu est indexable. Cela devrait servir d’avertissement qu’il peut y avoir beaucoup plus à corriger une fois que vous avez atteint d’excellents scores de performance.
La mise à jour de l’Expérience de page à venir dans quelques mois est une raison suffisante pour nous de se soucier de nos scores Core Web Vitals.
Google nous a donné amplement le temps de préparer nos sites pour le changement. En tant que professionnels de l’optimisation, nous recherchons tous les avantages que nous pouvons utiliser pour améliorer les classements et Web Vitals est quelque chose qui améliore sans aucun doute les choses à la fois pour les utilisateurs et les moteurs de recherche.
Pour ouvrir les outils de développement (Dev Tools), cliquez dans le coin supérieur droit de votre navigateur Chrome sur les 3 points verticaux - > sélectionnez “Plus d’outils” -> puis “Outils de développement” qui s'affichera dans une colonne à droite de votre page.
