Largest Contentful Paint, ejemplo: página de inicio de Yaestá.

Velocidad de carga de tiendas en línea y el “largest contentful paint”

Largest contentful Paint (LCP) es una nueva métrica de Google para medir la velocidad de carga de una página web. Mide el tiempo de carga del contenido principal/más grande del área inmediatamente visible de una página web (ventana gráfica).

Es parte de los nuevos “Core Web Vitals”. Estos “Core Web Vitals” contiene diferentes métricas relacionadas con la velocidad de carga y la experiencia de usuario.

Hace dos días revisé la velocidad de carga de una página web con Google Page Speed Insights. Me di cuenta de que con esta nueva métrica del “largest contentful paint” su índice de velocidad ya no era tan alto como había sido antes.

La razón fue que el contenido principal demoró 4 segundos en cargarse. Este contenido principal era una imagen. Cambié la forma como se muestra la imagen. Ahora es como una imagen de fondo en el CSS («background-image»). Con esto la página otra vez logra tener un índice de velocidad alto en Page Speed Insights.

El problema con la velocidad de carga del LCP era una imagen. Muchas tiendas en línea contienen banners e imágenes grandes. ¿Así me pregunto si la nueva métrica del “largest contentful paint” afecta negativamente la velocidad de carga de los comercios electrónicos?

Desde el punto de vista del SEO el LCP todavía no es muy importante. Pero a partir de 2021 va a influir en los rankings. Junto con otros factores va a ser parte del Google Page Experience Update.

Sin embargo, la velocidad no solo es algo que afecta el SEO. Para los usuarios el tema de la velocidad de carga es importante. Nadie quiere esperar mucho tiempo hasta que pueda abrir una página web.

Cómo medir/revisar el LCP

Con Google Page Speed Insights puedes medir la velocidad hasta que se cargue el LCP. Debajo de “datos de experimentos“ aparece el tiempo de carga del LCP.

Además, esta herramienta sirve para identificar el LCP. En “diagnósticos” puedes ver cuál es el contenido más grande de la ventana gráfica.

También es posible hacerlo con Google Chrome. En las “herramientas de desarrollador” puedes hacer clic en “performance”. Luego tienes que cargar la página web nuevamente. Así puedes ver cuánto tiempo una página web demora hasta que se cargue el LCP. Además, puedes ver con exactitud cuál es el LCP.

Largest Contentful Paint, ejemplo: página de inicio de Yaestá.
Largest Contentful Paint, ejemplo: página de inicio de Yaestá.

¿En cuánto tiempo el LCP se debe cargar?

Nuevas métricas para medir la velocidad de carga.
Nuevas métricas para medir la velocidad de carga, fuente: https://support.google.com/webmasters/answer/9205520?hl=es.

Un tiempo de carga del LCP de más de 4 segundos es considerado por Google como lento. Entre 2,5 y 4 segundos de carga el LCP es considerado como mediano. Un LCP que se carga en menos de 2,5 segundos es considerado como rápido.

Tiendas en línea y el LCP

Todas las tiendas en línea que revisé -tiendas de Ecuador, de otros países y también tiendas internacionales como Amazon- tienen problemas con esta nueva métrica.

Aquí algunos ejemplos:

Página de inicio Comandato:

Velocidad de carga de la página de inicio de Comandato.
Velocidad de carga de la página de inicio de Comandato.
LCP de la página de inicio de Comandato.
LCP de la página de inicio de Comandato. El LCP es una imagen.

Página de inicio de Créditos Económicos:

Velocidad de página de la página de inicio de Créditos Económicos.
Velocidad de página de la página de inicio de Créditos Económicos.
LCP de la página de inicio de Créditos Económicos.
LCP de la página de inicio de Créditos Económicos.

Página de un producto de DePrati:

Velocidad de carga de la página de un producto de DePrati.
Velocidad de carga de la página de un producto de DePrati.
LCP: página de un producto de DePrati.
LCP: página de un producto de DePrati. También es una imagen.

El contenido más grande en estos tres ejemplos -y en todas las otras tiendas que revisé- es una imagen. Lo interesante es que el peso de la imagen no importa -o al menos no importa mucho- para la velocidad de carga del LCP.

La imagen en la página de inicio de Comandato que -según Google Page Speed Insights- es el contenido más grande solo pesa 15kb. 15kb no es mucho. La imagen está bien optimizada.

La tienda en línea ecuatoriana con menos problemas con el tiempo de carga del LCP que encontré es Ropa Severus. La velocidad de carga no es rápida. Pero el LCP se carga más rápidamente que el LCP de otras tiendas online:

Velocidad de carga de la página de inicio de Ropa Severus.
Velocidad de carga de la página de inicio de Ropa Severus.

En la página de inicio de Severus la imagen del banner es una imagen de fondo. No está directamente en el código html, sino en el CSS.

LCP de la página de inicio de Severus.
LCP de la página de inicio de Severus. La imagen del banner está en el fondo (CSS).

Cargar las imágenes de esta manera parece que ayuda a mejorar el LCP. Sin embargo, Google no recomienda hacerlo. Además, desde el punto de vista del SEO no es una buena idea. Google no utiliza imágenes de fondo para mostrarlas en los resultados de búsqueda.

Prueba con el LCP en mi sitio web

Yo hice una prueba con y sin una imagen en la ventana gráfica de un artículo de mi blog. Aquí puedes ver la diferencia en el LCP: 1,3 segundos.

CLP con una imagen en la ventana gráfica.
LCP con una imagen en la ventana gráfica.
CLP sin imagen.
LCP sin imagen.

Recomendaciones de Google

Google da algunos consejos sobre cómo mejorar el LCP:

  • Mejorar la velocidad del servidor.
  • Optimizar archivos de CSS y JavaScript.
  • Mejorar la velocidad de carga de imágenes, videos y otros elementos de una página web.
  • Mejorar la lógica JavaScript en el lado del cliente.

Estas son las recomendaciones típicas de Google.

Lo interesante es lo que Google dijo sobre “mejorar la velocidad de imágenes, videos y otros elementos”:

“Consider not using an image in the first place. If it’s not relevant to the content, remove it.”

https://web.dev/optimize-lcp/

En primer lugar, considere no usar una imagen. Si no es relevante para el contenido, elimínelo.

El problema es que para un comercio electrónico las imágenes son muy importantes. Los clientes quieren ver lo que compran.

Un ejemplo interesante aquí es la tienda Severus. En la categoría “mujer” muestra primero mucho texto y luego los productos. ¿La pregunta es si esto está bien desde el punto de vista del cliente?

LCP de una categoría en Severus.
LCP de la categoría «mujer» en Severus.

Podemos ver que el LCP es el primer párrafo del texto. No es una imagen. Tal vez este primer párrafo -y luego los productos- sea suficiente para lograr tener un buen LCP.

Lo mismo se puede hacer en el caso de las páginas de inicio y las páginas de los productos. La pregunta es si esto es -desde el punto de vista del cliente- la mejor solución.

En el caso de una página de inicio no veo tanto el problema. Aquí la pregunta más bien es si se necesita todos estos banners que tienen la mayoría de las tiendas en línea en su homepage.

Pero en el caso de los productos las imágenes grandes son muy importantes.

Tener texto como LCP no necesariamente significar tener una velocidad de carga rápida. El mejor ejemplo -sin embargo, no es una tienda en línea- es el sitio de El Comercio. El LCP de algunos artículos que no contienen fotos grandes es texto. Este texto se carga lentamente.

Probablemente existen otras soluciones como resolver el problema de la velocidad de carga del LCP. Además, no solo se debe pensar en el LCP sino en una optimización completa del sitio.

En el ejemplo de Comandato hemos visto que solo optimizar las imágenes grandes -por ejemplo, un banner- no es suficiente para conseguir un buen LCP. Tampoco se debe olvidar optimizar otros aspectos como los archivos de CSS y JavaScript para lograr tener una buena velocidad de carga.

En el caso de la tienda en línea Severus por ejemplo me sale en Google Page Speed Insights que el servidor responde lentamente. Con un servidor más rápido se puede probablemente mejorar la velocidad de carga del LCP.

Resumen

El LCP todavía no es un factor de ranking en Google. En 2021 el LCP junto con otros factores va a formar el “Google Page Experience Update”.

No sabemos si va a ser un factor de ranking muy importante o poco importante. Sin embargo, la velocidad de carga no solo influye en el SEO. A los usuarios no les gustan las páginas lentas.

Por eso creo que ya es hora comenzar a trabajar en la velocidad de carga y mejorar el LCP.


También te puede interesar:

Ecuador: Medios de comunicación y la velocidad de carga.

Consejos no típicos para optimizar la velocidad de carga de WordPress.

Velocidad de carga: en cuáles herramientas o valores confiar.