Il y a quelque temps, Google a fait sensation en annonçant un nouveau facteur de classement pour 2021: l’expérience des pages. L’expérience utilisateur a toujours été un élément essentiel de la construction du meilleur site, mais maintenant, elle jouera un rôle encore plus important en vous aidant à créer des sites impressionnants pour vos clients. Tout cela est alimenté par de nouvelles métriques, avec au centre: les Core Web Vitals. Il est temps de rencontrer LCP, FID et CLS!

Table des matières

La mise à jour de l’expérience de page Google optimisée par Web Vitals

Nous en avons parlé expérience de la page mettre à jour avant, mais dans cet article, nous aimerions jeter un autre regard sur ces Core Web Vitals. En général, les mesures de vitesse du site ont tendance à être difficiles à comprendre et à confondre. De plus, ils ont tendance à changer quelque peu chaque fois que vous testez votre site. Vous n’obtenez pas toujours les mêmes scores. Il est donc facile de dire qu’il suffit de regarder certaines statistiques dans l’espoir qu’elles deviennent vertes.

De toutes les mesures possibles, Google identifie désormais trois soi-disant Core Web Vitals. Ce sont les points focaux de Google pour l’année à venir. Chaque année, Google peut ajouter ou modifier ces statistiques au fur et à mesure qu’elles les évaluent sur une plus longue période.

Les Web Vitals de base sont le sous-ensemble des Web Vitals qui s’appliquent à toutes les pages Web, doivent être mesurés par tous les propriétaires de sites et seront présentés dans tous les outils Google. Chacun des Core Web Vitals représente une facette distincte de l’expérience utilisateur, est mesurable sur le terrain et reflète l’expérience réelle d’un résultat critique centré sur l’utilisateur.

web.dev/vitals/

Les trois piliers de l’expérience des pages

Pour l’instant, les trois piliers de l’expérience en page sont:

  • Performances de chargement (à quelle vitesse les éléments apparaissent-ils à l’écran?)
  • Réactivité (à quelle vitesse la page réagit-elle aux commentaires des utilisateurs?)
  • Stabilité visuelle (les objets se déplacent-ils à l’écran pendant le chargement?)

Pour mesurer ces aspects essentiels de expérience utilisateur, Google a choisi trois mesures correspondantes – alias Core Web Vitals:

  • LCP, la plus grande peinture au contenu: Cela mesure le temps qu’il faut pour que le plus grand contenu apparaisse à l’écran. Cela peut être une image ou un bloc de texte. Une bonne note donne aux utilisateurs le sentiment que le site se charge rapidement. Un site lent peut entraîner de la frustration.
  • FIS, ou premier délai d’entrée: Cette mesure le temps qu’il faut au site pour réagir à la première interaction d’un utilisateur. Cela pourrait être un tap sur un bouton, par exemple. Une bonne note donne ici à l’utilisateur le sentiment qu’un site réagit rapidement aux entrées et, par conséquent, est réactif. Lentement, encore une fois, conduit à la frustration.
  • CLS ou Content Layout Shift: Cela mesure la stabilité visuelle de votre site. En d’autres termes, les éléments se déplacent-ils à l’écran pendant le chargement – et à quelle fréquence cela se produit-il? Rien de plus frustrant que d’essayer de cliquer sur un bouton lorsqu’une annonce à chargement lent apparaît à cet endroit.

Différents outils utilisent différentes métriques

Chaque outil d’expérience de page utilise un certain nombre de valeurs vitales Web, recueillies auprès de diverses sources. Étant donné que chaque outil a un objectif différent, les mesures utilisées diffèrent d’un outil à l’autre. Le dénominateur commun, cependant, sont les fondamentaux du Web, car Google les utilise dans chaque outil d’expérience de page dont il dispose.

Mais que signifient tous ces chiffres? Que devez-vous rechercher sur votre site? Et quand votre site est-il assez rapide? Quand ai-je une bonne note? Vous pouvez poser un million de questions sur ces statistiques. Et tandis que Google tente de combler l’écart entre la compréhension et l’amélioration, cela continue d’être un sujet complexe. Mesure vitesse du site et l’expérience utilisateur est difficile – il y a tellement de choses à prendre en compte.

Quels sont ces principaux principes vitaux du Web?

Les Core Web Vitals ne fonctionnent pas isolément, car il existe de nombreuses autres mesures. Certains sont basés sur des tests de laboratoire contrôlés, tandis que d’autres sont des mesures qui ne fonctionnent qu’avec des données de terrain. Après avoir fait beaucoup de recherches, Google a déterminé un nouvel ensemble appelé Web Vitals. Il s’agit d’une combinaison de mesures que nous connaissons déjà, ainsi que d’un ensemble de nouvelles. Les trois Core Web Vitals sont les plus importants et Google demande spécifiquement aux propriétaires de sites de garder un œil sur ces scores et de les améliorer là où vous le pouvez.

