Core Web Vitals: LCP: qué es y cómo mejorarlo para SEO

En mayo de 2020, Google anunció que los "elementos fundamentales de la web" formarían parte de una actualización del algoritmo de clasificación que se lanzará en 2021 llamada experiencia de página.

Con la actualización de la experiencia de la página ahora implementada, quería volver a visitar este tema. Agregaré algunos consejos más que hemos aprendido en los meses intermedios al ayudar a muchos sitios web a mejorar sus puntajes vitales web principales. Principalmente, quiero que pueda aprovechar los posibles beneficios de clasificación para sus páginas web bien ajustadas.

Core web vitals mide los elementos centrales de una página web que mejoran la experiencia del usuario. Google ha identificado tres elementos fundamentales de la web:

• Pintura con contenido más grande (LCP)
• Primera demora de entrada (FID)
• Cambio de diseño acumulativo (CLS)

Este artículo es parte de nuestra serie sobre la actualización de Page Experience. Aquí hablaré de LCP, o la pintura con contenido más grande:

• ¿Qué es LCP?
• ¿Cómo mido LCP?
• ¿Cómo impacta LCP en el SEO?
• ¿Cómo puedo mejorar mi puntuación LCP?

¿Qué es la pintura con contenido más grande (LCP)?

LCP mide el rendimiento de carga de la página web. Más específicamente, LCP mide qué tan rápido se muestra la imagen o el bloque de texto más grande en la página web.

Google analiza LCP aquí:

La pintura con contenido más grande (LCP) es una métrica importante centrada en el usuario para medir la velocidad de carga percibida porque marca el punto en la línea de tiempo de carga de la página cuando es probable que se haya cargado el contenido principal de la página; un LCP rápido ayuda a asegurar al usuario que la página es útil . …

¿Cómo se mide la pintura con contenido más grande (LCP)?

Google afirma que para brindar una buena experiencia al usuario, la imagen o el bloque de texto más grande debe mostrarse en la página web dentro de los primeros 2,5 segundos.

Puntuación LCP de Google

La documentación de LCP especifica qué tipos de elementos se consideran para LCP e incluye:

• Imágenes
• Video
• Imágenes de fondo cargadas a través de CSS
• Etiquetas de encabezado
• Mesas
• Liza
• Cualquier otro elemento de bloque con texto

Este es un ejemplo de cuando el elemento más grande de la página (un párrafo de texto) se muestra antes que cualquier otro elemento de la página:

"La mayor pintura con contenido", Google Developers

El objetivo es alcanzar la velocidad de carga objetivo recomendada en la mayoría de sus páginas. Google dice que "si al menos el 75 por ciento de las visitas a la página de un sitio alcanzan el umbral 'bueno', el sitio se clasifica como de rendimiento 'bueno' para esa métrica". Puede obtener más información sobre cómo Google define sus umbrales aquí.

¿Cómo impacta en el SEO la mayor pintura con contenido (LCP)?

Sabemos que Google valora un sitio rápido y que cosas como la velocidad de la página ya están en su algoritmo de clasificación. LCP es otra forma de garantizar que las páginas web se carguen rápido para que los visitantes de su sitio web tengan una buena experiencia de usuario y permanezcan en su sitio.

Entonces, si ya tiene un sitio rápido, ¿está limpio? No exactamente. Según un estudio de Screaming Frog, la mayoría no está preparada para los umbrales de LCP.

Los datos muestran que menos de la mitad de los sitios web estudiados (en 20 000 URL) se consideraron buenos. Específicamente, el 43 % de las URL móviles y el 44 % de las de escritorio tenían un buen LCP. El tiempo de procesamiento promedio fue de 3,13 segundos para dispositivos móviles y 3,04 segundos para computadoras de escritorio.

En ese estudio, la investigación correlacionó LCP y clasificaciones de búsqueda. Los datos son interesantes, pero hay demasiados factores para poder decir con certeza cómo LCP influye en las clasificaciones de hoy.

“¿Cuántos sitios pasan la evaluación Core Web Vitals?”, Screamingfrog.co.uk

Como incentivo para que los editores de sitios web mejoren sus métricas de rendimiento, Google muestra una etiqueta de "página rápida" en los resultados de búsqueda en Android que históricamente han alcanzado o excedido los umbrales de los principales elementos vitales de la web, incluido LCP.

Los sitios web con esta etiqueta pueden ver un aumento en el tráfico orgánico y el tiempo en el sitio.

¿Cómo mejoro mi puntaje de pintura con contenido más grande (LCP)?

Google proporciona herramientas para medir LCP en un laboratorio y en el campo, que incluyen:

• Consola de búsqueda (campo)
• PageSpeed ​​Insights (laboratorio y campo)
• Extensión Web Vitals (laboratorio)
• Prueba de página web (laboratorio)
• Informe de Chrome UX (campo)
• Chrome DevTools (laboratorio)
• Faro (laboratorio)

Cuando se trata de datos de laboratorio versus datos de campo, ambos pueden ser útiles. El laboratorio es importante para evaluar y trabajar para mejorar sus puntajes. Obtendrá una mayor variación en los resultados, pero los datos de laboratorio proporcionan información instantánea.

Los datos de campo son más importantes cuando intenta obtener una vista general de su sitio. Los valores representados dependerán mucho de los entornos de sus usuarios, por ejemplo, móvil versus escritorio, su velocidad de Internet, el rendimiento de su computadora, etc. Los datos de campo son buenos porque le dan una idea de cómo está funcionando su sitio para todos, no solo cómo funciona para usted.

También puede medir LCP con la biblioteca de JavaScript de web-vitals, y puede obtener más información al respecto aquí. Esto es útil si tiene sus propios informes o desea incorporarlos a otros informes.

Para comenzar, Google proporciona una hoja de ruta general sobre cómo usar las herramientas proporcionadas para diagnosticar un elemento vital web central. De la siguiente lista, los tres primeros son buenos. Terminaría después de la tercera viñeta diciendo que publique sus cambios y comience a ver los beneficios de un mayor rendimiento. Las viñetas restantes (4 a 6) son "buenas para tener". Es probable que la última viñeta no se aplique al 90 % de los sitios web.

• Utilice el nuevo informe Core Web Vitals de Search Console para identificar grupos de páginas que requieren atención (según los datos del campo).
• Una vez que haya identificado las páginas que necesitan trabajo, use PageSpeed ​​Insights (con tecnología de Lighthouse y Chrome UX Report) para diagnosticar problemas de laboratorio y de campo en una página. PageSpeed ​​Insights (PSI) está disponible a través de Search Console o puede ingresar una URL en PSI directamente.
• ¿Listo para optimizar su sitio localmente en el laboratorio? Use Lighthouse y Chrome DevTools para medir Core Web Vitals y obtener orientación práctica sobre qué corregir exactamente. La extensión de Chrome Web Vitals puede brindarle una vista en tiempo real de las métricas en el escritorio.
• ¿Necesita un tablero personalizado de Core Web Vitals? Utilice el panel de CrUX actualizado o la nueva API de informes de Chrome UX para datos de campo o la API de PageSpeed ​​Insights para datos de laboratorio.
• ¿Buscas orientación? web.dev/measure puede medir su página y mostrarle un conjunto priorizado de guías y codelabs para la optimización, utilizando datos de PSI.
• Por último, use Lighthouse CI en las solicitudes de incorporación de cambios para asegurarse de que no haya regresiones en Core Web Vitals antes de implementar un cambio en la producción.

En general, LCP se ve afectado por lo siguiente:

• Tiempos de respuesta del servidor y/o software
• Recursos de la página web y ancho de banda
• Software de navegador y complementos
• Código JavaScript y CSS del sitio

Muchas de las cosas que Google sugiere cuando se trata de optimizar LCP son cosas que quizás ya estés haciendo como parte de una buena estrategia de SEO para crear un sitio más rápido.

Algunos consejos para tener en cuenta al optimizar:

• El texto se procesará más rápido en la mayoría de los casos que otros elementos que deben obtenerse por separado (como las imágenes). Por lo tanto, usar cosas como etiquetas de encabezado como elementos más grandes es una buena idea.
• Es posible que se necesiten cambios de diseño en algunos casos en los que el elemento con mayor contenido es demasiado lento.
• La optimización de su JS y CSS ayudará a los tiempos de carga. Tenga cuidado de no incluir demasiados scripts de terceros.
• El LCP está en la ventana gráfica para dispositivos móviles o de escritorio. Es probable que las cosas en su pie de página no cuenten, por lo que realmente se está enfocando en la parte superior de su página.
• Debería poder ver su elemento LCP en la mitad superior de la página si visita la página con JavaScript desactivado.
• Si su elemento LCP es una imagen, considere incluirlo en su HTML con un URI de datos.

Para obtener más información sobre esta actualización de algoritmo, lea el resto de nuestra serie de experiencia de página:

1. ¿Qué es la actualización de la experiencia de la página?
2. Cómo hacer un sitio optimizado para dispositivos móviles
3. Intersticiales intrusivos y por qué son malos para el SEO
4. HTTPS para Usuarios y Ranking
5. Descripción general de Core Web Vitals
6. Core Web Vitals: LCP (pintura con contenido más grande)
7. Core Web Vitals: FID (primer retraso de entrada)
8. Core Web Vitals: CLS (Cambio de diseño acumulativo)

¿Necesitas profundizar más en este tema? Lo invito a ver nuestro seminario web a pedido 3 consejos de expertos para mejorar Core Web Vitals. ¡Las preguntas y respuestas extendidas al final pueden responder sus preguntas más difíciles sobre CWV!