Lighthouse introdujo Largest Contentful Paint como una de las métricas de rendimiento principales en 2020.
Más tarde, Google anunció LCP como un factor de clasificación importante y lo incluyó en Core Web Vitals. Como un Núcleo web vital métrica, LCP representa el 25% del puntaje de desempeño, lo que la convierte en una de las métricas más importantes a 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 publicación de 'Primera pintura contenta,' y algunos de ustedes se preguntarán en qué se diferencia del 'Pintura contenta más grande.' Entonces, aquí hay una explicación fácil para lo mismo:
- 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).
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 de bloqueo de renderizado son los archivos que se deben renderizar en un sitio web. Estos pueden incluir fuentes, archivos CSS, JavaScript y HTML. Estos archivos se denominan "bloqueo de renderizado" porque tienen prioridad sobre otros elementos de la página (por ejemplo, las imágenes, el texto u otro contenido de cara al 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 Pintura contenta más grande ser parte relevante de Core Web Vitals. Por lo tanto, es un parámetro vital a evaluar y los sitios deben lograr 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 los sitios se encuentren en la web. Por eso no basta con tener productos atractivos, buena UX 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.
Shubham es un especialista en marketing digital con amplia experiencia trabajando en la industria de la tecnología publicitaria. Tiene una amplia experiencia en la industria programática, impulsando la estrategia comercial y escalando funciones que incluyen, entre otras, crecimiento y marketing, operaciones, optimización de procesos y ventas.
