El LCP ( Largest Contentful Paint) junto con el Cumulative Layout Shift y el First Input Delay, forman las Google Core Web Vitals, métricas de calidad de navegación y experiencia de usuario que, desde hace algún tiempo, son el nuevo factor de posicionamiento SEO de Google.

CORE WEB VITALS LCP

Qué es LCP Core Web Vitals

LCP es una métrica de posicionamiento que se encarga de medir el tiempo que tarda el contenido principal de una página web en descargarse y estar completamente listo para que el usuario interactúe con él.

En este caso, se mide la imagen o el bloque de texto más grande que aparece dentro del viewport del usuario, todo lo que esté más allá de este marco no cuenta.

Qué problemas son los que causan una mala puntuación de LCP

Los elementos que se miden son:

  • Las imágenes
  • Los banners
  • Las miniaturas de vídeo
  • Las imágenes de fondo
  • Elementos de texto
  • Bloques o secciones
  • Etiquetas de párrafo

Esta es una métrica importante para medir la experiencia del usuario, ya que permite medir el tiempo que tarda una página web en ser totalmente funcional para un usuario. Además, de las tres métricas que componen el Core Web Vitals, LCP es también la más fácil de medir y optimizar.

Cómo auditar los LCP que provocan una mala métrica

1 PageSpeed Insights

Vamos a coger la URL de nuestra web y la vamos a pasarla por PageSpeed Insights.

En datos de experimento nos tenemos que fijar en Largest Contentful Paint.

Largest Contentful Paint pagespeed

Para identificar el elemento correcto que no está provocando una mala media con el LCP nos tenemos que ir hacia abajo al elemento renderizado del mayor elemento con contenido. Lo desplegamos y aquí nos va a marcar elemento html que está provocando el LCP.

Renderizado del mayor elemento con contenido

📎 Nota: Dependiendo de nuestra velocidad, las condiciones de nuestro ordenador, el Wi-Fi, etc vamos a ver que esto puede variar.

Entonces tenemos una segunda métrica en la que podemos irnos a DevTools de Google Chrome e inspeccionar elemento.

Carga tu contenido web sin esperas

 

2 DevTools de Google Chrome

Nos vamos a la pestaña de Performance, activamos Web Vitals, Screenshots  y le damos a cargar.

Performance

Si nos situamos encima de es LCP y pinchamos, abajo nos va a parecer el elemento que causa el LCP. Si nos situamos con el ratón en encima, elemento que nos muestra vamos a ver cómo se nos marca en la zona azulita la parte que influye en esta carga.

elemento que causa el LCP

3 Webpagetest.org

  1. Introducimos la url que queremos analizar.
  2. Seleccionamos la localización más cercana.
  3. Desplegamos Advanced Settings, nos vamos a la pestaña de Chromium y seleccionamos la casilla Capture Lighthouse Report, Emulate Mobile Browser, Capture Dev Tools Timeline y pulsamos Start Test.

metricas lcp webpagetest

 

webpagetest

 

 

Google Web Vitals

4 Google Search Console

 

Google Search Console

 

Web Vitals Google Search Console métricas

 

Web Vitals Google Search Console url metricas

5 Web Vitals | Extensión de Google Chrome

Una forma rápida de ver todas las URL de la web es con la extensión de Web Vitals para Google Chrome. Con esta extensión, actualizará  y se pondrá la insignia a verde o rojo dependiendo de si la URL supera los umbrales de métricas de Core Web Vitals.

Web Vitals | Extensión de Google Chrome

Si necesitas que otra persona se encargue de este dolor de cabeza por ti, puedes ponerte en contacto conmigo y podré crear un plan de cuidado personalizado para tu sitio web.

Consigue ayuda ahora!



     

     

    Marcos Aguilar

    Acerca de Marcos Aguilar

    Desarrollador de páginas web y Consultor SEO que trabaja diseñando y programando web sofisticadas para pequeñas, medianas y grandes empresas.

    Dejar una respuesta

    Abrir chat