Les éléments vitaux Web de base constitueront désormais les mesures les plus importantes grâce auxquelles Google évaluera les performances du site Web d'un éditeur.

Expérience de l'utilisateur est l'un des aspects clés pour qu'un site Web domine les pages de résultats des moteurs de recherche. L'époque où les éditeurs pouvaient classer leurs pages Web en fonction du bourrage de mots clés est révolue. A chaque passage Mise à jour de l'algorithme Google Broad Core, les résultats de recherche sont de plus en plus axés sur la satisfaction de l'intention et de l'expérience de l'utilisateur. Par conséquent, les éditeurs doivent améliorer les performances globales de leur site Web pour garantir une expérience utilisateur positive. 

Google dispose d'une variété d'outils pour mesurer les performances d'une page. Mais certains éditeurs peuvent trouver difficile de les utiliser efficacement en raison de leur complexité technique. Afin de faciliter un peu les choses pour les éditeurs, les développeurs et les spécialistes du marketing, Google a récemment lancé un ensemble de mesures de performances appelées Vitaux Web. 

Parmi les différents Web Vitals figurent Vitaux Web de base, les métriques les plus importantes. Dans ce guide complet, nous allons parler de Core Web Vitals et de leur importance, de la manière dont les éditeurs peuvent améliorer les scores de ces mesures et de leur avenir dans l'industrie des technologies publicitaires. 

Les éléments vitaux Web de base constitueront désormais les mesures les plus importantes grâce auxquelles Google évaluera les performances du site Web d'un éditeur.

Expérience de l'utilisateur est l'un des aspects clés pour qu'un site Web domine les pages de résultats des moteurs de recherche. L'époque où les éditeurs pouvaient classer leurs pages Web en fonction du bourrage de mots clés est révolue. A chaque passage Mise à jour de l'algorithme Google Broad Core, les résultats de recherche sont de plus en plus axés sur la satisfaction de l'intention et de l'expérience de l'utilisateur. Par conséquent, les éditeurs doivent améliorer les performances globales de leur site Web pour garantir une expérience utilisateur positive.

Google dispose d'une variété d'outils pour mesurer les performances d'une page. Mais certains éditeurs peuvent trouver difficile de les utiliser efficacement en raison de leur complexité technique.

Afin de faciliter un peu les choses pour les éditeurs, les développeurs et les spécialistes du marketing, Google a récemment lancé un ensemble de mesures de performances appelées Vitaux Web.

Parmi les différents Web Vitals figurent Vitaux Web de base, les métriques les plus importantes. Dans ce blog, nous allons parler de Core Web Vitals et de leur importance, de la manière dont les éditeurs peuvent améliorer les scores de ces mesures et de leur avenir dans l'industrie des technologies publicitaires.

Après de nombreuses recherches, Google a mis au point trois mesures hautement prioritaires lorsqu'il s'agit de mesurer la manière dont les utilisateurs interagissent avec un site Web : Chargement, interactivité et stabilité visuelle.

Les métriques qui composent Core Web Vitals sont :

1. La plus grande peinture de contenu (LCP) - chargement

2. Premier délai d'entrée (FID) - interactivité

3. Décalage de mise en page cumulatif (CLS) - stabilité visuelle

Comme cela a déjà été mentionné, ces métriques font partie d'un concept plus large nommé Web Vitals qui se concentre également sur la mesure de l'expérience utilisateur. 

Core Web Vitals quantifie essentiellement la toute première impression que l'utilisateur obtient après avoir ouvert un site Web. En utilisant ces métriques, les éditeurs peuvent vérifier comment les utilisateurs interagissent avec leurs sites. Cela profite aux éditeurs, car si l'engagement des utilisateurs est élevé, les éditeurs ont plus d'opportunités d'optimiser leurs revenus publicitaires. 

Examinons en détail les trois Core Web Vitals.

Lighthouse a présenté la plus grande peinture de contenu comme l'une des principales mesures de performance en 2020

Plus tard, Google a annoncé que LCP était un facteur de classement important et l'a intégré à Core Web Vitals. Comme un Cœur Web Vital métrique, LCP représente 25 % du score de performance, ce qui en fait l'une des métriques les plus importantes à optimiser.

Dans cette section, nous examinons en détail la plus grande peinture de contenu et apprenons également comment optimiser les meilleurs scores LCP :

Quelle est la plus grande peinture de contenu ?

LCP mesure le temps qu'il faut à une page Web pour afficher le « plus grand élément de contenu » disponible sur la page. Ici, le contenu "le plus volumineux" pourrait être n'importe quoi, y compris :

Un "élément de contenu" est tout élément HTML, tel que : 