LCP: la plus grande peinture contentieuse

Le plus grand contenu de peinture mesure le point auquel le plus grand élément de contenu apparaît à l’écran. Gardez à l’esprit qu’il ne mesure pas le temps nécessaire au chargement complet de votre page, mais il examine simplement le moment où la partie la plus importante se charge.

Si vous avez une page Web simple avec juste un morceau de texte et une grande image, cette grande image sera considérée comme le LCP. Étant donné qu’il s’agit du plus gros contenu à charger dans le navigateur, il est destiné à faire bonne impression. En accélérant le chargement, votre site peut apparaître beaucoup plus rapidement. Ainsi, parfois, cela pourrait être aussi simple que d’optimiser cette image elle-même.

Dans le passé, il y avait des métriques comme First Contentful Content, qui mesuraient le temps lorsque le premier élément de contenu apparaissait à l’écran et signifiait quelque chose pour l’utilisateur. Mais, contrairement à ce que son nom l’indique, la métrique FMC ne pouvait souvent pas comprendre quelle était la chose la plus significative qui apparaissait à l’écran. Des métriques complexes conduisent à des données inutiles.

Le plus grand Contentful Paint est facile à comprendre: c’est simplement le temps qu’il faut pour que le plus grand élément apparaisse à l’écran. Ces éléments peuvent inclure des images, des vidéos ou d’autres types de contenu.

Que souhaitez-vous savoir

Maintenant que vous savez ce qu’est le LCP, vous pouvez commencer à l’optimiser. Selon Google, vous devriez viser le LCP à se produire dans les 2,5 premières secondes du chargement de la page. Tout en moins de 4 secondes doit être amélioré et vous pouvez considérer que tout cela fonctionne mal.

Un aperçu du score pour LCP

Le LCP est également dynamique, car la première chose qui se charge peut ne pas être immédiatement cette grande image. Le LCP passe à cette grande image lorsqu’elle apparaît à l’écran.

Voici une image de Google qui explique comment cela fonctionne:

Cette image de Google vous donne une bonne idée de la façon dont le LCP est mesuré

Sur la gauche, vous voyez d’abord le logo et la ligne ‘Histoires visuelles’ apparaissent. Dans le deuxième écran, le gros titre apparaît comme un candidat pour LCP. Dans le dernier écran, cependant, vous voyez que la grande image dépasse l’en-tête en tant que LCP. Si vous n’avez qu’un seul gros contenu, cela pourrait être le LCP tout le temps.

Si vous regardez le processus de chargement dans l’image, vous pouvez facilement comprendre pourquoi il s’agit d’une mesure si pratique. Vous pouvez facilement repérer ce qu’est le LCP et optimiser le chargement de cet élément.

Google propose plusieurs outils pour vous aider à trouver tous ces éléments. PageSpeed ​​Insights, par exemple, offre une multitude de données sur Web Vitals, ainsi que de nombreux conseils pour améliorer votre page. Si nous exécutons yoast.com sur PageSpeed ​​Insights, nous obtenons un certain nombre de scores et en dessous de ce score, des conseils. Dans notre cas, le LCP était moyen et c’est dû au fait qu’il s’agit d’une grande image. Dans la capture d’écran ci-dessous, vous pouvez voir que PageSpeed ​​Insights a correctement identifié cet élément. Maintenant, vous maintenant ce qu’il faut améliorer!

PageSpeed ​​Insights identifie la grande image d’en-tête comme LCP sur notre site

Selon Google, le LCP est affecté par un certain nombre de facteurs:

  • temps de réponse du serveur lents: optimisez donc votre serveur, utilisez un CDN, des ressources de cache, etc.
  • JavaScript et CSS bloquant le rendu: minimisez ainsi votre CSS, différez les CSS non critiques et les CSS critiques en ligne.
  • ressources à chargement lent: optimisez donc vos images, préchargez les ressources, compressez les fichiers texte, etc.
  • problèmes sur le rendu côté client: minimisez donc le JavaScript critique, utilisez le rendu côté serveur et le pré-rendu.

Google a plus de documentation sur le fond de LCP et comment l’optimiser.

FID: premier délai d’entrée

Le premier délai d’entrée mesure le temps nécessaire au navigateur pour répondre à la première interaction de l’utilisateur. Plus le navigateur réagit rapidement, plus la page sera réactive. Si vous cherchez à offrir à vos utilisateurs une expérience positive – qui ne l’est pas? -, alors vous devez travailler sur la réactivité de vos pages.

