Que es Largest Contentful Paint

Que es Largest Contentful Paint (LCP)o Pintura Satisfactoria Más Grande

Que es Largest Contentful Paint (LCP)

La Pintura Satisfactoria Más Grande o Largest Contentful Paint (LCP) es una nueva métrica de experiencia de usuario de Google y pronto será un factor de clasificación. Aprenda qué es y cómo optimizarlo.

Largest Contentful Paint informa el tiempo de representación de la imagen más grande o el bloque de texto visible dentro de la ventana gráfica.

Largest Contentful Paint  permite medir la velocidad de carga percibida  por el usuario.

LCP es una medida de cuánto tiempo lleva descargar el contenido principal de una página y estar listo para interactuar con él. Lo que se mide es la imagen más grande o el bloque de contexto dentro de la ventana gráfica del usuario. Cualquier cosa que se extienda más allá de la pantalla no cuenta.

Los elementos típicos que se miden son imágenes, imágenes de póster de video, imágenes de fondo y elementos de texto a nivel de bloque como etiquetas de párrafo.

Esta métrica es fácil de medir y optimizar.

Elementos para calcular Largest Contentful Paint

Los elementos de nivel de bloque utilizados para calcular la puntuación de pintura contenta más grande pueden ser los elementos <main> y <section>, así como los elementos de encabezado, div, form.

Básicamente, se puede usar cualquier elemento HTML de nivel de bloque que contenga elementos de texto, siempre que sea el más grande.

Todo lo que tiene que hacer es mirar su página web y determinar cuál es el bloque de texto o imagen más grande y luego optimizarlo haciéndolo más pequeño o eliminando cualquier cosa que impida que se descargue rápidamente.

Debido a que Google incluye la mayoría de los sitios en el primer índice móvil, lo mejor es optimizar primero la vista móvil, luego el escritorio.

¿Qué es un buen puntaje LCP?

Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse para que se produzca la pintura de mayor contenido dentro de los primeros 2.5 segundos desde que la página comienza a cargarse. Para asegurarse de alcanzar este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de las cargas de página, segmentadas en dispositivos móviles y de escritorio.

Herramientas para medir e informar sobre los vitales web centrales

El LCP se puede medir en el laboratorio o en el campo.

Google cree que los Core Web Vitals son críticos para todas las experiencias web. Como resultado, se compromete a mostrar estas métricas en todas sus herramientas populares. Las siguientes secciones detallan qué herramientas son compatibles con los Core Web Vitals.

Herramientas de campo

Largest Contentful Paint (LCP)First Input Delay (FID)Cumulative Layout Shift (CLS)
Informe de experiencia del usuario de Chrome
PageSpeed ​​Insights
Search Console (informe de Core Web Vitals)

También puede informar sobre cada uno de los Core Web Vitals sin escribir ningún código utilizando la extensión Web Vitals Chrome. Esta extensión utiliza la biblioteca de elementos vitales de la web para medir cada una de estas métricas y mostrarlas a los usuarios mientras navegan por la web.

Esta extensión puede ser útil para comprender el rendimiento de sus propios sitios, los sitios de sus competidores y la web en general.

Las siguientes herramientas se pueden utilizar para medir los Vitales web centrales en un entorno de laboratorio:

Google recomienda webpagetest.org para medir Largest Contentful Paint (LCP) o Pintura Satisfactoria Más Grande

El rendimiento de un sitio puede variar drásticamente en función de las capacidades del dispositivo de un usuario, sus condiciones de red, qué otros procesos pueden ejecutarse en el dispositivo y cómo interactúan con la página. De hecho, cada una de las métricas de Core Web Vitals puede verse afectada por la interacción del usuario. Solo la medición de campo puede capturar con precisión la imagen completa.

Las herramientas de campo son medidas reales de un sitio. Las herramientas de laboratorio dan una puntuación virtual basada en un rastreo simulado utilizando algoritmos que se aproximan a las condiciones de Internet que un usuario típico en un teléfono móvil podría encontrar.

Cómo optimizar para la pintura más grande de contenido

 

Hay tres áreas principales para optimizar (más una más para JavaScript Frameworks):

  1. Servidores lentos
  2. JavaScript y CSS que bloquean el procesamiento
  3. Tiempos de carga de recursos lentos
  4. Representación del lado del cliente

Un servidor lento puede ser un problema con los niveles DDOS de piratería y tráfico de raspador en un host compartido o VPS. Puede encontrar alivio instalando un complemento de WordPress como WordFence para averiguar si está experimentando un ataque masivo y luego bloquearlo.

Otros problemas pueden ser la configuración incorrecta de un servidor dedicado o VPS. Un problema típico puede ser la cantidad de memoria asignada a PHP.

Otros problemas podrían ser software desactualizado como una versión antigua de PHP o software CMS que está desactualizado.

El peor de los casos es un servidor compartido con múltiples usuarios que están ralentizando su site. En ese caso, mudarse a un mejor anfitrión es la respuesta. Recomendamos Servidores Con Tecnología LiteSpeed

Por lo general, aplicar correcciones como agregar caché, optimizar imágenes, corregir el bloqueo de renderizado CSS y JavaScript y precargar ciertos activos puede ayudar.

 

Contenido Relacionado:

Cómo Mejorar First Content Paint

Cómo Medir Core Web Vitals.

Que es First Input Delay (FID)

Cómo optimizar la velocidad de carga con Lighthouse

Que es Speed Index

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *