Core Web Vitals Largest Contentful Paint

La cantidad de tiempo que alguien tiene que esperar a que se cargue una página web es uno de los componentes más impactantes de la experiencia del usuario de un sitio. Sin embargo, los usuarios experimentan el "tiempo de carga de la página" en formas que van más allá de simplemente "cuándo la página se descarga" o "cuándo la página comienza a descargarse". En cambio, ven el tiempo de carga más en función de "cuánto tiempo hasta que puedo obtener el contenido que estoy buscando".

Para cuantificar, rastrear y optimizar esta idea de la experiencia del usuario, Google ha introducido una métrica llamada "Pintura con contenido más grande" como parte de Core Web Vitals.

Largest Contentful Paint, explicado

El Largest Contentful Paint (LCP) es la cantidad de tiempo que le toma a una página mostrar el bloque de contenido más grande visible en la ventana gráfica. Mide cuánto tiempo deben esperar los usuarios para ver el contenido más importante de la página.

LCP es una métrica de la experiencia del usuario que responde a la pregunta "¿cuánto tiempo hasta que una página muestra a los usuarios eso por lo qué están aquí?"

LCP is a user experience metric

Al medir y rastrear el LCP, el reloj comienza tan pronto como el navegador del usuario solicita la URL de su servidor.

Es importante tener en cuenta que **el LCP es fundamentalmente diferente del concepto de tiempo de carga de la página.

Pero a una persona real no le importa cuándo el servidor de un sitio web comienza a enviar el primer dato. Les importa cuánto tiempo tendrán que esperar hasta que puedan comenzar a consumir el contenido de la página.

¿Cuál es un buen puntaje de LCP?

Según Google, para brindar la mejor experiencia de usuario tu sitio debe tener un LCP de 2.5 segundos o menos.

Al igual que las otras métricas de Core Web Vitals, LCP se califica en un espectro de "bueno" a "deficiente":

  • Bueno: Cualquier LCP de 2,5 segundos o menos se considera bueno.

  • Necesita mejorar: Las puntuaciones entre 2,5 segundos y 4,0 segundos necesitan mejorar.

  • Deficiente: Un LCP de más de 4.0 segundos es deficiente y, como resultado, tus usuarios tienen una mala experiencia cuando visitan tu sitio web.

Cómo funciona LCP

En términos muy simples, la puntuación LCP funciona registrando cuánto tiempo tardan los elementos de la página en cargarse y procesarse una vez que el usuario (o la herramienta, si se trata de una prueba de laboratorio) solicita la página desde su navegador. Google analiza los tamaños de los diversos elementos de contenido que se mostrarán dentro de la ventana gráfica del dispositivo del usuario, determina cuál es el más grande y comienza a contar cuánto tiempo hasta que se procesa ese elemento.

Actualmente, Google rastrea los siguientes elementos al calcular First Contentful Paint:

  • Elementos <img> o <image>: Como probablemente adivinaste, estas son etiquetas para imágenes. Esto incluye una etiqueta <img> que aparece en un <svg>.

  • Elementos <video>: Para videos, LCP mira lo que se conoce como la "imagen póster". Esta es la imagen especificada usando el atributo controls poster=”” dentro de la etiqueta <video>.

  • Imágenes de fondo: Elementos que utilizan la función CSS url() para cargar una imagen como fondo. Las imágenes cargadas con una función de gradientes con CSS no se rastrearán para propósitos de LCP.

  • Elementos de texto: Para medir el contenido de texto, LCP busca elementos en bloque que especifican texto , como párrafos, encabezados y listas.

Al medir el tamaño del LCP, Google solo observa lo que el usuario puede ver en la ventana gráfica. Entonces, si, por ejemplo, parte de una imagen se extiende fuera de la ventana gráfica o un bloque de texto usa la propiedad CSS de overflow (excedente) para ocultar texto, las partes de esos elementos que no son visibles para el usuario no se miden para LCP.

En otras palabras, si la imagen A tiene 100 x 100 píxeles, pero el 75% de esa imagen está fuera de la pantalla, mientras que la imagen B de 50 x 50 es completamente visible para el usuario, la imagen B se mediría para LCP aunque sea una imagen más pequeña.

