¿Qué es Largest Contentful Paint y cómo puedes mejorarlo?

¿Qué es Largest Contentful Paint y cómo puedes mejorarlo? 
Mejora del LCP con Fastly

Como sabe cualquiera que se preocupe por el SEO y el rendimiento del sitio web, Google Core Web Vitals (CWVs) son un aspecto fundamental al evaluar y mejorar la experiencia del cliente en tu sitio web. Estos CWV incluyen tres métricas clave: 

• Cargando: Largest Contentful Paint o LCP

• Interactividad: interacción con la siguiente pintura o INP

• Estabilidad visual: desplazamiento de diseño acumulativo o CLS

Esta pieza aborda la primera (y más impactante) de las métricas, LCP, y cómo mejorarla. 

¿Qué es LCP?

LCP mide el tiempo transcurrido entre el momento en que una página comienza a cargarse y cuando se renderiza el elemento más grande.  Los elementos que se miden suelen ser imágenes, videos y elementos de nivel de bloque que contienen nodos de texto. En pocas palabras, es el tiempo de espera más largo que tiene un usuario en tu sitio web mientras navega por él. 

Una buena medida es cualquier valor inferior a 2.5 segundos.

¿Por qué es importante LCP/por qué es importante para el rendimiento del sitio web? 

El LCP es fundamental tanto para la experiencia del usuario como para el resultado final de tu empresa: 

1. Afecta directamente la satisfacción del usuario: los clientes, visitantes y consumidores de tu sitio web son volubles. Incluso retrasos muy breves en los tiempos de carga pueden resultar en una oportunidad perdida. Piensa en la última vez que navegaste en un sitio lento... apostamos a que probablemente cerraste la ventana o al menos te irritó la experiencia. 

2. Mejora el SEO: Google afirma de forma directa y abierta que las CWV afectan la forma en que tu página aparece en los resultados de búsqueda. Un LCP deficiente se traduce en clasificaciones más bajas (y menos vistas en tu página). 

