Catégories
Plugin et site web

Comment améliorer la plus grande peinture de contenu (LCP) et le référencement

Content; Le dictionnaire Webster définit «contentieux» comme… introuvable. Il est clair que quelqu'un a inventé ce mot, mais ce n'est pas nécessairement une mauvaise chose.

Le monde des mesures de l'expérience utilisateur évolue rapidement, une nouvelle terminologie est donc nécessaire. Largest Contentful Paint (LCP) est l'une des nombreuses mesures mesurant le temps de rendu du contenu sur une page Web.

Quelle est la plus grande peinture de contenu?

Google définit LCP comme «le temps de rendu du plus grand élément de contenu visible dans la fenêtre». Pour ce dont nous parlons dans ce blog, nous considérerons le «contenu» comme une image, généralement un fichier JPEG ou PNG. Dans la plupart des cas, «plus grand» pointe vers une image de héros qui est «au-dessus du pli» et est l'une des premières images que les gens remarqueront lors du chargement de la page. L'application de l'optimisation à ce plus grand contenu est essentielle pour améliorer le LCP.

Il est probablement plus instructif de voir le LCP par rapport à d'autres métriques. Par exemple, First Contentful Paint (FCP) et Visually Complete book end LCP.

Chaque métrique a ses avantages et ses inconvénients, mais LCP est un juste milieu. LCP marque lorsque le chargement de la page Web commence à avoir un impact substantiel sur l'expérience utilisateur.

Selon Google, pour offrir une bonne expérience utilisateur, le LCP devrait se produire dans les 2,5 secondes suivant le premier chargement de la page. Les valeurs médiocres sont supérieures à 4 secondes.

Comment la plus grande peinture de contenu a-t-elle un impact sur les scores et le référencement des phares?

LCP fait désormais partie de plusieurs scores «Core Web Vitals» que Google mesurera dans son algorithme de classement. 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 du monde réel d'un résultat critique centré sur l'utilisateur.

Dans le cas du score global de Google Lighthouse, LCP représente une pondération de 25% sur le score de performance de Lighthouse version 6.0. Cela fait de LCP la métrique Core Web Vitals la plus importante pour déterminer le score de performance.

Alors que Google a indiqué que le contenu est toujours le facteur le plus important dans le classement SEO, une meilleure expérience utilisateur (telle que mesurée par Core Web Vitals) générera des classements plus élevés dans un domaine encombré. S'il y a de nombreux sites Web en compétition pour les meilleurs spots des moteurs de recherche, alors Largest Contentful Paint jouera un facteur critique dans les classements.

Comment améliorer la plus grande peinture de contenu

Maintenant que vous savez que LCP est important, que pouvez-vous faire pour l'améliorer en accélérant le chargement du contenu? Google fournit un certain nombre de suggestions, mais la technique la plus efficace consiste à optimiser le contenu pour l'appareil qui en fait la demande.

Par exemple, un site Web comprend une image JPEG de 800 Ko destinée aux ordinateurs de bureau haute résolution. Sur un smartphone, cela serait optimisé à moins de 100 ko, sans impact perceptible sur la qualité. LCP peut s'améliorer de plus de 60% – ou de plusieurs secondes – grâce à cette optimisation unique.

Économisez sur la plus grande peinture de contenu en utilisant le test de vitesse d'image

Image Speed ​​Test est un excellent outil proposé par ImageEngine.io qui fournit une analyse des opportunités d'amélioration LCP. Collez simplement l'URL de la page Web que vous souhaitez optimiser, et le test vous montrera:

  • Réduction de la charge utile de l'image
  • Indice de vitesse
  • La plus grande peinture riche en contenu
  • Temps de chargement de la page (visuellement complet)

Il fournit également une vidéo du chargement de la page Web avec et sans optimisations. Enfin, il analyse chaque image pour fournir une estimation des économies de charge utile. Dans ce cas, le «contenu le plus important» de la page est cette image. Avec les optimisations, la charge utile de l'image est réduite de 94%. Cela apporte une énorme amélioration dans LCP.

