Pintura con contenido más grande: ¿Cómo optimizar LCP?

Lighthouse introdujo Largest Contentful Paint como una de las métricas de rendimiento principales en 2020. 

Más adelante, Google anunció LCP como un factor de clasificación importante y lo integró en Core Web Vitals. Como métrica de Core Web Vitals , LCP representa el 25 % de la puntuación de rendimiento, lo que la convierte en una de las métricas más importantes para optimizar.

En esta guía, analizamos en profundidad Largest Contentful Paint y también aprendemos formas de optimizar las mejores puntuaciones de LCP. 

¿Cuál es la pintura con contenido más grande?

LCP mide cuánto tiempo le toma a una página web mostrar el "elemento de contenido más grande" disponible en la página. En este caso, el contenido "más grande" podría ser cualquier cosa, incluido:

Un "elemento de contenido" es cualquier elemento HTML, como por ejemplo: 

• Un elemento de imagen
• un elemento de vídeo
• elementos SVG 
• Un elemento con la imagen de fondo cargada mediante la función URL 
• , , , , u otros elementos a nivel de bloque 

De acuerdo con Google, 

"LCP es una métrica importante centrada en el usuario para medir la velocidad de carga percibida porque marca el punto en la línea de tiempo de carga de la página en el que es probable que se haya cargado el contenido principal de la página; un LCP rápido ayuda a asegurar al usuario que la página es útil".

Primera pintura con contenido frente a la pintura con contenido más grande:

Recientemente publicamos una entrada sobre " First Contentful Paint ", y algunos de ustedes quizás se pregunten en qué se diferencia de " Largest Contentful Paint ". Así que aquí les ofrecemos una explicación sencilla:

• Primera pintura con contenido: FCP mide cuánto tiempo tarda una página desde la carga inicial hasta el primer contenido renderizado que se muestra en la pantalla.

• Pintura con contenido más grande: LCP mide el tiempo de renderizado de la imagen o bloque de texto más grande visible en la ventana gráfica, en comparación con el momento en que la página comenzó a cargarse.

¿Qué es una buena puntuación LCP?

Según las directrices de Google, una buena puntuación LCP debe ser inferior a 2.5 segundos. Esto garantiza una buena experiencia de usuario. 

Los umbrales de LCP son los siguientes:

• Bueno: LCP de 1200 milisegundos o menos (no hay nada que hacer aquí)
• Necesita mejorar: LCP entre 1200 y 2400 milisegundos.
• Deficiente = LCP superior a 2400 milisegundos.

¿Cómo medir la puntuación de pintura con contenido más grande?

Los webmasters o editores pueden realizar una prueba de pintura con contenido más grande utilizando las siguientes herramientas:

• Informe de experiencia del usuario de Chrome;
• PageSpeed ​​Insights;
• Search Console (informe Core Web Vitals).

• DevTools de Chrome.
• Lighthouse .
• WebPageTest.

Dado que LCP es una métrica aprobada por Google, podemos encontrar fácilmente la puntuación LCP en todas estas herramientas. 

Cómo mejorar el tiempo de la primera pintura con contenido (FCP):

Ahora que hemos entendido qué es FCP y por qué es importante, echemos un vistazo a cómo se puede mejorar el tiempo de FCP:

Elimine los recursos de bloqueo de renderizado:

Los recursos que bloquean la renderización son los archivos de un sitio web que deben renderizarse. Estos pueden incluir fuentes, archivos CSS, JavaScript y HTML . Se denominan "bloqueadores de renderización" porque tienen prioridad sobre otros elementos de la página (por ejemplo, las imágenes, el texto u otro contenido visible para el usuario).

Este retraso crea un aumento repentino en LCP ya que los archivos de bloqueo de renderizado suelen ser de gran tamaño y ni siquiera contienen contenido del sitio. 

El tiempo de LCP se puede reducir si elimina recursos de renderizado de la ruta de renderizado crítica, difiere recursos no críticos o elimina JS innecesarios. 

Eliminar CSS innecesario

Si tiene archivos en sus hojas de estilo que no se utilizan, pero que requieren una velocidad significativa, no tiene sentido conservarlos. Por lo tanto, cualquier código antiguo o no utilizado debe eliminarse para que no afecte el tiempo de carga de su sitio. 

Minificar HTML, JavaScript y CSS

La minificación de HTML, JavaScript y CSS puede reducir significativamente el tiempo de LCP de su sitio web. La minificación consiste en eliminar todos los caracteres adicionales, como los espacios, de los archivos CSS, HTML y JavaScript de su sitio. 

Si bien el espaciado ayuda a la legibilidad, los navegadores no los necesitan. De hecho, estos espacios ocupan bytes y minimizarlos disminuiría el tamaño de la página y mejoraría el tiempo de pintura del contenido inicial. 

Optimizar el tamaño de la imagen 

Utilice siempre imágenes del tamaño adecuado. Puede utilizar un complemento optimizador de imágenes como SSmush o Hummingbird para reducir el tamaño de la imagen. Reducir el tamaño evita la sobrecarga, que puede generar un LCP alto. También puede utilizar una CDN de imagen para reducir el tiempo de LCP. 

Elige un buen servicio de hosting 

Su servicio de alojamiento también afecta el tiempo de carga de las páginas. Por lo tanto, pruebe con un buen proveedor de alojamiento que ofrezca una infraestructura adecuada para el tamaño y el volumen de acceso de su sitio.

Para concluir:

Google considera que Largest Contentful Paint es una parte relevante de Core Web Vitals. Por lo tanto, es un parámetro vital que debe evaluarse y los sitios deben obtener una buena puntuación en él.

Dado que LCP está relacionado con el tiempo de carga de la página, influye directamente en cómo Google clasifica un sitio en la página de resultados.

La experiencia del usuario es un parámetro fundamental para que un sitio web sea visible en internet. Por eso, no basta con tener productos atractivos, una buena experiencia de usuario o contenido de calidad.

Una buena puntuación LCP no sólo es favorable para el usuario sino que también garantiza que Google clasificará bien el contenido.