3. Reduce las tasas de rebote: la mala satisfacción del cliente (#1) se correlaciona directamente con tasas de rebote más altas. Con tiempos de carga más rápidos, puedes mantener contentos a los usuario y en el sitio. 

4. Aumenta las tasas de conversión: los clientes satisfechos y los sitios que cargan rápido generan tasas de conversión más altas. 

¿Cómo puedes mejorar el LCP? 

El uso de una CDN moderna es una de las formas más rápidas y eficaces de mejorar las métricas web esenciales, específicamente el largest contentful paint, la más importante de las tres CWV. 

Aunque la configuración de la Red de distribución de contenido puede ayudar a mejorar el INP y el CLS, no serán los principales impulsores. 

Largest Contentful Paint puede verse afectado directamente por la configuración de tu Red de distribución de contenido y el Diseño de API.  Una forma de optimizar el LCP es enfocarte en el Tiempo hasta el primer byte (TTFB). Al almacenar en caché las Respuesta de API y comprimir imágenes en el edge, puedes mejorar tu Tiempo hasta el primer byte y, por lo tanto, tu LCP. 

Diseño de API optimizado puede afectar seriamente la rapidez con la que se carga el contenido dinámico, ya que no solo ofrece una experiencia del usuario más personalizada, sino también más rápida. 

Realmente, el mejor enfoque es usar una CDN moderna que pueda ayudar con todos estos desafíos: 

¿Cómo puede Fastly ayudar a mejorar el LCP?

Una CDN moderna como Fastly puede ayudarte a mejorar tu puntuación de LCP al mejorar tu Tiempo hasta el primer byte (TTFB),  almacenar en caché respuestas de API y comprimir imágenes en el edge. 

Un Diseño de API optimizado y una red que mantiene activamente sus conexiones abiertas pueden mejorar significativamente el tiempo de carga de tu contenido de caché, tu contenido dinámico e incluso tu contenido no almacenado en caché, todo mientras ofreces una experiencia del usuario más personalizada y rápida.  

Distribución de contenido obsoleto

Fastly te permite servir ‘datos obsoletos’ cuando el servidor de origen tarda demasiado. Si un cliente intenta cargar una página, pero el servidor de origen no está disponible o tarda demasiado en responder, Fastly puede seguir sirviendo contenido ‘obsoleto’ (en caché) a ese visitante hasta que se resuelva el problema, lo que significa que no habrá interrupciones en la distribución de contenido a tu audiencia. Esto no solo mantiene la experiencia del usuario y la satisfacción, sino que también conserva tus clasificaciones de SEO (Google nunca ve que tu sitio no carga o carga lentamente), y cuando el origen vuelve a estar en funcionamiento, el contenido se actualiza. 

Manejo de solicitudes de gran volumen

La demanda cada vez mayor de los rastreadores web puede imponer una carga excesiva en tus servidores y afectarte negativamente. Fastly se puede configurar fácilmente para servir datos obsoletos a los rastreadores, lo que reduce la demanda en tus servidores. Los rastreadores siguen recibiendo contenido real y relevante, pero puede que no sea la versión más reciente. Manejamos sin esfuerzo un gran volumen de solicitudes (incluso ataques DDoS) sin sacrificar el rendimiento, enroutando de forma inteligente alrededor del “tiempo en internet”. 

Mejor clasificación de seguridad

La inclusión de nuestro DDoS, Bot Protection y seguridad de la capa de transporte (TLS) significa un sitio web más seguro para tus clientes y la prevención de varios ciberataques. Las actualizaciones del algoritmo de Google dejan claro una y otra vez que la seguridad de un sitio web tiene un peso importante en el factor de clasificación del SEO de un sitio web. Los sitios web con medidas de seguridad deficientes o inexistentes enfrentan impactos negativos en las clasificaciones y los resultados de búsqueda. 

Tiempos de carga más rápidos para archivos grandes

Si distribuyes archivos de video más grandes a tus clientes, Fastly puede ayudarte rápidamente a mejorar la velocidad de la página. Por lo general, Google no indexa archivos de video, a menos que estén en plataformas como Youtube; por lo tanto, si tu sitio web aloja varios archivos de video incrustados en el mismo servidor web, corres el riesgo de que la página cargue lentamente. Fastly puede distribuir versiones en caché de los archivos de video, una excelente manera de evitar este desafío. 

Almacenamiento en caché de contenido dinámico 

API 

Fastly ayuda a proteger tu servidor de origen de solicitudes de API excesivas. Las organizaciones suelen confundir el tráfico de API como demasiado dinámico para obtener beneficio de ser servido por su Red de distribución de contenido. Fastly ha defendido durante mucho tiempo las mejores prácticas en el Diseño de API que permiten que las Respuesta de API se almacenen en caché en el edge. Desafortunadamente, con demasiada frecuencia se descarta que las Respuesta de API sean “no almacenables en caché”, lo que significa que pierdes algunas de las mejoras más fáciles de rendimiento y fiabilidad que podrías obtener si simplemente almacenaras en caché tus Respuesta de API en una red de edge. La disponibilidad de las API puede afectar la disponibilidad de los sitio web y servicio de los socios, por lo que es de vital importancia que hagas esfuerzos para garantizar el nivel más alto de disponibilidad para tus API. Puedes hacerlo almacenando en caché más contenido de API en el edge con la Red de distribución de contenido adecuada. 

contenido dinámico 

Fastly también puede almacenar en caché contenido “dinámico” o que cambia con frecuencia (como información de la cuenta, productos específicos de la ubicación, inventario cambiante y nuevos titulares). Los clientes de las redes de distribución de contenido tradicionales se ven afectados, ya que su tráfico tiene que regresar hasta el origen, lo que genera tiempos de respuesta más lentos, mayores gastos de infraestructura y más costos asociados con los datos de salida de esas numerosas respuestas (innecesarias). En cambio, las CDN modernas hacen posible que tu empresa entregue contenido dinámico real que cambia con cada solicitud desde el edge, en lugar de hacerlo desde el origen. Esto te da la capacidad de ejecutar tu código más cerca del usuario final, eliminando la degradación del rendimiento costosa y que consume mucho tiempo. 

optimización de imágenes

Fastly ayuda a optimizar drásticamente las imágenes: al almacenar copias de una imagen en servidores distribuidos, se entrega al usuario final una imagen desde la ubicación más cercana. Esto reduce el tiempo de carga y te permite cambiar dinámicamente el tamaño, comprimir o convertir imágenes según el dispositivo y el tamaño de pantalla del usuario final. Al entregar la versión más optimizada de una imagen, no solo ofrecemos al usuario final la mejor experiencia posible, sino que también minimizamos el impacto común que los tiempos de carga de las imágenes causan en un sitio web. Si puedes optimizar el manejo y la entrega de imágenes en tu sitio o aplicación para hacer que cada imagen sea más pequeña, con tiempos de carga más rápidos (y menos llamadas al origen), esto se traducirá en un gran beneficio para el rendimiento general.

Si te interesa saber más sobre cómo Fastly puede ayudarte a mejorar tu LCP, ponte en contacto .