L’optimisation des AMP core web vitals lcp nécessite de se concentrer sur l’image ou le bloc de texte le plus grand affiché dans la zone de visualisation initiale (viewport) d’un appareil mobile. Les développeurs y parviennent en s’assurant que le runtime AMP se charge efficacement et en priorisant des éléments principaux spécifiques grâce à l’utilisation de l’attribut data-hero. Étant donné que Google traite les pages AMP comme n’importe quel autre contenu indexé, atteindre le seuil de 2,5 secondes reste une exigence clé pour maintenir une expérience utilisateur saine et rapide.
Qu’est-ce que le LCP dans le contexte d’AMP ?
Le Largest Contentful Paint (LCP) mesure le temps nécessaire pour que le contenu principal d’une page devienne visible pour l’utilisateur. Sur la plupart des pages AMP, l’élément LCP est généralement une image mise en avant, un grand titre ou une affiche vidéo. Même si le framework est conçu pour la vitesse, un serveur lent ou des ressources non optimisées peuvent tout de même pousser le LCP au-delà des 2,5 secondes recommandées.
Google utilise cette métrique pour évaluer la vitesse de chargement perçue d’une page. Si le contenu principal met trop de temps à apparaître, les utilisateurs abandonnent souvent le site avant qu’il ne soit entièrement chargé. Pour AMP, cette métrique est particulièrement vitale car le framework est commercialisé comme une solution à haute vitesse. Ne pas atteindre l’objectif de LCP peut annuler les avantages de l’utilisation de cette technologie en premier lieu.
Google Search indexe les pages AMP de la même manière que les autres pages Web et applique la même norme à toutes les pages, indépendamment de la technologie utilisée pour construire la page.
Google Search Central
Comment Google mesure-t-il les Core Web Vitals sur AMP ?
Google collecte des données du rapport sur l’expérience utilisateur de Chrome (CrUX) pour déterminer les performances de vos pages AMP. Ces données proviennent d’utilisateurs réels qui visitent votre site dans diverses conditions de réseau. Si votre page AMP est servie à partir du cache Google AMP, les performances sont souvent meilleures car le cache utilise le pré-rendu et des réseaux de diffusion de contenu (CDN) globaux.
Cependant, si un utilisateur accède à la page AMP directement depuis votre serveur d’origine, la vitesse dépend entièrement de votre hébergement et de la configuration de votre serveur. Google examine le 75e percentile de tous les chargements de page. Cela signifie que si 75 % de vos visiteurs bénéficient d’un LCP inférieur à 2,5 secondes, votre page réussit l’évaluation.
Pourquoi certaines pages AMP n’atteignent-elles toujours pas les objectifs LCP ?
Une idée fausse très répandue est que l’utilisation du framework AMP garantit automatiquement un score LCP positif. Ce n’est pas toujours vrai. Plusieurs facteurs peuvent retarder le rendu du plus grand élément de contenu. Par exemple, si l’élément LCP est une image qui n’est pas optimisée, le navigateur doit attendre le téléchargement complet du fichier avant de pouvoir l’afficher.
Un autre problème est le retard causé par le runtime AMP lui-même. Le runtime doit charger et calculer la mise en page de la page avant d’afficher certains éléments. S’il y a de nombreuses extensions ou scripts tiers inclus dans la section head, le runtime peut prendre plus de temps à s’initialiser, ce qui retarde le timing LCP.
- Temps de réponse du serveur lents (TTFB) du serveur d’origine.
- CSS personnalisé bloquant le rendu ou fichiers de polices volumineux.
- Attributs de largeur et de hauteur manquants sur les images, entraînant des recalculs de mise en page.
- Images qui ne sont pas priorisées avec l’attribut data-hero.
- Trop de composants AMP (tels que des carrousels ou des intégrations sociales) au-dessus de la ligne de flottaison (above the fold).
Comment pouvez-vous améliorer le chargement des images dans AMP ?
Les images sont la cause la plus fréquente d’un LCP lent. Pour y remédier, vous devez utiliser l’attribut data-hero sur l’image principale de la page. Cet attribut indique au runtime AMP et au cache AMP de commencer à télécharger cette image dès que possible, avant même que le runtime n’ait complètement terminé ses calculs de mise en page.
De plus, vous devez utiliser l’attribut srcset pour tous les éléments amp-img. Cela permet au navigateur de choisir la taille d’image la plus appropriée en fonction de la résolution d’écran de l’utilisateur. Un écran plus petit n’a pas besoin d’une image de 2000 pixels de large. En servant une version plus petite, vous réduisez la taille en octets et accélérez le LCP.
Les utilisateurs doivent pouvoir bénéficier du même contenu et effectuer les mêmes actions sur les pages AMP que sur les pages canoniques correspondantes, dans la mesure du possible.
Google Search Central
Le rôle de l’AMP Optimizer
L’AMP Optimizer est un outil qui effectue des optimisations côté serveur sur votre HTML AMP. Il peut automatiser bon nombre des tâches manuelles nécessaires pour accélérer le LCP. Par exemple, il peut pré-rendre la mise en page AMP sur le serveur, ce qui évite au navigateur d’attendre le démarrage du runtime AMP. Cette technique peut réduire le LCP de plusieurs centaines de millisecondes.
Lorsque vous utilisez l’optimiseur, il transforme également vos images et réorganise les éléments dans l’en-tête (head) de votre document. Cela garantit que les ressources les plus critiques sont chargées en premier. De nombreux systèmes de gestion de contenu (CMS) modernes disposent de plugins qui intègrent automatiquement l’AMP Optimizer, ce qui permet aux spécialistes du marketing de maintenir facilement des performances élevées.
Comment Alien Road applique amp core web vitals lcp
Alien Road gère les performances AMP en commençant par un audit détaillé du rapport Core Web Vitals de Google Search Console. Nous identifions les URL qui échouent au seuil LCP et déterminons l’élément spécifique responsable du retard. Dans un compte typique, il s’agit souvent d’une image mise en avant sur un article de blog ou d’une image de produit principale sur une page e-commerce.
Notre processus implique quelques étapes spécifiques. Tout d’abord, nous implémentons l’AMP Optimizer côté serveur pour nous assurer que le CSS de base ne bloque pas le rendu initial. Deuxièmement, nous appliquons l’attribut data-hero à l’élément visuel principal. Par exemple, sur une boutique Shopify vendant des articles pour la maison, nous veillons à ce que la photo principale du produit soit signalée pour un chargement prioritaire. Nous surveillons également le TTFB (Time to First Byte) car si le serveur est lent, aucune optimisation front-end ne corrigera le LCP.
Après la mise en œuvre, nous utilisons l’API PageSpeed Insights pour vérifier les modifications. Nous recherchons une tendance constante d’amélioration des données de terrain sur une période de 28 jours. Cette approche axée sur les données nous permet de fournir des rapports clairs aux clients sur la manière dont leur vitesse mobile affecte leur visibilité globale dans les recherches.
Devriez-vous supprimer AMP pour améliorer le LCP ?
Certains développeurs envisagent de supprimer AMP s’ils ne parviennent pas à atteindre les objectifs de vitesse souhaités. Bien que ce soit une option, elle doit être traitée avec précaution pour éviter de perdre des classements de recherche. Si vous décidez d’abandonner AMP, vous devez vous assurer que vos pages non-AMP sont tout aussi rapides et respectent toutes les directives des standards du web.
Selon Google, vous avez trois options pour supprimer le contenu AMP. Vous pouvez supprimer toutes les versions d’une page, supprimer uniquement la version AMP tout en conservant la page canonique non-AMP, ou utiliser un CMS pour gérer la suppression. Si la page AMP est la page canonique, vous devez configurer une nouvelle page canonique non-AMP et rediriger correctement l’ancienne URL pour éviter les erreurs 404.
- Vérifiez si votre CMS prend en charge l’optimisation AMP automatisée.
- Identifiez l’élément LCP pour vos 10 pages les plus visitées.
- Testez la différence entre les vitesses de page mises en cache et non mises en cache.
- Vérifiez que les données structurées sont cohérentes entre les versions AMP et non-AMP.
- Surveillez le rapport Core Web Vitals dans la Search Console chaque semaine.
Par quoi commencer cette semaine
Commencez par ouvrir votre Google Search Console et accédez à la section Core Web Vitals. Filtrez le rapport pour n’afficher que les URL mobiles et recherchez l’avertissement ‘Problème LCP : supérieur à 2,5 s’. Cliquez sur le rapport pour voir les groupes d’URL spécifiques affectés par ce délai.
Une fois que vous avez la liste, choisissez une URL d’exemple et passez-la dans l’outil PageSpeed Insights. Identifiez l’élément LCP dans la section ‘Diagnostics’. S’il s’agit d’une image, vérifiez si elle possède l’attribut data-hero. s’il s’agit d’un bloc de texte, vérifiez les retards de chargement des polices. Apporter ces petits ajustements à vos pages les plus populaires peut entraîner une amélioration significative des performances globales de votre site et de la fidélisation des utilisateurs.