¿Cuál es la pintura con contenido más grande: una explicación sencilla?

Largest Contentful Paint (LCP) es una métrica de la experiencia del usuario de Google que se convirtió en un factor de clasificación en 2021.

Esta guía explica qué es LCP y cómo lograr las mejores puntuaciones.

¿Cuál es la pintura con contenido más grande?

LCP es una medida de cuánto tiempo tarda el contenido principal de una página en descargarse y estar listo para interactuar con él.

Lo que se mide es la imagen o bloque de contexto más grande dentro de la ventana gráfica del usuario. Cualquier cosa que se extienda más allá de la pantalla no cuenta.

Los elementos típicos que se miden son imágenes, imágenes de carteles de video, imágenes de fondo y elementos de texto a nivel de bloque como etiquetas de párrafo.

¿Por qué se mide el LCP?

Se eligió LCP como una métrica clave para la puntuación de Core Web Vitals porque mide con precisión qué tan rápido se puede usar una página web.

Además, es fácil de medir y optimizar.

Elementos a nivel de bloque utilizados para calcular la puntuación LCP

Los elementos a nivel de bloque que se utilizan para calcular la puntuación de pintura con mayor contenido pueden ser los

y

elementos, así como el título, div, forman elementos.

Anuncio publicitario

Continuar leyendo a continuación

Se puede utilizar cualquier elemento HTML a 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 con contenido más grande.

LCP es una métrica 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 haciéndolo más pequeño o eliminando cualquier cosa que impida que se descargue rápidamente.

Debido a que Google incluye la mayoría de los sitios en el índice de dispositivos móviles primero, es mejor optimizar primero la ventana gráfica móvil y luego el escritorio.

Es posible que retrasar elementos grandes no ayude

A veces, una página web se representa en partes. Una imagen destacada grande puede tardar más en descargarse que el elemento de nivel de bloque de texto más grande.

Lo que sucede, en este caso, es que un PerformanceEntry se registra para el elemento de nivel de bloque de texto más grande.

Pero cuando se carga la imagen destacada en la parte superior de la pantalla, si ese elemento ocupa más de la pantalla del usuario (su ventana gráfica), entonces otro PerformanceEntry objeto se informará para esa imagen.

Anuncio publicitario

Continuar leyendo a continuación

Las imágenes pueden ser complicadas para las puntuaciones LCP

Los editores web comúnmente cargan imágenes en su tamaño original y luego usan HTML o CSS para cambiar el tamaño de la imagen para que se muestre en un tamaño más pequeño.

El tamaño original es lo que Google denomina el tamaño “intrínseco” de la imagen.

Si un editor sube una imagen que tiene 2048 píxeles de ancho y 1152 píxeles de alto, esa altura y ancho de 2048 x 1152 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 de 640 × 360 se denomina tamaño visible.

A los efectos 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 los tamaños de imagen

Es posible lograr una alta puntuación de pintura con contenido más grande con una imagen de gran tamaño intrínseco que se redimensiona con HTML o CSS para que sea más pequeña.

Pero es una buena práctica hacer que el tamaño intrínseco de la imagen coincida con el tamaño visible.

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

Cómo maneja LCP las imágenes servidas desde otro dominio

Las imágenes servidas desde otro dominio, como desde un CDN, generalmente no se cuentan en el cálculo de la pintura con contenido más grande.

Los editores que quieran que esos recursos formen parte del cálculo deben establecer lo que se llama un encabezado Timing-Allow-Origin.

Agregar este encabezado a su sitio puede ser complicado porque si usa un comodín

en la configuración, podría abrir su sitio a eventos de piratería.

Para hacerlo correctamente, tendría que agregar un dominio que sea específico del rastreador de Google para incluirlo en la lista blanca para que pueda ver la información de tiempo de su CDN.

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

Tenga cuidado con estos “errores” de puntuación

Todos los elementos que están en la pantalla del usuario (la ventana gráfica) se utilizan para calcular el LCP. Eso significa que las imágenes que se procesan fuera de la pantalla y luego cambian al diseño una vez que se procesan pueden no contar como parte de la puntuación de pintura con contenido más grande.

Anuncio publicitario

Continuar leyendo a continuación

En el extremo opuesto, los elementos que comienzan en la ventana del usuario y luego salen de la pantalla pueden contarse como parte del cálculo de LCP.

Cómo obtener la puntuación LCP Hay dos tipos de herramientas de puntuación. El primero se llama Herramientas de campo, y el segundo se llamaHerramientas de laboratorio

.

Las herramientas de campo son medidas reales de un sitio.

Las herramientas de laboratorio otorgan una puntuación virtual basada en un rastreo simulado utilizando algoritmos que se aproximan a las condiciones de Internet que podría encontrar un usuario típico en un teléfono móvil.

Cómo optimizar la pintura con mayor contenido

  1. Hay tres áreas principales para optimizar (más una más para los marcos de JavaScript):
  2. Servidores lentos.
  3. JavaScript y CSS que bloquean el renderizado.

Tiempos de carga de recursos lentos.

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

Anuncio publicitario

Continuar leyendo a continuación

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

Otro problema podría ser un software desactualizado, como una versión antigua de PHP o un software CMS desactualizado.

El peor de los casos es un servidor compartido con varios usuarios que ralentizan su caja. En ese caso, mudarse a un mejor anfitrión es la respuesta.

Por lo general, aplicar correcciones como agregar almacenamiento en caché, optimizar imágenes, corregir CSS y JavaScript que bloquean el procesamiento y precargar ciertos activos puede ayudar.

Google tiene un buen consejo para lidiar con CSS que no es esencial para representar lo que ve el usuario:

“Elimine por completo 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.

Herramientas de campo para la puntuación LCP

Google enumera tres herramientas de campo:

Anuncio publicitario

Continuar leyendo a continuación

El último, el Informe de experiencia del usuario de Chrome, requiere una cuenta de Google y un proyecto de Google Cloud. Los dos primeros son más sencillos.

Herramientas de laboratorio para la puntuación LCP

Las mediciones de laboratorio son puntuaciones simuladas.

Google recomienda las siguientes herramientas:

Google proporciona las dos primeras herramientas. La tercera herramienta la proporciona un tercero.

Citas

Cómo optimizar para LCP

¿Qué es LCP?

Timing Attacks y el encabezado Timing-Allow-Origin

Anuncio publicitario

Continuar leyendo a continuación Crédito de la imagen destacada:

Paulo Bobita

Botón volver arriba