La pintura más rica en contenido: explicación fácil

Básicamente, se puede usar cualquier elemento HTML de nivel de bloque que contenga elementos de texto, siempre que sea el más grande.

No se utilizan todos los elementos. Por ejemplo, los elementos SVG y VIDEO no se utilizan actualmente para calcular la pintura de contenido más grande.

LCP es una medida fácil de entender porque todo lo que tiene que hacer es mirar su página web y determinar cuál es el bloque de texto o imagen más grande, y luego optimizarlo reduciendo o eliminando todo. lo que evitaría que se descargue rápidamente.

Dado que Google incluye la mayoría de los sitios en el primer índice móvil, lo mejor es optimizar primero la ventana de visualización móvil, luego el escritorio.

Retrasar artículos grandes puede no ayudar

A veces, una página web se muestra en varias partes. La descarga de una imagen grande puede llevar más tiempo que el elemento de bloque de texto más grande.

Lo que sucede en este caso es que un PerformanceEntry se guarda para el elemento de nivel de bloque de texto más grande. Pero cuando se carga la imagen seleccionada en la parte superior de la pantalla, si este elemento ocupa más de la pantalla de los usuarios (su ventana de visualización), entonces otro PerformanceEntry el objeto se marcará para esta imagen.

Las imágenes pueden ser difíciles para las puntuaciones de LCP

Los editores web generalmente cargan imágenes a su tamaño original y luego usan HTML o CSS para cambiar el tamaño de la imagen para mostrarla en un tamaño más pequeño.

El tamaño original es lo que Google llama el tamaño "intrínseco" de la imagen.

Si un editor carga una imagen que tiene 2.048 píxeles de ancho y 1.152 píxeles de alto, esa altura y ancho de 2.048 x 1.152 se consideran el tamaño "intrínseco".

Ahora, si el editor cambia el tamaño de la imagen de 2048 x 1152 píxeles a 640 x 360 píxeles, la imagen de tamaño 640 × 360 se llama tamaño visible.

Con el fin de calcular el tamaño de la imagen, Google utiliza el tamaño más pequeño entre las imágenes de tamaño intrínseco y visible.

Nota sobre tamaños de imagen

Es posible obtener la puntuación de pintura más alta con un alto tamaño intrínseco que se redimensiona en HTML o CSS para que sea más pequeño.

Pero es mejor hacer coincidir el tamaño intrínseco de la imagen con el tamaño visible.

La imagen se descargará más rápido y su puntuación de pintura más importante aumentará.

Cómo LCP maneja imágenes de otro dominio

Las imágenes servidas desde otro dominio, como un CDN, generalmente no se tienen en cuenta en el cálculo de la mayor cantidad de pintura de contenido. Los editores que desean que estos recursos formen parte del cálculo deben definir lo que se denomina un encabezado Timing-Allow-Origin.

Agregar este encabezado a su sitio puede ser complicado porque si usa un carácter comodín (*) en la configuración, podría abrir su sitio a eventos de piratería.

Para hacer esto correctamente, debe agregar un dominio específico al rastreador de Google para incluirlo en la lista blanca para que pueda ver la información de sincronización de su CDN.

Entonces, en este punto, los recursos (como imágenes) que se cargan desde otro dominio (como desde un CDN) no se tendrán en cuenta en el cálculo de LCP.

Tenga en cuenta las Gotchas para saber

Todos los elementos que están en la pantalla de los usuarios (la ventana) se utilizan para calcular el LCP. Esto significa que las imágenes que se procesan fuera de la pantalla y que luego entran en el diseño una vez que se procesan pueden no contar para el contenido de mayor puntuación de pintura.

Por el contrario, los elementos que comienzan en la ventana del usuario y luego se eliminan de la pantalla se pueden contar como parte del cálculo del LCP.

Cómo obtener el puntaje LCP

Hay dos tipos de herramientas de puntuación. El primero se llama Herramientas de campo y el segundo se llama Herramientas de laboratorio.

Las herramientas de campo son medidas reales de un sitio. Las herramientas de laboratorio dan una puntuación virtual basada en un análisis simulado utilizando algoritmos que se aproximan a las condiciones de Internet que puede encontrar un usuario típico en un teléfono móvil.

Cómo optimizar para la pintura rica en contenido más grande

Hay tres áreas principales para optimizar (más una más para marcos JavaScript):

1. Servidores lentos
2. Representación de bloqueo de JavaScript y CSS
3. Tiempo de carga de recursos lento

Un servidor lento puede ser un problema con los niveles DDOS de piratería y tráfico de raspador en un host compartido o VPS. Puede encontrar alivio instalando un complemento de WordPress como WordFence para averiguar si está teniendo un ataque masivo y luego bloquearlo.

Otros problemas pueden ser una configuración incorrecta de un servidor dedicado o un VPS. Un problema típico puede ser la cantidad de memoria asignada a PHP.

Otros problemas podrían ser software desactualizado como una versión antigua de PHP o un software CMS obsoleto.

El peor escenario es un servidor compartido con varios usuarios que ralentiza su caja. En este caso, mudarse a un mejor host es la respuesta.

En general, puede ser útil aplicar correcciones como agregar caché, optimizar imágenes, arreglar CSS y JavaScript renderizados y precargar ciertos activos.

Google tiene un consejo interesante para administrar CSS que no es esencial para representar lo que ve el usuario:

<

blockquote>

"Elimine cualquier CSS no utilizado o muévalo a otra hoja de estilo si se usa en una página separada de su sitio.

Para cualquier CSS que no sea necesario para la representación inicial, use loadCSS para cargar archivos de forma asíncrona, lo que aprovecha rel = "preload" y onload.

<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>"

Herramientas de campo para puntaje LCP

Google enumera tres herramientas de campo:

PageSpeed ​​Insights
Search Console (informe de Core Web Vitals)
Informe de experiencia del usuario de Chrome

El último, Chrome User Experience Report, requiere una cuenta de Google y un proyecto de Google Cloud. Los dos primeros son más simples.

Herramientas de laboratorio para puntaje LCP

Las mediciones de laboratorio son puntajes simulados.
Google recomienda las siguientes herramientas:

Chrome DevTools
Faro
WebPageTest.org

Las dos primeras herramientas son proporcionadas por Google. La tercera herramienta es proporcionada por un tercero.

Citas

Cómo optimizar para LCP

¿Qué es el LCP?

Timing-Allow-Origin ataques de sincronización y encabezado