Saltar al contenido

Qué es Largest Contentful Paint y Cómo Mejorarlo para Ecommerce

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

La velocidad de la página. Este aspecto crítico de tu sitio web de comercio electrónico no puede ser subestimado. El éxito de tu negocio online a menudo depende de cuán rápido se carga tu sitio web y entrega contenido a tus posibles clientes. Aquí es donde entra la métrica del Largest Contentful Paint (LCP).

El LCP es una de las métricas más críticas de Google Web Vitals y se ha convertido en un factor de clasificación vital en los resultados de los motores de búsqueda. En este artículo, echamos un vistazo a varios puntos clave que debes conocer para entender, medir y optimizar eficazmente el LCP de tu sitio web de comercio electrónico. ¡Comencemos!

Contenido:

¿Qué es Largest Contentful Paint?

El Largest Contentful Paint (LCP) mide el tiempo que tarda en cargar completamente (o "renderizar") la imagen o bloque de texto más grande visible dentro del área de visualización, en el momento en que la página comienza a cargarse. En términos más simples, te dice cuándo la parte más significativa del contenido de tu página web se vuelve visible para tus visitantes. 

Largest Contentful Paint

¿Qué es una buena puntuación de LCP?

Para una excelente experiencia del usuario, los sitios de comercio electrónico deben apuntar a un LCP de menos de 2.5 segundos. Para asegurarte de que la mayoría de los usuarios lo experimenten, concéntrate en el percentil 75 de las cargas de página en dispositivos móviles y de escritorio.

¿Por qué el Largest Contentful Paint es Importante para Ecommerce?

El Largest Contentful Paint (LCP) es una métrica importante para medir la velocidad de carga percibida, ya que marca el punto en el proceso de carga de la página en el que probablemente se haya cargado el contenido principal que se encuentra por encima del pliegue

Un LCP rápido significa que los usuarios pueden ver rápidamente el contenido que les importa y se asegura de que la página sea útil (y funcional). Por otro lado, un LCP lento hará que la página parezca rota para los usuarios, lo que los llevará a abandonar el sitio web.

Comienza a monitorizar el Page Speed con AI gratis.

Aprovecha el poder de Machine Learning para analizar y optimizar el rendimiento de tu ecommerce, ingresando la URL a continuación.

Cómo Medir el Largest Contentful Paint

Ahora que comprendes qué es el LCP y por qué es importante, ¿cómo puedes medirlo? El primer paso es entender cómo se determina el LCP (sin entrar en demasiados detalles técnicos). Luego, es necesario comprender qué herramientas pueden ayudarte a medir esta métrica.

Identificar el Elemento de Largest Contentful Paint

Según se especifica actualmente en la API de Largest Contentful Paint, los tipos de elementos considerados para el Largest Contentful Paint son:

  • elementos de imagen
  • elementos de imagen dentro de un elemento svg
  • elementos de video con una imagen de póster/destacada 
  • elementos con una imagen de fondo cargada a través de la función url() 
  • elementos de nivel de bloque como H1, H2, H3, p y div
  • el primer fotograma pintado de elementos de video con reproducción automática (a partir de agosto de 2023)
  • el primer fotograma de un formato de imagen animada, como GIF animados (a partir de agosto de 2023)

De la lista de elementos identificados, se compara el tamaño del elemento y se determina el más grande. Hay algunas pautas para determinar el elemento con el Largest Contentful Paint: 

  • El tamaño informado para el LCP suele ser el tamaño visible para el usuario. Por lo tanto, si parte del elemento está fuera de la ventana de visualización o está recortado, esa parte no se cuenta como parte del tamaño de los elementos. 
  • Si los elementos de imagen se redimensionan desde su tamaño inicial, el tamaño informado que determina la puntuación será el tamaño visible o el tamaño intrínseco, lo que sea más pequeño. Esto significa que las imágenes que se reducen a un tamaño mucho más pequeño que su tamaño intrínseco solo informarán el tamaño en el que se muestran, mientras que las imágenes que se estiran o agrandan informarán solo sus tamaños intrínsecos.

Herramientas para Ayudar a Medir el LCP

Si aún no estás seguro de cómo se mide el LCP, qué elemento se elige, etc., no te preocupes. Hay herramientas que pueden ayudarte a identificar automáticamente el elemento LCP y medir la puntuación de LCP:

  • El Google PageSpeed Insights te permite realizar pruebas espontáneas para ver tus resultados actuales de LCP.
  • Valido Web Score tiene integrado PageSpeed Insights y también te permite realizar pruebas tanto ad hoc como programadas según tus necesidades de monitoreo. Además, Web Score te permite probar otras métricas de Web Vitals, así como las puntuaciones de Google Lighthouse , ofreciendo recomendaciones prácticas sobre cómo optimizar el rendimiento general de tu sitio web.

Cómo Mejorar el Largest Contentful Paint para Ecommerce

Para mejorar la métrica del Largest Contentful Paint en tu sitio de comercio electrónico, primero debes comprender los factores que influyen en el tiempo total que tarda en cargarse el elemento/recursos LCP. La visualización a continuación desglosa los componentes involucrados en esta carga.

Desglose de Largest Contentful Paint
Desglose de Largest Contentful Paint

Como puedes ver en la imagen anterior, la carga del recurso LCP consta de 4 partes:

  • Time to first byte (TTFB): El tiempo desde que el usuario inicia la carga de la página hasta que el navegador recibe el primer byte de la respuesta del documento HTML. Retraso en la carga del recurso: El retraso entre TTFB y cuando el navegador comienza a cargar el elemento LCP.
  • Resource load delay: La demora entre TTFB y cuando el navegador comienza a cargar el elemento LCP.
  • Resource load time: El tiempo que lleva cargar el recurso LCP en sí.
  • Element render delay: La demora desde que el recurso LCP termina de cargarse (el elemento es visible) hasta que el elemento LCP se representa por completo (el elemento es interactivo).

Por lo tanto, debes abordar cada uno de estos componentes para optimizar por completo la métrica del Largest Contentful Paint para tu sitio de comercio electrónico. Veamos cada uno de ellos.

1. Acelerar la Carga del Recurso LCP

Hacer que tu recurso LCP comience a cargarse lo antes posible es una de las cosas más importantes que puedes hacer para acelerar el rendimiento de tu sitio web de comercio electrónico. Afortunadamente, no es un paso difícil de optimizar.

Una regla general es asegurarte de que tu recurso LCP comience a cargarse al mismo tiempo que el primer recurso de la página. Si comienza más tarde, hay margen de mejora. Hay dos factores clave que afectan a la rapidez con la que se carga un recurso LCP:

Cuando se encuentra el recurso: Tu recurso LCP siempre debe ser descubrible en el código fuente HTML. Por ejemplo, si el elemento LCP es una imagen, sus atributos de origen deben estar en la marca HTML inicial. Idealmente, no debería agregarse dinámicamente a la página mediante JavaScript.

Prioridad del recurso: Los navegadores no siempre otorgan a las imágenes la máxima prioridad, ya que no son críticas para la representación inicial de la página. Puedes guiar al navegador utilizando el atributo fetchpriority, de la siguiente manera:

<img fetchpriority="”high”" src="”/path/to/hero-image.webp”">

Usa alta prioridad para una o dos imágenes que probablemente sean tu elemento LCP según los tamaños de pantalla comunes. Por otro lado, reduce la prioridad para imágenes que no son LCP pero que pueden cargarse temprano pero no son inmediatamente visibles debido a estilos:

<img fetchpriority="”low”" src="”/path/to/non-LCP-image-example.webp”">

La despriorización de ciertos recursos puede ofrecer más ancho de banda a los recursos que más lo necesitan, pero ten cuidado. Siempre puedes verificar la prioridad de los recursos y probar los cambios con las herramientas de datos de auditoría (laboratorio) y datos reales (campo) de Valido Web Score.

Antes: Carga del recurso LCP no optimizada

Antes: carga del recurso LCP no optimizada

Después: Recurso LCP que comienza al mismo tiempo que el primer recurso

Después: Recurso LCP que comienza al mismo tiempo que el primer recurso

2. Reducir el Tiempo de Carga del Recurso