También debes recordar que cualquier relleno o margen alrededor de los elementos no cuenta al determinar el tamaño para LCP.

Cambios de diseño y LCP

Muchos sitios web se cargan por etapas, lo que provoca cambios en el diseño y la aparición de nuevos elementos en las pantallas de los usuarios. En estos casos, suceden algunas cosas en el cálculo de LCP.

  1. El navegador identifica y registra el elemento más grande en la pantalla después de que se ha renderizado el primer fotograma. Con una publicación de blog, por ejemplo, es probable que este sea el texto del encabezado con el título del artículo.

  2. Cuando se ha renderizado el segundo fotograma y aparece un nuevo elemento, el navegador crea un segundo registro identificando el nuevo elemento más grande (si lo hay). Así es como el navegador manejaría la carga de una imagen de encabezado en el segundo marco para una publicación de blog.

  3. A medida que se cargan y renderizan nuevos elementos, el navegador registrará todos los que aparezcan en la ventana gráfica que sean más grandes que el elemento más grande anterior. Estos elementos más grandes se convertirán en el elemento que se rastrea como LCP.

  4. A medida que el diseño cambia y los elementos se eliminan de la ventana gráfica, eso no cambia lo que se registra como el elemento más grande. Entonces, si la publicación del blog carga un gran bloque de texto que es empujado fuera de la página por elementos más pequeños, como un bloque de tabla de contenido, ese texto inicial sigue siendo el contenido más grande a pesar de que ahora está fuera de la ventana gráfica.

  5. El navegador deja de rastrear LCP una vez que el usuario interactúa con la página, ya que la interacción del usuario a menudo cambia lo que está visible en la ventana gráfica (al desplazarse hacia abajo en la página, por ejemplo).

En el siguiente ejemplo, vemos los primeros fotogramas de una página que representan varios elementos:

Page Loading elemental frames

Entonces, a medida que se carga esta página, presenta algunos elementos de texto de varios tamaños y luego algunas imágenes.

Entonces, así es como funcionaría LCP para esta página:

  1. En el primer fotograma, el texto pequeño es el primer elemento cargado y renderizado (esto es lo que se conoce como First Contentful Paint).

  2. En el segundo marco, un elemento grande que contiene un texto de encabezado se carga junto con algunos elementos de texto más pequeños a continuación. Este elemento de texto con el encabezado se convierte en el elemento más grande de la página.

  3. Se cargan más elementos de texto. Sin embargo, todos son más pequeños que el elemento de encabezado, por lo que no se cuentan para LCP.

  4. Una imagen grande se carga en la parte inferior de la página, pero solo una pequeña parte es visible en la ventana gráfica. Dado que esta parte visible de la imagen es más pequeña que el elemento de texto del encabezado, esta imagen no cuenta para la pintura con contenido más grande de la página.

  5. Se representa una imagen en la página. Esta imagen es más grande que el bloque de texto del encabezado, por lo que se convierte en el elemento más grande de la página.

El tiempo que tarda la página en cargar la imagen grande, desde el momento en que el usuario solicita la URL del servidor del sitio, es la puntuación LCP. Entonces, si la imagen se carga después de 1 segundo, el LCP sería "bueno", mientras que si la imagen se renderiza en 3 segundos, el LCP sería "pobre".

Por qué es importante el Largest Contentful Paint

El Largest Contentful Paint es una forma medible y precisa de medir cuánto tiempo tarda una página en ser útil cuando se carga para los usuarios de la vida real. Esto lo convierte en un parámetro fundamental para evaluar y calificar la experiencia del usuario de un sitio web. Además, es una métrica fácil de rastrear y optimizar, lo que siempre ayuda.

Más allá de la experiencia del usuario, y a un nivel muy práctico, Largest Contentful Paint es importante porque Google usa puntajes LCP como parte de su métrica Core Web Vitals al clasificar sitios web en los resultados de búsqueda.

Tener un LCP deficiente para tu sitio no solo significa que tus usuarios están esperando más de lo debido para que se cargue el contenido. También podría tener un impacto negativo en el SEO, evitando que tu sitio aparezca en la parte superior de los resultados de búsqueda.