• Un élément d'image

• Un élément vidéo

• Un élément SVGUn élément avec l'image d'arrière-plan chargée via la fonction URL 

• , , , , ou d'autres éléments de niveau bloc

Selon Google:

"Le LCP est une métrique importante centrée sur l'utilisateur pour mesurer la vitesse de chargement perçue, car il marque le point dans la chronologie de chargement de la page lorsque le contenu principal de la page a probablement été chargé - un LCP rapide aide à rassurer l'utilisateur sur l'utilité de la page."

Première peinture de contenu par rapport à la plus grande peinture de contenu

Nous avons récemment publié un article de 'Première peinture contentieuse,' et certains d'entre vous peuvent se demander en quoi cela est différent de 'La plus grande peinture riche en contenu.' Donc, voici une explication simple pour la même chose :

Première peinture contente : Le FCP mesure le temps qu'une page prend entre le chargement initial et le premier contenu affiché à l'écran.

La plus grande peinture de contenu : LCP mesure le temps de rendu de la plus grande image ou du plus grand bloc de texte visible dans la fenêtre d'affichage, par rapport au moment où la page a commencé à se charger.

Qu'est-ce qu'un bon score LCP ?

Selon les directives de Google, un bon score LCP doit être inférieur à 2.5 secondes. Cela garantit une bonne UX.

Les seuils LCP sont les suivants :

Bon: LCP de 1200 millisecondes ou moins (rien à faire ici)

A besoin d'amélioration: LCP entre 1200 et 2400 millisecondes

Mauvais = LCP supérieur à 2400 millisecondes.

Comment mesurer le plus grand score de peinture de contenu ?

Les webmasters ou les éditeurs peuvent effectuer un test Largest Contentful Paint à l'aide des outils suivants :

1. Rapport sur l'expérience utilisateur Chrome;

2. PageSpeed ​​Insights;

3. Console de recherche (rapport Core Web Vitals).

4. Chrome DevTools.

5. Lighthouse.

Le LCP étant une métrique approuvée par Google, nous pouvons facilement trouver le score LCP dans tous ces outils. 

Comment améliorer le temps de First Contentful Paint (FCP):

Maintenant que nous avons compris ce qu'est le FCP et pourquoi est-ce important, regardons comment on peut améliorer le timing du FCP :

Éliminer les ressources bloquant le rendu :

