La optimización de AMP core web vitals lcp requiere centrarse en la imagen o el bloque de texto más grande renderizado dentro del área de visualización inicial de un dispositivo móvil. Los desarrolladores logran esto asegurando que el tiempo de ejecución de AMP se cargue eficientemente y priorizando elementos principales específicos mediante el uso del atributo data-hero. Dado que Google trata las páginas AMP como cualquier otro contenido indexado, cumplir con el umbral de 2,5 segundos sigue siendo un requisito clave para mantener una experiencia de usuario saludable y rápida.
¿Qué es el LCP en el contexto de AMP?
El Largest Contentful Paint (LCP) mide cuánto tiempo tarda el contenido principal de una página en ser visible para el usuario. En la mayoría de las páginas AMP, el elemento LCP suele ser una imagen destacada, un titular grande o el póster de un vídeo. Aunque el framework está diseñado para la velocidad, un servidor lento o recursos no optimizados aún pueden empujar el LCP más allá de los 2,5 segundos recomendados.
Google utiliza esta métrica para medir la velocidad de carga percibida de una página. Si el contenido principal tarda demasiado en aparecer, los usuarios a menudo abandonan el sitio antes de que se cargue por completo. Para AMP, esta métrica es especialmente vital porque el framework se comercializa como una solución de alta velocidad. No alcanzar el objetivo de LCP puede anular los beneficios de usar la tecnología en primer lugar.
Google Search indexa las páginas AMP al igual que otras páginas web y aplica el mismo estándar a todas las páginas, independientemente de la tecnología utilizada para construir la página.
Google Search Central
¿Cómo mide Google Core Web Vitals en AMP?
Google recopila datos del Informe de Experiencia de Usuario de Chrome (CrUX) para determinar el rendimiento de tus páginas AMP. Estos datos provienen de usuarios reales que visitan tu sitio bajo diversas condiciones de red. Si tu página AMP se sirve desde el Google AMP Cache, el rendimiento suele ser mejor porque la caché utiliza el prerrenderizado y redes de entrega de contenido globales.
Sin embargo, si un usuario accede a la página AMP directamente desde tu servidor de origen, la velocidad depende enteramente de tu alojamiento y configuración del servidor. Google analiza el percentil 75 de todas las cargas de páginas. Esto significa que si el 75 % de tus visitantes experimentan un LCP inferior a 2,5 segundos, tu página supera la evaluación.
¿Por qué algunas páginas AMP siguen fallando en los objetivos de LCP?
Un error común es creer que el uso del framework AMP garantiza automáticamente una puntuación de LCP aprobatoria. Esto no siempre es así. Varios factores pueden retrasar el renderizado del elemento de contenido más grande. Por ejemplo, si el elemento LCP es una imagen que no está optimizada, el navegador debe esperar a que se descargue el archivo completo antes de poder mostrarlo.
Otro problema es el retraso causado por el propio tiempo de ejecución de AMP. El tiempo de ejecución debe cargar y calcular el diseño de la página antes de mostrar ciertos elementos. Si hay muchas extensiones o scripts de terceros incluidos en la sección head, el tiempo de ejecución puede tardar más en inicializarse, lo que retrasa el tiempo de LCP.
- Tiempos de respuesta del servidor lentos (TTFB) desde el servidor de origen.
- CSS personalizado que bloquea el renderizado o archivos de fuentes grandes.
- Atributos de ancho y alto faltantes en las imágenes, lo que lleva a recálculos de diseño.
- Imágenes que no se priorizan con el atributo data-hero.
- Demasiados componentes AMP (como carruseles o incrustaciones sociales) por encima del pliegue (above the fold).
¿Cómo puedes mejorar la carga de imágenes en AMP?
Las imágenes son la causa más frecuente de un LCP lento. Para solucionar esto, debes utilizar el atributo data-hero en la imagen principal de la página. Este atributo le indica al tiempo de ejecución de AMP y a la caché de AMP que comiencen a descargar esa imagen lo antes posible, incluso antes de que el tiempo de ejecución haya terminado por completo sus cálculos de diseño.
Además, debes utilizar el atributo srcset para todos los elementos amp-img. Esto permite que el navegador elija el tamaño de imagen más apropiado según la resolución de pantalla del usuario. Una pantalla más pequeña no necesita una imagen de 2000 píxeles de ancho. Al servir una versión más pequeña, reduces el tamaño en bytes y aceleras el LCP.
Los usuarios deben poder experimentar el mismo contenido y realizar las mismas acciones en las páginas AMP que en las páginas canónicas correspondientes, siempre que sea posible.
Google Search Central
El papel del AMP Optimizer
El AMP Optimizer es una herramienta que realiza optimizaciones del lado del servidor en tu AMP HTML. Puede automatizar muchas de las tareas manuales necesarias para acelerar el LCP. Por ejemplo, puede prerrenderizar el diseño AMP en el servidor, lo que elimina la necesidad de que el navegador espere a que se inicie el tiempo de ejecución de AMP. Esta técnica puede reducir el LCP en varios cientos de milisegundos.
Cuando utilizas el optimizador, también transforma tus imágenes y reordena los elementos en el head de tu documento. Esto asegura que los recursos más críticos se carguen primero. Muchos sistemas de gestión de contenido modernos tienen plugins que incorporan el AMP Optimizer automáticamente, lo que facilita a los especialistas en marketing mantener un alto rendimiento.
Cómo aplica Alien Road amp core web vitals lcp
Alien Road gestiona el rendimiento de AMP comenzando con una auditoría detallada del informe Core Web Vitals de Google Search Console. Identificamos qué URL están fallando en el umbral de LCP y determinamos el elemento específico responsable del retraso. En una cuenta típica, esto suele ser una imagen destacada en una publicación de blog o una imagen principal de producto en una página de comercio electrónico.
Nuestro proceso implica algunos pasos específicos. Primero, implementamos el AMP Optimizer en el lado del servidor para garantizar que el CSS estándar no bloquee el renderizado inicial. Segundo, aplicamos el atributo data-hero al elemento visual principal. Por ejemplo, en una tienda de Shopify que vende artículos para el hogar, nos aseguramos de que la toma principal del producto esté marcada para carga prioritaria. También monitoreamos el TTFB (Time to First Byte) porque si el servidor es lento, ninguna optimización frontend solucionará el LCP.
Después de la implementación, utilizamos la API de PageSpeed Insights para verificar los cambios. Buscamos una tendencia constante de mejora en los datos de campo durante un período de 28 días. Este enfoque basado en datos nos permite proporcionar informes claros a los clientes sobre cómo su velocidad móvil afecta su visibilidad general en las búsquedas.
¿Deberías eliminar AMP para mejorar el LCP?
Algunos desarrolladores consideran eliminar AMP si no pueden alcanzar los objetivos de velocidad deseados. Si bien esta es una opción, debe manejarse con cuidado para evitar perder clasificaciones de búsqueda. Si decides dejar de usar AMP, debes asegurarte de que tus páginas que no son AMP sean igual de rápidas y sigan todas las pautas de los estándares web.
Según Google, tienes tres opciones para eliminar contenido AMP. Puedes eliminar todas las versiones de una página, eliminar solo la versión AMP manteniendo la página canónica que no es AMP, o usar un CMS para gestionar la eliminación. Si la página AMP es la canónica, debes configurar una nueva página canónica que no sea AMP y redirigir la URL antigua correctamente para evitar errores 404.
- Comprueba si tu CMS admite la optimización AMP automatizada.
- Identifica el elemento LCP para tus 10 páginas más visitadas.
- Prueba la diferencia entre las velocidades de página almacenadas en caché y no almacenadas en caché.
- Verifica que los datos estructurados sean consistentes entre las versiones AMP y no AMP.
- Monitorea el informe Core Web Vitals en Search Console semanalmente.
Por dónde empezar esta semana
Comienza abriendo tu Google Search Console y navegando a la sección de Core Web Vitals. Filtra el informe para mostrar solo las URL móviles y busca la advertencia ‘Problema de LCP: superior a 2.5s’. Haz clic en el informe para ver los grupos de URL específicos afectados por este retraso.
Una vez que tengas la lista, elige una URL de muestra y pásala por la herramienta PageSpeed Insights. Identifica el elemento LCP en la sección ‘Diagnósticos’. Si es una imagen, comprueba si tiene el atributo data-hero. Si es un bloque de texto, busca retrasos en la carga de fuentes. Hacer estos pequeños ajustes en tus páginas más populares puede resultar en una mejora significativa en el rendimiento general de tu sitio y en la retención de usuarios.