¿Qué es Largest Contentful Paint? Una explicación sencilla

Largest Contentful Paint (LCP) es una métrica de experiencia del usuario de Google integrada en los sistemas de clasificación en 2021.

LCP es uno de los tres Elementos básicos de la Internet (CWV) Métricas que rastrean métricas de rendimiento técnico que impactan la experiencia del usuario.

Los Core Internet Vitals existen paradójicamente, con Google brindando orientación que resalta su importancia, pero minimizando su impacto en las clasificaciones.

LCP, al igual que las otras señales CWV, es útil para diagnosticar problemas técnicos y garantizar que su sitio internet cumpla con un nivel básico de funcionalidad para los usuarios.

¿Qué es Largest Contentful Paint?

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.

En concreto, el tiempo que transcurre desde que se inicia la carga de la página hasta que se muestra la imagen o el bloque de texto más grande en la ventana gráfica del usuario. Todo lo que se encuentre por debajo del pliegue no cuenta.

Las imágenes, las imágenes de carteles de vídeo, las imágenes de fondo y los elementos de texto a nivel de bloque, como las etiquetas de párrafo, son elementos típicos que se miden.

LCP consta de las siguientes submétricas:

Optimizar para LCP significa optimizar para cada una de estas métricas, de modo que lleve menos de 2,5 segundos cargar y mostrar los recursos de LCP.

A continuación se muestra una escala de umbral para su referencia:

Umbrales de LCP

Veamos ahora qué significan estas submétricas y cómo puedes mejorarlas.

Tiempo hasta el primer byte (TTFB)

TTFB es el tiempo de respuesta del servidor y mide el tiempo que tarda el navegador del usuario en recibir el primer byte de datos de su servidor. Esto incluye el tiempo de búsqueda de DNS, el tiempo que tarda el servidor en procesar las solicitudes y las redirecciones.

La optimización de TTFB puede reducir significativamente el tiempo de carga common y mejorar el LCP.

El tiempo de respuesta del servidor depende en gran medida de:

• Consultas de base de datos.
• Errores de caché de CDN.
• Representación ineficiente del lado del servidor.
• Hospedaje.

Repasemos cada uno:

1. Consultas de bases de datos

Si el tiempo de respuesta es alto, intente identificar la fuente.

Por ejemplo, puede deberse a consultas mal optimizadas o a un gran volumen de consultas que ralentizan el tiempo de respuesta del servidor. Si tienes una base de datos MySQL, puedes Registrar consultas lentas para encontrar qué consultas son lentas.

Si tienes un sitio internet de WordPress, puedes utilizar el Monitor de consultas Complemento para ver cuánto tiempo toman las consultas SQL.

Otras grandes herramientas son Fuego negro o Nueva reliquiaque no dependen del CMS o stack que utilices, pero requieren instalación en tu internet hosting/servidor.

2. Errores en la caché de CDN

Una falla de caché de CDN ocurre cuando un recurso solicitado no se encuentra en la caché de CDN y la solicitud se reenvía para buscarlo en el servidor de origen. Este proceso lleva más tiempo, lo que genera una mayor latencia y tiempos de carga más prolongados para el usuario ultimate.

Por lo common, su proveedor de CDN tiene un informe sobre cuántas fallas de caché tiene.

Ejemplo de informe de caché de CDN

Si observa un alto porcentaje (>10%) de fallas de caché, es posible que deba comunicarse con su proveedor de CDN o con el soporte de alojamiento en caso de que haya administrado alojamiento con caché integrado para resolver el problema.

Una razón que puede provocar errores de caché es cuando hay un ataque de spam de búsqueda.

Por ejemplo, una docena de dominios spam enlazan a tus páginas de búsqueda interna con consultas spam aleatorias como (/?q=甘肃代), que no se almacenan en caché porque el término de búsqueda es diferente cada vez. El problema es que Googlebot los rastrea de forma agresiva, lo que puede provocar tiempos de respuesta elevados en el servidor y errores en la memoria caché.

En ese caso, y en common, se trata de una Buena práctica para bloquear Busque o filtre URLs a través de robots.txt. Pero una vez que las bloquee a través de robots.txt, puede encontrarlas URL que se indexarán porque tienen backlinks de sitios internet de baja calidad.

Pero no tengáis miedo. John Mueller dijo Se aclararía con el tiempo.

A continuación se muestra un ejemplo actual de la consola de búsqueda de un tiempo de respuesta del servidor (TTFB) elevado causado por errores de caché:

Pico de rastreo de páginas de búsqueda 404 que tienen un tiempo de respuesta del servidor alto

3. Representación ineficiente del lado del servidor

Es posible que tenga ciertos componentes en su sitio internet que dependan de API de terceros.

Por ejemplo, has visto las cifras de lecturas y de publicaciones compartidas en los artículos de SEJ. Obtenemos esas cifras de diferentes API, pero en lugar de obtenerlas cuando se realiza una solicitud al servidor, las recuperamos previamente y las almacenamos en nuestra base de datos para que se muestren más rápido.

Imaginemos que nos conectamos para compartir el recuento y las API de GA4 cuando se realiza una solicitud al servidor. Cada solicitud demora entre 300 y 500 ms en ejecutarse y agregaríamos un retraso de aproximadamente 1000 ms debido a la representación ineficiente del lado del servidor. Por lo tanto, asegúrese de que su backend esté optimizado.

4. Hospedaje

Tenga en cuenta que el alojamiento es muy importante para un TTFB bajo. Si elige el alojamiento adecuado, podrá reducir su TTFB entre dos y tres veces.

Elige un internet hosting con CDN y almacenamiento en caché integrados en el sistema. Esto te ayudará a evitar comprar un CDN por separado y ahorrar tiempo en su mantenimiento.

Por lo tanto, invertir en el internet hosting adecuado dará sus frutos.

Lea instrucciones más detalladas:

Ahora, veamos otras métricas mencionadas anteriormente que contribuyen al LCP.

Retraso en la carga de recursos

El retraso en la carga de recursos es el tiempo que tarda el navegador en localizar y comenzar a descargar el recurso LCP.

Por ejemplo, si tiene una imagen de fondo en su sección de héroe que requiere que se carguen archivos CSS para ser identificada, habrá un retraso igual al tiempo que el navegador necesita para descargar el archivo CSS para comenzar a descargar la imagen LCP.

En el caso en que el elemento LCP sea un bloque de texto, este tiempo es cero.

Al optimizar la rapidez con la que se identifican y cargan estos recursos, puede mejorar el tiempo que lleva mostrar contenido crítico. Una forma de hacerlo es precargar los archivos CSS y las imágenes LCP configurando fetchpriority=”excessive” en la imagen para que comience a descargar el archivo CSS.

Pero un enfoque mejor (si tienes suficiente management sobre el sitio internet) es incorporar en línea el CSS crítico necesario para la parte superior de la página, de modo que el navegador no pierda tiempo descargando el archivo CSS. Esto ahorra ancho de banda y cargará previamente solo la imagen.

Por supuesto, es incluso mejor si diseñas páginas internet para evitar imágenes destacadas o controles deslizantes, ya que estos suelen… No agregue valory los usuarios tienden a pasarlos por alto porque son una distracción.

Otro issue importante que contribuye al retraso de la carga es redirecciones.

Si tienes backlinks externos con redirecciones, no hay mucho que puedas hacer. Pero tienes management sobre tus enlaces internos, así que intenta encontrar enlaces internos con redirecciones, generalmente debido a barras oblicuas finales faltantes, versiones que no son de la WWW o URL modificadas, y reemplázalos con destinos reales.

Hay una serie de herramientas técnicas de website positioning Puede usarlo para rastrear su sitio internet y encontrar redirecciones para reemplazar.

Duración de la carga de recursos

La duración de la carga del recurso se refiere al tiempo actual empleado en descargar el recurso LCP.

Incluso si el navegador encuentra y comienza a descargar recursos rápidamente, las velocidades de descarga lentas pueden afectar negativamente al LCP. Depende del tamaño de los recursos, la velocidad de conexión de crimson del servidor y las condiciones de crimson del usuario.

Puede reducir la duración de la carga de recursos implementando:

• Formato WebP.
• Imágenes de tamaño adecuado (hacer que el tamaño intrínseco de la imagen coincida con el tamaño seen).
• Priorización de carga.
• CDN.

Retardo de renderizado de elementos

El retraso de representación del elemento es el tiempo que tarda el navegador en procesar y representar el elemento LCP.

Esta métrica está influenciada por la complejidad de su HTML, CSS y JavaScript.

Minimizar los recursos que bloquean la representación y optimizar el código puede ayudar a reducir este retraso. Sin embargo, puede suceder que tenga una gran cantidad de scripts de JavaScript ejecutándose, lo que bloquea el hilo principaly la representación del elemento LCP se retrasa hasta que se completen esas tareas.

Aquí es donde los valores bajos de la métrica Tiempo whole de bloqueo (TBT) son importantes, ya que mide el tiempo whole durante el cual el hilo principal está bloqueado por tareas largas en la carga de la página, lo que indica la presencia de scripts pesados ​​que pueden renderizado retardado y sensibilidad.

Una forma de mejorar no solo la duración y el retraso de la carga, sino también todas las métricas generales de CWV cuando los usuarios navegar dentro de su sitio internet es implementar Reglas de especulación API Para futuras navegaciones. Al previsualizar las páginas a medida que los usuarios pasan el mouse sobre los enlaces o las páginas por las que probablemente navegarán, puede hacer que sus páginas se carguen instantáneamente.

Cuidado con estas trampas de puntuación

Todos los elementos de la pantalla del usuario (la ventana gráfica) se utilizan para calcular el LCP. Esto significa que las imágenes que se renderizan fuera de la pantalla y luego se desplazan hacia el diseño, una vez renderizadas, pueden no contar como parte de la puntuación de Largest Contentful Paint.

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

Cómo medir la puntuación LCP

Hay dos tipos de herramientas de puntuación. La primera se llama Herramientas de campoy el segundo se llama Herramientas de laboratorio.

Las herramientas de campo son mediciones reales de un sitio.

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

Aquí hay una forma de encontrar recursos LCP y medir el tiempo para mostrarlos a través de Herramientas de desarrollo > Actuación informe:

Puede leer más en nuestra guía detallada sobre Cómo medir las métricas de CWVdonde podrá aprender a solucionar problemas no solo de LCP sino también de otras métricas en common.

La optimización de LCP es un tema mucho más profundo

Mejorar el LCP es un paso essential para mejorar el CVW, pero puede ser la métrica de CWV más difícil de optimizar.

LCP consta de múltiples capas de submétricas, cada requiriendo una comprensión profunda para una optimización efectiva.

Esta guía le ha brindado una thought básica sobre cómo mejorar LCP, y los conocimientos que ha adquirido hasta ahora le ayudarán a realizar mejoras significativas.

Pero todavía hay más por aprender. Optimizar cada submétrica es una ciencia llena de matices. Mantente atento, ya que publicaremos guías detalladas dedicadas a optimizar cada submétrica.

Más recursos:

Crédito de la imagen destacada: BestForBest/Shutterstock