Les ressources de blocage de rendu sont les fichiers qui doivent être rendus sur un site Web. Ceux-ci peuvent inclure des polices, des fichiers CSS, JavaScriptbauen HTML. Ces fichiers sont appelés "blocage du rendu" car ils ont priorité sur les autres éléments de la page (par exemple, les images, le texte ou tout autre contenu destiné à l'utilisateur). 

Ce délai crée une augmentation soudaine du LCP, car les fichiers de blocage du rendu sont généralement de grande taille et ne contiennent même pas de contenu de site. 

Le temps LCP peut être réduit si vous supprimez les ressources de rendu du chemin de rendu critique, différez les ressources non critiques ou supprimez le JS inutile.

Supprimer le CSS inutile:

Si vous avez des fichiers dans vos feuilles de style qui ne sont pas utilisés, mais qui prennent beaucoup de vitesse, il est inutile de les conserver. Par conséquent, tout code inutilisé ou ancien doit être supprimé afin qu'il n'affecte pas le temps de chargement de votre site. 

Minifier HTML, JavaScript et CSS:

La minimisation de HTML, JavaScript et CSS peut réduire considérablement le temps LCP de votre site Web. La minification supprime tous les caractères supplémentaires tels que les espaces des fichiers CSS, HTML et JavaScript de votre site. 

Bien que l'espacement améliore la lisibilité, les navigateurs n'en ont pas besoin. Ces espaces occupent en fait des octets et les minimiser réduirait la taille de la page et améliorerait le temps de peinture du premier contenu.

Optimiser la taille de l'image:

Utilisez toujours des images de bonne taille. Vous pouvez utiliser un plugin d'optimisation d'image comme SSmush ou Hummingbird pour réduire la taille de l'image. La réduction de la taille évite la surcharge, qui peut générer un LCP élevé. Vous pouvez également utiliser un CDN d'image pour réduire le temps LCP. 

Choisissez un bon service d'hébergement:

Votre service d'hébergement impacte également le temps de chargement des pages. Essayez donc un bon hébergeur qui propose une infrastructure adaptée à la taille et au volume d'accès de votre site.

Bottomline:

Google considère La plus grande peinture riche en contenu être une partie pertinente de Éléments essentiels du Web. C'est donc un paramètre essentiel à évaluer et les sites doivent y obtenir un bon score.

Étant donné que le LCP est lié au temps de chargement de la page, il influence directement la façon dont Google classe un site sur la page de résultats. Expérience de l'utilisateur est un paramètre fondamental pour que les sites soient trouvés sur le web. C'est pourquoi il ne suffit pas d'avoir des produits attrayants, une bonne UX ou un contenu de qualité. Un bon score LCP est non seulement favorable à l'utilisateur, mais garantit également que Google classera bien le contenu.

En 2019, Google a annoncé qu'il classerait les sites Web sur la base de deux autres mesures de performance : First Contentful Paint et First Input Delay. Plus tard, Google a introduit trois Vitaux Web de base: Premier délai d'entrée, Décalage de mise en page cumulé.

Dans cette section, nous parlerons de First Contentful Paint car il a continué d'être une mesure importante de l'expérience utilisateur et représente le score de performance global d'un site Web.

Qu'est-ce que le premier score de contenu ?

La première peinture de contenu d'un site Web correspond au moment où le navigateur récupère et affiche le premier élément DOM de la page. Les éléments canvas, images ou tex, les éléments non blancs et les SVG sont considérés comme du contenu DOM.

En termes simples, le FCP est le temps qu'il faut à un utilisateur de site Web pour voir tout contenu sur son navigateur une fois qu'il a cliqué sur le lien du site Web. Par conséquent, un FCP extrêmement rapide garantit que les utilisateurs trouvent quelque chose d'utile dès qu'ils arrivent sur la page.

Dans cette section, nous parlerons de First Contentful Paint car il a continué d'être une mesure importante de l'expérience utilisateur et représente le score de performance global d'un site Web.

Dans les parties précédentes de ce guide, vous avez peut-être rencontré le terme « premier délai d'entrée ». Si vous l'avez lu, vous vous demandez peut-être quelle est la différence entre First Contentful Paint et First Input Delay ?

DDifférence entre First Contentful Paint et First Input Delay :

Avez-vous déjà rencontré une page où le contenu de la page change soudainement ? Sans avertissement, le texte bouge, il y a un espace blanc supplémentaire et vous avez perdu votre place.

Vous avez probablement vécu cette expérience ennuyeuse à cause du "changement de mise en page cumulé". Le changement de mise en page cumulé a été introduit comme mesure de performance par Lighthouse en 2020.

Plus tard, CLS est également devenu l'une des mesures qui composent Core Web Vitals.

Dans cet article de blog, nous apprendrons ce qu'est le Cumulative Layout Shift (CLS), pourquoi il fait partie de la métrique Core Web Vitals, comment cela se produit, comment le mesurer et comment les webmasters peuvent l'optimiser.

Pour les non-initiés, la première peinture correspond à la détection d'un rendu par le navigateur. Ce rendu peut être aussi subtil que la couleur d'arrière-plan :

Avez-vous déjà rencontré une page où le contenu de la page change soudainement ? Sans avertissement, le texte bouge, il y a un espace blanc supplémentaire et vous avez perdu votre place.

Vous avez probablement vécu cette expérience ennuyeuse à cause du "changement de mise en page cumulé". Le changement de mise en page cumulé a été introduit comme mesure de performance par Lighthouse en 2020.

Plus tard, CLS est également devenu l'une des mesures qui composent Core Web Vitals.

Dans cet article de blog, nous apprendrons ce qu'est le Cumulative Layout Shift (CLS), pourquoi il fait partie de la métrique Core Web Vitals, comment cela se produit, comment le mesurer et comment les webmasters peuvent l'optimiser.

Comment mesurer la première peinture contente ?

Les webmasters ou éditeurs peuvent mesurer le First Contentful Paint de leur site web grâce à de multiples outils dont : 

1. Lighthouse

2. WebPageTest

3. Chrome DevTools

4. PageSpeed ​​Insights

5. Rapport sur l'expérience utilisateur Chrome

Comment mesurer la première peinture contente ?

Selon les directives de Google, la première peinture de contenu d'une page Web doit se produire dans les 1.8 secondes. Lorsqu'une page Web se charge dans les 2 secondes, elle garantit une bonne expérience utilisateur aux visiteurs car ils peuvent accéder aux informations plus rapidement. Si la première peinture de contenu d'un site Web prend plus de 3 secondes à se charger, elle est considérée comme lente.

Google classe le timing FCP dans trois catégories différentes :

1. Bon – entre 0 seconde et 1.8 seconde

2. Besoin d'amélioration - entre 1.8 seconde et 3 secondes

3. Médiocre – plus de 3 secondes

Comment améliorer le temps de First Contentful Paint (FCP):

Maintenant que nous avons compris ce qu'est le FCP et pourquoi est-ce important, regardons comment on peut améliorer le timing du FCP :

Éliminer les ressources bloquant le rendu :

Les ressources de blocage de rendu sont les fichiers qui doivent être rendus sur un site Web. Ceux-ci peuvent inclure des polices, des fichiers CSS, JavaScript et HTML. Ces fichiers sont appelés "blocage du rendu" car ils ont priorité sur les autres éléments de la page (par exemple, les images, le texte ou tout autre contenu destiné à l'utilisateur). 

Ce retard crée une augmentation soudaine du FCP puisque les fichiers de blocage de rendu sont généralement de grande taille et qu'ils ne contiennent même pas de contenu de site. Le temps FCP peut être réduit si vous supprimez les ressources de rendu du chemin de rendu critique, différez les ressources non critiques ou supprimez le JS inutile. 

Réduisez le temps de réponse du serveur :

TTFB ou Time to first byte est le temps total qu'il faut à un navigateur pour recevoir le premier octet du contenu d'une page. Si TTFB est inférieur, le timing FCP sera également inférieur. 

FCP = TTFB + Temps de rendu + Temps de chargement du contenu 

Comme vous pouvez le voir, le FCP dépend du TTFB. Par conséquent, l'optimisation du TTFB améliorerait automatiquement le score FCP. Vous pouvez réduire le TTFB en utilisant un CDN de qualité, en activant la mise en cache pour votre site Web et en choisissant un fournisseur d'hébergement rapide. 

Redéplacer CSS inutile

Si vous avez des fichiers dans vos feuilles de style qui ne sont pas utilisés, mais qui prennent beaucoup de vitesse, il est inutile de les conserver. Par conséquent, tout code inutilisé ou ancien doit être supprimé afin qu'il n'affecte pas le temps de chargement de votre site.

Minifier HTML, JavaScript et CSS

La minification de HTML, JavaScript et CSS peut réduire considérablement le temps FCP de votre site Web. La minification supprime tous les caractères supplémentaires tels que les espaces des fichiers CSS, HTML et JavaScript de votre site. Bien que l'espacement améliore la lisibilité, les navigateurs n'en ont pas besoin. Ces espaces occupent en fait des octets et les minimiser réduirait la taille de la page et améliorerait le temps de peinture du premier contenu. 

Étant donné que Google considère la vitesse des pages comme une mesure de performance importante, First Contentful Paint continuera d'être une mesure importante pour les sites Web. Avoir une chronologie FCP faible non seulement permet aux utilisateurs de rester sur votre site, mais améliore également l'expérience utilisateur globale. Nous sommes d'accord, le FCP peut être une mesure difficile à cerner, mais une petite optimisation de la réduction du FCP augmentera certainement l'UX et les temps de chargement globaux de votre site. 

Avez-vous déjà rencontré une page où le contenu de la page change soudainement ? Sans avertissement, le texte bouge, il y a un espace blanc supplémentaire et vous avez perdu votre place.

Vous avez probablement vécu cette expérience ennuyeuse à cause du "changement de mise en page cumulé". Le changement de mise en page cumulé a été introduit comme mesure de performance par Lighthouse en 2020.

Plus tard, CLS est également devenu l'une des mesures qui composent Core Web Vitals.

Dans cet article de blog, nous apprendrons ce qu'est le Cumulative Layout Shift (CLS), pourquoi il fait partie de la métrique Core Web Vitals, comment cela se produit, comment le mesurer et comment les webmasters peuvent l'optimiser.

Comprenons cette métrique de performance en la décomposant :

Cumulatif : cela signifie une augmentation de la quantité

En clôture

À l'heure actuelle, nous conseillons aux éditeurs de se familiariser le plus possible avec Core Web Vitals et Web Vitals. Plus tôt ils apprendront à optimiser leurs sites Web pour offrir la meilleure expérience utilisateur possible, mieux ce sera pour eux lorsque le déménagement de Google aura lieu.

La bonne nouvelle est que les éditeurs peuvent désormais disposer de connaissances quantifiées sur les performances de leurs pages. En plus de cela, ils reçoivent des conseils sur la façon de résoudre les problèmes qui entravent l'expérience utilisateur de leurs pages. Tout cela aidera les éditeurs à améliorer l'engagement des utilisateurs pour leur site Web, à augmenter le trafic et à générer plus de revenus.

Une fois que les éditeurs auront fini de comprendre les détails importants sur Core Web Vitals, ils verront que ces mesures se révéleront d'une grande utilité.