Souhaitez-vous que votre site Web soit mieux classé sur Google ?

Votre site Web perd du trafic car il prend trop de temps à charger ?

Vous vous demandez comment accélérer votre site et apparaître en haut des SERPs, en même temps ?

Un site Web rapide rend non seulement vos utilisateurs plus heureux et plus susceptibles de convertir, mais peut également vous aider à mieux vous classer dans Google.

En réalité, Google reconnaît la vitesse du site Web comme un facteur de classementen particulier lorsqu’il s’agit de la façon dont il prend en compte les Core Web Vitals de votre site Web.

Votre site réussit-il le test de vitesse de Google ? Vérifiez la vitesse de votre site maintenant →

Dans Core Web Vitals de Google, la vitesse de la plus grande peinture de contenu (LCP) de votre site Web est la mesure de vitesse de site la plus importante – c’est aussi celle avec laquelle la plupart des sites Web ont du mal.

Cet article explique comment tester la vitesse de votre site Web et accélérer le chargement de votre site Web.

Quelle est la plus grande peinture de contenu ?

Le Largest Contentful Paint (LCP) mesure la rapidité avec laquelle le contenu de la page principale apparaît après l’ouverture d’une page Web.

Le jalon LCP marque le moment où un visiteur du site Web peut voir le contenu de la page principale. Plus cela se produit rapidement, plus votre visiteur (et Google) est heureux.

Habituellement, le contenu le plus volumineux d’une page est un élément de texte ou une image.

Ci-dessous, vous pouvez voir que le LCP de ce site Web se produit à 1,6 seconde après l’ouverture de la page Web.

Immédiatement après que l’utilisateur accède à la page, aucun contenu n’est visible.

Après environ une seconde, du texte et une petite image commencent à apparaître lorsque la première peinture de contenu se produit.

Cependant, la grande image sur la page ne s’affiche que 1,6 seconde après le début de la navigation. Ce jalon de rendu est ensuite enregistré comme la plus grande peinture de contenu.

Pourquoi la plus grande peinture de contenu est-elle importante pour le référencement ?

La plus grande peinture de contenu est l’une des trois mesures Core Web Vitals que Google utilise comme facteur de classement.

Si votre site Web est lent à se charger, cela peut entraîner son classement inférieur dans Google.

Google utilise les données d’utilisateurs réels de Chrome pour décider si votre site répond aux critères de référence Core Web Vitals. Certaines de ces données sont également publiées dans le cadre du rapport sur l’expérience utilisateur Chrome (CrUX).

Parmi les trois métriques Core Web Vitals, le LCP est celui avec lequel les sites Web ont le plus de mal. Selon les données agrégées, seuls 49,8 % des sites Web mobiles offrent une bonne expérience de temps de chargement.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Qu’est-ce qu’un bon temps de peinture de contenu le plus long ?

Un bon temps de peinture du plus grand contenu devrait être moins de 2,5 secondes. Si un site Web répond à cette exigence, il obtient une note « Bon ».

Si votre LCP dépasse 4 secondes, cela est considéré comme un score «mauvais», ce qui a le plus grand impact négatif sur les notes.

Les scores entre 2,5 secondes et 4 secondes sont classés comme « à améliorer ».

Comment mesurer la plus grande peinture de contenu de votre site Web

Exécutez un test de vitesse de site Web gratuit pour le savoir. Votre vitesse LCP s’affichera immédiatement.

Les résultats de votre test de vitesse vous indiqueront si :

  • Le seuil LCP est atteint.
  • Vous devez optimiser tout autre Core Web Vital.

Comment la plus grande peinture de contenu est-elle calculée ?

Google examine le 75e centile des expériences : cela signifie que 25 % des visiteurs réels du site Web connaissent des temps de chargement LCP de 3,09 secondes ou plus, tandis que pour 75 % des utilisateurs, le LCP est inférieur à 3,09 secondes.

Dans cet exemple, le LCP de l’utilisateur réel est affiché en 3,09 secondes.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Quels sont les résultats des tests de laboratoire sur mes données Web Vitals ?

Avec ce test de vitesse Web spécifique, vous verrez également les métriques de laboratoire qui ont été collectées dans un environnement de test contrôlé. Bien que ces statistiques n’aient pas d’impact direct sur les classements Google, ces données présentent deux avantages :

  1. Les métriques sont mises à jour dès que vous améliorez votre site Web, tandis que les données en temps réel de Google prendront 28 jours pour être entièrement mises à jour.
  2. Vous obtenez des rapports détaillés en plus des mesures, ce qui peut vous aider à optimiser votre site Web.

De plus, PageSpeed ​​Insights fournit également des données de laboratoire, mais gardez à l’esprit que les données qu’il rapporte peuvent parfois être trompeuses en raison de la limitation simulée qu’il utilise pour émuler une connexion réseau plus lente.

Comment trouvez-vous votre plus grand élément de peinture de contenu ?

Lorsque vous exécutez un test de vitesse de page avec DebugBear, l’élément LCP est mis en surbrillance dans le résultat du test.

Parfois, l’élément LCP peut être une grande image, et d’autres fois, il peut s’agir d’une grande partie de texte.

Que votre élément LCP soit une image ou un morceau de texte, le contenu LCP n’apparaîtra pas tant que votre page n’aura pas commencé à s’afficher.

Par exemple, sur la page ci-dessous, une image d’arrière-plan est responsable de la plus grande peinture.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