Des retards se produisent lorsque le navigateur effectue encore d’autres travaux en arrière-plan. Donc, il a chargé la page et tout semble dandy. Mais lorsque vous appuyez sur ce bouton, rien ne se passe! C’est une mauvaise expérience et cela mène à la frustration. Même s’il y a juste un petit retard, votre site pourrait se sentir lent et ne pas répondre.

Un navigateur doit faire beaucoup de travail et parfois il a besoin de garer certaines requêtes, pour y revenir plus tard. Il ne peut pas tout faire en même temps. Comme nous construisons des sites de plus en plus complexes – souvent alimentés par JavaScript – nous demandons beaucoup aux navigateurs. Pour accélérer le processus entre l’obtention du contenu à l’écran et le rendre interactif, nous devons nous concentrer sur le FID.

Le FID mesure toutes les interactions qui se produisent pendant le chargement de la page. Ce sont des actions d’entrée comme les tapotements, les clics et les pressions sur les touches, mais pas les interactions comme le zoom et le défilement. Les nouvelles statistiques de Google appellent un FID de moins de 100 ms pour apparaître réactif. Tout ce qui se situe entre 100 ms et 300 ms doit être amélioré et vous pouvez voir quoi que ce soit au-dessus de cela comme peu performant.

Après avoir testé le FID, vous obtenez un score et vous pouvez travailler à partir de là

Que souhaitez-vous savoir

Une des choses dont vous devez vous souvenir est que vous ne pouvez pas mesurer le FID s’il n’y a pas d’interaction avec l’utilisateur. Cela signifie que Google ne peut pas simplement prédire le FID sur la base des données dont il dispose en laboratoire – il a besoin de données d’utilisateurs réels ou de données dites de terrain. Cela signifie également que ces données sont moins contrôlables en tant que données de laboratoire car elles collectent des données auprès des utilisateurs de tous types d’appareils et de ceux qui les utilisent de différentes manières et dans différents environnements. C’est l’une des raisons pour lesquelles vous voyez parfois des changements de données.

Si vous cherchez à améliorer vos scores, vous trouverez souvent que JavaScript est le coupable des mauvaises notes. JavaScript nous aide à créer des interactions impressionnantes, mais il peut également conduire à des sites Web lents avec du code complexe. Souvent, le navigateur ne peut pas répondre aux entrées pendant qu’il exécute JavaScript. Si vous travaillez sur l’amélioration de votre code JavaScript et sa gestion, vous travaillez automatiquement sur l’amélioration de vos scores d’expérience de page.

C’est la partie la plus difficile, cependant. La plupart des sites peuvent gagner beaucoup en réduisant le temps nécessaire à l’exécution de JavaScript, en fractionnant les tâches complexes ou en supprimant le JavaScript inutilisé.

Par exemple, yoast.com a un assez bon score mais ce n’est pas parfait. Il existe encore des processus qui nous interdisent d’obtenir des scores parfaits. Certains d’entre eux sont compliqués à corriger ou nous avons simplement besoin de ce code pour que notre site fonctionne correctement. Vous devriez regarder vos scores et déterminer ce que vous pouvez faire. Essayez de trouver les améliorations les plus faciles à réaliser ou entraînez les plus grands sauts de performances.

Il y a toujours des améliorations à apporter, mais vous devez décider si cela en vaut la peine – ou même possible

Lire Google’s documentation sur FID et comment optimiser le FID.

CLS: changement de mise en page de contenu

Le troisième Core Web Vital est un tout nouveau: Content Layout Shift. Cette mesure tente de déterminer la façon dont les éléments «stables» se chargent sur votre écran. Il examine la fréquence à laquelle les objets sautent pendant le chargement et la quantité. Vous pouvez imaginer qu’un bouton se charge parfois à l’écran, invitant les utilisateurs à cliquer dessus. En arrière-plan, cependant, il reste une grande zone de contenu en cours de chargement. Le résultat? Lorsque le contenu se charge enfin complètement, le bouton enfonce un peu – tout comme vous voulez appuyer sur ce bouton. Encore une fois, la frustration monte!

Ces changements de mise en page se produisent souvent avec les publicités. Maintenant, les publicités sont une bouée de sauvetage pour de nombreux sites, mais elles sont souvent chargées si mal qu’elles frustrent les utilisateurs. De plus, de nombreux sites complexes ont tellement de choses à faire qu’ils sont lourds à charger et que le contenu est chargé chaque fois qu’il est prêt. Cela peut également entraîner un contenu ou des CTA qui sautent à l’écran, ce qui laisse de la place pour un chargement plus lent du contenu.

Prenez CNN.com, par exemple. Les sites Web d’actualités sont généralement très complexes et lents à charger, et CNN ne fait pas exception. Il obtient de très mauvais résultats lors d’un test PageSpeed ​​Insights. Si vous regardez les problèmes et les conseils correspondants plus bas dans la page, vous remarquerez qu’au moins cinq éléments en mouvement ont été trouvés au moment de la rédaction. Lors du chargement de cette page, cela entraîne de nombreux éléments qui sautent et il faut un certain temps pour qu’elle se stabilise et soit utile. Et parce que les utilisateurs ne sont pas toujours aussi patients, ils essaient de cliquer sur un bouton au moment où il apparaît à l’écran – pour le manquer, car une grande annonce apparaît à cet endroit.

CNN.com ne marque pas trop bien dans PageSpeed ​​Insights. Vous pouvez voir qu’il a trouvé cinq éléments mobiles qui contribuent au CLS

Que souhaitez-vous savoir

Le décalage de disposition cumulative compare les images pour déterminer le mouvement des éléments. Il prend tous les points auxquels les changements de disposition se produisent et calcule la gravité de ces mouvements. Google considère que tout ce qui est inférieur à 0,1 est bon, tandis que tout ce qui est compris entre 0,1 et 0,25 doit fonctionner. Vous pouvez considérer tout ce qui dépasse 0,25 comme médiocre.

Les scores pour CLS

Bien sûr, le score ne tient compte que des changements inattendus. Si un utilisateur clique sur le bouton de menu et qu’un menu dépliant apparaît, cela ne compte pas comme un changement de mise en page. Mais si ce bouton appelle un grand changement dans la conception, vous devez vous assurer que cela reste clair pour l’utilisateur.

J’ai déjà mentionné que les publicités en sont l’un des principaux responsables. Ils sont souvent en JavaScript et ne sont pas bien optimisés, en plus ils sont servis depuis un serveur externe. La lenteur est ajoutée à chaque étape et vous devez travailler dur pour que vos annonces apparaissent au bon endroit à tout moment. Mais il y a un autre élément qui est responsable des grands changements de mise en page: les images.

Les développeurs ne spécifient pas toujours la largeur et la hauteur d’une image dans le code et laissent au navigateur le soin de déterminer comment l’image doit apparaître à l’écran. Sur une page contenant des images et du texte, le texte apparaîtra d’abord à l’écran, suivi des images. Si le développeur n’a pas réservé d’espace pour ces images, la partie supérieure de la page de chargement sera remplie de texte, invitant l’utilisateur à commencer la lecture. Les images, cependant, se chargent plus tard et apparaissent à l’endroit où le texte était en premier. Cela pousse le texte vers le bas, agitant l’utilisateur. Donc, spécifiez toujours la largeur et la hauteur des images dans le CSS pour réserver un emplacement pour les images à charger.

Google a beaucoup d’expérience documentation sur CLS, plus comment optimiser pour CLS.

Il existe de nombreux outils pour vous aider à surveiller Web Vitals et à améliorer les performances de votre site. J’en ai mentionné beaucoup dans le premier Expérience de la page post que j’ai écrit il y a quelque temps. Vous pouvez les voir répertoriés ici. Ici, je voudrais souligner les plus importants:

  • PageSpeed ​​Insights: PageSpeed ​​Insights est devenu un outil de mesure à service complet avec des données de terrain et de laboratoire. De plus, vous obtenez des conseils sur ce qu’il faut améliorer.
  • Phare: Google a conçu Lighthouse comme un outil pour auditer les PWA, mais c’est maintenant un excellent outil pour surveiller les performances. Il a plusieurs audits que PageSpeed ​​Insights n’a pas et il a même quelques vérifications SEO.
  • Rapport sur les principaux paramètres Web de Search Console: Vous pouvez désormais obtenir des informations sur votre site directement depuis la Search Console! Idéal pour avoir une idée de la performance de votre site.

Ce sont les principaux principes vitaux du Web

En 2021, Google mettra à jour ses algorithmes pour intégrer un nouveau facteur de classement: l’expérience de page. Pour mesurer l’expérience des pages, Google a développé un nouvel ensemble de mesures appelé Web Vitals. Dans ces Web Vitals, vous pouvez trouver trois mesures de base: la plus grande peinture contentieuse, le premier délai d’entrée et le changement de disposition du contenu. Ceux-ci sont synonymes de performances, de réactivité et de stabilité visuelle – les trois piliers de la mise à jour de l’expérience de page de Google.

Continuez à vous concentrer sur vos utilisateurs et créez un site génial!


Source link

%d blogueurs aiment cette page :