Comment mesurer et optimiser la plus grande peinture de contenu pour une UX supérieure

Lorsqu'il s'agit de succès en ligne, il existe de nombreuses façons de s'y prendre. Une expérience utilisateur optimisée en est une. Google utilisera différentes expériences utilisateur et mesures connexes pour classer les sites Web pour le référencement. Il a continué à produire de multiples outils pour améliorer les performances Web. Nous examinerons ci-dessous certaines des façons dont Google cherche à améliorer l'expérience utilisateur.

Qu'est-ce que Google Core Web Vitals ?

Dans sa récente tentative de modifier la mesure et la compréhension de ce qui est qualifié d'expérience utilisateur décente, Google a réglementé les paramètres de la page. Ces mesures standardisées sont appelées éléments vitaux Web de base et facilitent l'évaluation de l'expertise des utilisateurs dans le monde réel sur votre site Web.

Quelle est la plus grande peinture de contenu ?

Pour commencer, regardons Largest Contentful Paint (LCP). C'est l'une des principales métriques Web Vitals. Il mesure le temps de chargement du plus gros composant de contenu dans la fenêtre d'affichage lorsqu'il devient visible. Des métriques alternatives comme TTFB et First Contentful Paint facilitent conjointement l'expérience de la page en direct, elles ne sont pas présentes une fois que la page est devenue "significative" pour l'utilisateur.

Généralement, à moins que le composant le plus important de la page ne devienne entièrement visible, la page peut ne pas offrir suffisamment de contexte à l'utilisateur. LCP est donc représentatif des attentes de l'utilisateur. En tant que métrique Web vitale de base, LCP représente vingt-cinq pour cent du score de performance, c'est pourquoi c'est l'une des métriques les plus importantes à optimiser.

Vérification de votre heure LCP

Selon Google, les catégories de pièces envisagées pour Largest Contentful Paint sont :

• <img> éléments
• Éléments <image> à l'intérieur d'un élément <svg>
• Éléments <video> (image d'affiche utilisée)
• Un élément avec une image de fond chargée via la fonction URL
• Éléments de niveau bloc comprenant des nœuds de texte et/ou d'autres éléments de texte de niveau en ligne

Comment le LCP est-il mesuré ?

Bien sûr, il existe plusieurs façons de mesurer le LCP de votre page Web. Le moyen le plus simple de le faire est d'utiliser l'une des plates-formes disponibles, notamment Lighthouse, PageSpeed ​​Insights, Search Console ainsi que Chrome User Experience Report. Par exemple, Google PageSpeed ​​Insights dans son rapport indique le composant pour calculer le LCP.

Qu'est-ce qu'un bon LCP ?

Pour fournir une expertise utilisateur décente, vous devez essayer de maintenir un LCP de 2,5 secondes ou moins sur votre site. La majorité des chargements de vos pages devraient se produire en dessous de ce seuil. Maintenant que nous savons tous ce que sont les LCP et quel devrait être notre objectif, examinons les moyens d'améliorer les LCP.

(Veuillez ajouter l'image nommée La majorité des pages doivent se charger à un LCP de 2,5 secondes ou moins.jpg)

Comment optimiser la plus grande peinture de contenu (LCP)

Le système sous-jacent de réduction totale du LCP consiste à réduire les données téléchargées sur l'appareil de l'utilisateur et à réduire le temps nécessaire pour gérer ce contenu et garantir une expérience utilisateur transparente.

Optimisez vos photos

Sur la plupart des sites, le contenu au-dessus de la ligne de flottaison contient généralement une image surdimensionnée requise pour LCP. Il peut s'agir d'une image de héros, d'un carrousel ou d'une bannière. Vous devez optimiser ces images pour un LCP plus robuste.

Pour optimiser vos images, vous devez utiliser un CDN d'image tiers comme ImageKit.io. L'avantage d'utiliser un CDN d'image tiers est que vous ciblez simplement votre entreprise réelle et laissez l'optimisation de l'image au CDN d'image.

Transformations en temps réel pour des images réactives

Google utilise la compartimentation mobile d'abord pour presque tous les sites. C'est pourquoi il est nécessaire d'optimiser LCP pour le mobile plutôt que pour le bureau. Chaque image doit être réduite à l'échelle selon la demande de la mise en page.

Par exemple, vous souhaitez que l'image soit plus petite sur la page de liste et plus grande sur la page de détail du produit. Ce redimensionnement garantit que vous ne semblez pas utiliser d'octets supplémentaires par rapport à ce qui est nécessaire pour cette page exacte.

Cachez les images et améliorez le délai de livraison

Les CDN d'images utilisent le réseau de distribution de contenu (CDN) pour diffuser les photographies. L'utilisation d'un CDN garantit que les images se chargent à partir d'un emplacement proche plutôt que d'un serveur qui pourrait bien se trouver à l'autre bout du monde.

Précharger les ressources essentielles

Dans certains cas, le navigateur peut ne pas charger de visuel s'il a un impact sur LCP. Par exemple, une image de bannière au-dessus du pli peut être considérée comme une image d'arrière-plan dans un fichier CSS. Étant donné que le navigateur ne le saura pas à propos de l'image tant que le fichier CSS n'est pas téléchargé, il ne le chargera pas.

Maintenant, si vous demandez, "Comment puis-je précharger la plus grande image de peinture Contentful?", La réponse est simple. Vous pourrez les précharger en utilisant une balise avec un attribut rel= "preload" dans la section supérieure de votre document en langage de balisage hypertexte.

Bien que vous puissiez précharger plusieurs ressources dans un document, vous devez le limiter aux images ou vidéos au-dessus de la ligne de flottaison, aux fichiers de police à l'échelle de la page ou aux fichiers CSS et JS essentiels.

Réduire les temps de réponse du serveur

Si votre serveur prend plus de temps à se charger que ce qui est considéré comme normal, le temps nécessaire pour charger la page à l'écran augmente. Cela affecte négativement chaque métrique de vitesse de page, ainsi que LCP. Pour améliorer les temps de réponse de votre serveur, vous pouvez :

• Analysez et optimisez vos serveurs
• Utiliser un réseau de diffusion de contenu
• Préconnexion à des origines tierces
• Servir le cache de contenu en premier avec un service worker
• Compresser les fichiers texte

Améliorer les temps de réponse des appareils clients

Si votre page prend du temps à se charger, elle peut être rebutante pour les clients potentiels. Heureusement, vous pouvez faire certaines choses pour vous assurer qu'il se charge correctement de leur côté et crée une expérience utilisateur transparente. Ceci comprend:

• Inline CSS essentiel
• Minifier et appuyer sur le contenu
• Optimisation de LCP pour le rendu côté client
• Utilisation du rendu côté serveur
• Utiliser le pré-rendu

LCP est devenu un facteur de classement de recherche important qui est fortement corrélé à l'expérience et au parcours de l'utilisateur. Par conséquent, si vous exploitez une entreprise Web, vous devez optimiser ces composants pour assurer le succès de l'entreprise.

Biographie de l'auteur

Ghia Marnewick est écrivain, responsable des médias sociaux et responsable numérique. Elle écrit du contenu pour Aumcore et est passionnée par la recherche de nouvelles façons de partager des informations avec le monde.