En revanche, le LCP de cette page est un paragraphe de texte.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Pour améliorer le Largest Contentful Paint (LCP) de votre site Web, vous devez vous assurer que l’élément HTML responsable du LCP apparaît rapidement.

Comment améliorer la plus grande peinture de contenu

Pour améliorer le LCP, vous devez :

  1. Découvrez quelles ressources sont nécessaires pour faire apparaître l’élément LCP.
  2. Voyez comment vous pouvez charger ces ressources plus rapidement (ou pas du tout).

Par exemple, si l’élément LCP est une photo, vous pouvez réduire la taille de fichier de l’image.

Après avoir exécuté un test de vitesse DebugBear, vous pouvez cliquer sur chaque mesure de performance pour afficher plus d’informations sur la façon dont elle pourrait être optimisée.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Les ressources communes qui affectent le LCP sont :

  • Ressources bloquant le rendu.
  • Images non optimisées.
  • Formats d’image obsolètes.
  • Polices non optimisées.

Comment réduire les ressources bloquant le rendu

Les ressources bloquant le rendu sont des fichiers qui doivent être téléchargés avant que le navigateur puisse commencer à dessiner le contenu de la page à l’écran. Les feuilles de style CSS bloquent généralement le rendu, tout comme de nombreuses balises de script.

Pour réduire l’impact sur les performances des ressources bloquant le rendu, vous pouvez :

  1. Identifiez les ressources qui bloquent le rendu.
  2. Vérifiez si la ressource est nécessaire.
  3. Vérifiez si la ressource doit bloquer le rendu.
  4. Voyez si la ressource peut être chargée plus rapidement, par exemple en utilisant la compression.

La manière facile : Dans la cascade de requêtes DebugBear, les requêtes de ressources bloquant le rendu sont marquées d’une balise « Blocage ».

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Comment hiérarchiser et accélérer les demandes d’images LCP

Pour cette section, nous allons tirer parti du nouvel attribut « fetchpriority » sur les images pour aider les navigateurs de vos visiteurs à identifier rapidement quelle image doit être chargée en premier.

Utilisez cet attribut sur votre élément LCP.

Pourquoi?

Lorsqu’ils regardent simplement le HTML, les navigateurs ne peuvent souvent pas dire immédiatement quelles images sont importantes. Une image peut finir par être une grande image d’arrière-plan, tandis qu’une autre peut être une petite partie du pied de page du site Web.

En conséquence, toutes les images sont initialement considérées comme de faible priorité, jusqu’à ce que la page ait été rendue et que le navigateur sache où l’image apparaît.

Cependant, cela peut signifier que le navigateur ne commence à télécharger l’image LCP qu’assez tard.

La nouvelle norme Web Priority Hints permet aux propriétaires de sites Web de fournir plus d’informations pour aider les navigateurs à hiérarchiser les images et autres ressources.

Dans l’exemple ci-dessous, nous pouvons voir que le navigateur passe beaucoup de temps à attendre, comme l’indique la barre grise.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Nous choisirions cette image LCP pour y ajouter l’attribut « fetchpriority ».

Comment ajouter l’attribut « FetchPriority » aux images

En ajoutant simplement l’attribut fetchpriority= »high » à une balise HTML img, le navigateur donnera la priorité au téléchargement de cette image le plus rapidement possible.

<https://www.searchenginejournal.com/optimize-largest-contentful-paint-debugbear-spcs/471883/photo.jpg" fetchpriority="high" />

Comment utiliser correctement les formats d’image modernes et la taille des images

Les images haute résolution peuvent souvent avoir une taille de fichier importante, ce qui signifie qu’elles prennent beaucoup de temps à télécharger.

Dans le résultat du test de vitesse ci-dessous, vous pouvez le voir en regardant les zones ombrées en bleu foncé. Chaque ligne indique un morceau de l’image arrivant dans le navigateur.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Il existe deux approches pour réduire la taille des images :

  1. Assurez-vous que la résolution de l’image est aussi faible que possible. Envisagez de diffuser des images à différentes résolutions en fonction de la taille de l’appareil de l’utilisateur.
  2. Utilisez un format d’image moderne comme WebP, qui peut stocker des images de la même qualité à une taille de fichier inférieure.

Comment optimiser les temps de chargement des polices

Si l’élément LCP est un titre ou un paragraphe HTML, il est important de charger rapidement la police de ce bloc de texte.

Une façon d’y parvenir serait d’utiliser des balises de préchargement qui peuvent indiquer au navigateur de charger les polices plus tôt.

La règle CSS font-display: swap peut également garantir un rendu accéléré, car le navigateur affichera immédiatement le texte avec une police par défaut avant de passer ultérieurement à la police Web.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

Surveillez votre site Web pour maintenir le LCP rapide

La surveillance continue de votre site Web vous permet non seulement de vérifier que vos optimisations LCP fonctionnent, mais vous assure également d’être alerté si votre LCP s’aggrave.

DebugBear peut surveiller les Core Web Vitals et d’autres mesures de vitesse du site au fil du temps. En plus d’exécuter des tests approfondis en laboratoire, le produit garde également une trace des mesures des utilisateurs réels de Google.

Essayez DebugBear avec un essai gratuit de 14 jours.

Comment optimiser la plus grande peinture de contenu # 038;  Classement supérieur dans Google

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici