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.
¿En cuánto tiempo el LCP se debe cargar?
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:
Página de inicio de Créditos Económicos:
Página de un producto de DePrati:
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:
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.
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.
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?
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.
Soy Robert Korntheuer y este es mi blog. Aquí escribo sobre temas relacionados con el SEO (Search Engine Optimization) como tendencias en la búsqueda local, el posicionamiento para el comercio electrónico o la relación entre las redes sociales y los principales motores de búsqueda.
Ofrezco posicionamiento web.
Contacto: 0995972104 / robert.korntheuer@webservicio-quito.com