Medición y monitoreo de Largest Contentful Paint

Como el Cumulative Layout Shift (otro Core Web Vital), el LCP se puede medir tanto con herramientas de laboratorio como de campo.

Herramientas de campo para LCP:

Herramientas de campo para analizar LCP:

Mejora de la puntuación LCP de tu sitio web

Si tu sitio web no obtiene la puntuación más alta de Contentful Paint que estás buscando, ¡no te aflijas! Los pasos a continuación te ayudarán a optimizar LCP y mejorar el rendimiento de tus páginas.

Optimizar imágenes

La optimización de imágenes es una de las mejores cosas que puedes hacer por la puntuación LCP de tu sitio web. Si bien las imágenes son excelentes para crear contenido atractivo y de alta calidad, también son una de las principales causas de los largos tiempos de espera de los usuarios a medida que se cargan las páginas.

Lo mejor que puedes hacer es reducir el tamaño de una imagen; reducir sus dimensiones a través de HTML no cambia el tiempo que tarda esa imagen en cargarse y procesarse. Comprime tus imágenes para reducir la cantidad de tiempo que lleva descargarlas de tu servidor.

También debes utilizar formatos de imagen modernos como PNG o SVG (si tienes la experiencia técnica para implementar PNG correctamente…).

Minificar, aplazar y minimizar

JavaScript y CSS también pueden bloquear la carga de contenido, lo que da lugar a puntuaciones de LCP deficientes. Cuando este es el caso, hay algunos pasos que debes seguir para optimizar tu LCP:

  • Minimiza el JavaScript y CSS de tu página. Minificación es el proceso de eliminar espacios y caracteres innecesarios del código. Estos espacios, caracteres y comentarios son útiles para los humanos que leen código, pero no son necesarios para los navegadores.

  • Aplazar scripts y archivos no críticos hasta que la página cargue el contenido más importante. Puedes colocar estos archivos debajo del pliegue en el código de la página o usar el atributo defer para que se carguen después del contenido de la página.

  • Si todo lo demás falla, minimiza la cantidad de JavaScript y CSS que bloquean el procesamiento que tienes en tu sitio web. Debes buscar con regularidad scripts innecesarios y código no utilizado en tus páginas. Si tienes un script que bloquea LCP, considera seriamente si es realmente necesario para el funcionamiento de tu sitio.

Mejora el rendimiento de tu servidor

El rendimiento lento del servidor definitivamente dará como resultado algunos puntajes de LCP bajos. Si tu servidor simplemente tarda mucho en responder a las solicitudes, por definición, tu contenido tardará mucho en cargarse.

Algunas de las razones típicas de los tiempos de respuesta deficientes del servidor incluyen:

  • Un ataque distribuido de denegación de servicio, también conocido como DDoS. Esto es cuando alguien abruma deliberadamente un servicio o red con una gran cantidad de tráfico.

  • Tu servidor está mal configurado o tiene un software desactualizado.

  • Tu plataforma CMS está desactualizada o tiene un rendimiento inferior.

  • Has elegido optar por un servicio de hosting económico que utiliza servidores compartidos con muchos otros usuarios.

Para evitar estos problemas, asegúrate siempre de que tu servidor y CMS estén actualizados y ejecutando la última versión. También debes evitar ir con el servicio de hosting más barato que puedas encontrar. Si bien puedes ahorrar algo de dinero a corto plazo, los problemas de rendimiento, como los bajos puntajes de LCP, no valen la pena.

No ignores el Largest Contentful Paint

Puedes tener la tentación de ignorar los problemas de LCP si crees que tu sitio web ya es rápido. Incluso podrías tener un tiempo muy bajo hasta el primer byte. Sin embargo, no monitorear LCP y abordar los problemas es un gran error que afectará no solo la usabilidad de tu sitio, sino también su capacidad para atraer clientes en primer lugar.

Además, la incorporación de Google de LCP y otros Core Web Vitals en su algoritmo de posicionamiento muestra que sigue dando prioridad a una buena experiencia de usuario en la web. Por lo tanto, corregir y optimizar tus puntuaciones de LCP te beneficiará a ti y a tu empresa, no solo a otras personas en la web.