El tiempo de carga del recurso es la duración necesaria para transferir los bytes del recurso LCP a través de la red al dispositivo del usuario. Hay cuatro formas de reducir este tiempo de carga.

Reducir el tamaño del recurso mediante el uso del tamaño óptimo de la imagen, el uso de formatos de imagen modernos, la compresión de imágenes, etc.

Reducir la distancia que debe recorrer el recurso mediante el uso de una Red de Entrega de Contenido (CDN).

Reducir la competencia por el ancho de banda de la red, lo cual se puede resolver mediante el uso adecuado de fetchpriority, como se mencionó anteriormente.

Eliminar por completo el tiempo de red. Una excelente manera de hacerlo es sirviendo tus recursos con una política de control de caché eficiente.

3. Eliminar Element Render Delay 

Una vez que la carga del elemento Largest Contentful Paint se ha optimizado, el siguiente paso es asegurarse de que el elemento se pueda representar e interactuar de inmediato. La principal razón de un largo retraso en la representación del elemento LCP es que la representación está bloqueada por alguna razón.

Aquí tienes posibles soluciones para eliminar el retraso innecesario en la representación del elemento:

Reducir o integrar hojas de estilo que bloquean el rendering.

Para algunos sitios web, las hojas de estilo son tan grandes que tardan significativamente más en cargarse que el recurso LCP, lo que impide la representación del elemento LCP. En la mayoría de los casos, la mejor manera de garantizar que la hoja de estilo no bloquee la representación del elemento LCP es reducir su tamaño para que sea más pequeña que el recurso LCP. Esto se puede hacer eliminando el CSS no utilizado, diferiendo el CSS no crítico o utilizando herramientas que minifican y comprimen el CSS.

Utilizar server-side rendering.

El rendering del lado del servidor (SSR) es el proceso de ejecutar la lógica de la aplicación del lado del cliente en el servidor y responder a las solicitudes de documentos HTML con el marcado HTML completo.

4. Reducir el TTFB

El objetivo de este paso es hacer que la primera parte de tu página web, el HTML, se muestre rápidamente. Ten en cuenta que esto es lo más difícil de optimizar, ya que a menudo los desarrolladores no tienen mucho control sobre ello. Pero es muy importante porque afecta a todo lo que sucede a continuación. Por lo tanto, si puedes hacer que esta parte sea más rápida, hará que todo el sitio web se cargue más rápido.

Una razón común para un TTFB lento, incluso si el resto del sitio web es rápido, es cuando los visitantes tienen que pasar por varias redirecciones antes de llegar a la URL final. Por lo tanto, es esencial minimizar las redirecciones en tu sitio web tanto como sea posible.

Otra razón para un TTFB lento es cuando el contenido en caché no se puede recuperar de un servidor de borde de CDN (el CDN más cercano a ti), y en su lugar, las solicitudes de los usuarios deben dirigirse directamente al servidor de origen.

Monitoriza y Mejora el Rendimiento de Tu Comercio Electrónico Hoy

En la búsqueda de optimizar tu Largest Contentful Paint y ofrecer una experiencia de usuario ultrarrápida, has explorado los componentes críticos que componen esta métrica esencial. Pero la comprensión es solo el comienzo; ahora es el momento de poner este conocimiento en acción.

Con Valido Web Score y su integración de PageSpeed Insights, puedes medir fácilmente tu LCP y otras importantes métricas de rendimiento web. Ya sea que realices pruebas ad hoc/programadas o benchmarking, te tenemos cubierto.

Además de probar y monitorear tu comercio electrónico, Web Score proporciona ideas prácticas y recomendaciones para optimizar cada aspecto de tu rendimiento web. Nuestra suite de herramientas te permite tomar decisiones basadas en datos y ajustar tu sitio web para ofrecer una mejor experiencia de usuario.

No permitas que las páginas de carga lenta impacten el éxito de tu negocio digital. Da el primer paso para monitorizar y mejorar tu LCP hoy mismo con Valido Web Score. 

Lleva el rendimiento de tu ecommerce al siguiente nivel con Valido AI.

Monitoriza y optimiza métricas críticas con la solución líder de automatización de pruebas ecommerce, impulsada por la IA.