Comment ImageEngine améliore-t-il LCP

ImageEngine est un service de réseau de diffusion de contenu d'image (CDN) qui simplifie l'optimisation des images. Fondamentalement, pour chaque image de la page, l'image CDN:

  1. Détectez le modèle d'appareil demandant la page Web;
  2. Optimiser l'image en termes de taille, compression, format d'image;
  3. Livrer via un serveur de périphérie CDN qui est géographiquement le plus proche de l'utilisateur.

ImageEngine améliore les performances Web pour chaque image de la page, y compris la plus grande. Vous pouvez en savoir plus sur ImageEngine ici et vous inscrire pour un essai gratuit.

Meilleures pratiques: préconnecter

Outre l'utilisation d'un CDN d'image comme ImageEngine, quelques autres bonnes pratiques peuvent améliorer LCP. L'utilisation des conseils de ressources pour fournir une préconnexion à votre contenu peut rationaliser le processus de téléchargement.

Par exemple, insérer l'instruction de lien suivante dans le HTML accélérera le processus de téléchargement. La déclaration de lien permettra au navigateur de se connecter au tiers le plus tôt possible afin que le téléchargement puisse démarrer plus tôt. Les optimisations d’ImageEngine rendent chaque téléchargement d’image plus petit et plus rapide, mais la préconnexion gagne du temps lors de la phase de connexion.

Meilleures pratiques: minimiser le blocage de JavaScript et CSS

Lorsque JavaScript ou CSS «bloque», cela signifie que le navigateur doit analyser et exécuter CSS et JavaScript afin de peindre l'état final de la page dans la fenêtre.

Aujourd'hui, tout site Web repose fortement sur JavaScript et CSS, ce qui signifie qu'il est presque impossible d'éviter certaines ressources de blocage de rendu. Sur une note générale: soyez prudent avec quel type de CSS et JavaScript est référencé dans le élément. Assurez-vous que seules les ressources strictement nécessaires sont chargées dans . Le reste peut être différé ou chargé de manière asynchrone.

Lorsque vous cherchez à améliorer spécifiquement le LCP, certaines pratiques méritent d'être approfondies.

CSS critique en ligne

Ce n'est pas une tâche facile, mais si le navigateur peut éviter de faire une demande pour obtenir le CSS nécessaire pour rendre la partie critique de la page – généralement la partie «au-dessus du pli» – le LCP est susceptible de se produire plus tôt. De plus, vous éviterez le déplacement du contenu et peut-être même un Flash of Unstyled Content (FOUC).

Le CSS critique – le CSS nécessaire au navigateur pour configurer la structure et les styles importants de la partie de la page affichée au-dessus du pli – doit être inséré. Ce CSS intégré peut également faire référence à des images d'arrière-plan, qui devraient bien sûr également être servies par un CDN Image.

Ne pas utiliser JavaScript pour charger des images (paresseux)

De nombreux navigateurs modernes prennent en charge nativement le chargement différé, sans utiliser JavaScript. Étant donné que les images sont généralement fortement impliquées dans les performances de LCP, il est recommandé de laisser le chargement de l'image au navigateur et d'éviter d'ajouter JavaScript afin de charger les images paresseux.

Le chargement paresseux entraîné par JavaScript ajoutera une latence supplémentaire si le navigateur doit d'abord charger et analyser JavaScript, puis attendre son exécution, puis rendre les images. Cette pratique interrompra également le pré-parser dans le navigateur.

Si un CDN d'image est utilisé pour optimiser les images, les avantages du chargement paresseux deviennent beaucoup moins importants. Les images de héros particulièrement volumineuses situées au-dessus du pli ont un impact important sur LCP et ne bénéficieront pas du chargement paresseux de JavaScript. Il est préférable de ne pas faire de JavaScript un problème de blocage pour le rendu des images, mais plutôt de s’appuyer sur la capacité du navigateur à sélectionner les images à charger paresseusement.

(- Ceci est un message sponsorisé au nom d'ImageEngine -)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *