Arreglar el error de LCP 'Más de' en Core Web Vitals en GSC

Google lanzó un nuevo informe en la consola de búsqueda llamado Core Web Vitals. Estos reemplazaron los informes de velocidad y se considerarán como un factor de clasificación en 2021. Los Core Web Vitals se considerarán como un factor de clasificación junto con la velocidad de la página, HTTPS, la compatibilidad móvil y otros factores en la página.

El Core Web Vital considera elementos de UX y UI en la página para averiguar el promedio de una página para tres métricas clave,

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

No hay una solución codificada particular para resolver los problemas, pero puedes optimizar el sitio web para resolver los errores. Aquí enumeraré algunas de las prácticas que pueden ayudarte a resolver el error de Largest Contentful Paint (LCP) ‘ Más de’ para tus páginas web.

¿Qué es LCP?

La métrica Largest Contentful Paint (LCP) informa el tiempo de renderizado del elemento de contenido más grande visible dentro del viewport. En términos simples, es el tiempo que tarda un elemento importante en cargarse en la pantalla visible después de que la página comienza a cargar.

Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener el Largest Contentful Paint dentro de los primeros 2.5 segundos desde que la página comienza a cargar.

¿Qué elementos se consideran para LCP?

Los tipos de elementos considerados para el Largest Contentful Paint son;

• elementos
• elementos dentro de un elemento
• elementos
• Un elemento con una imagen de fondo cargada a través de la función url()
• Elementos de bloque que contienen nodos de texto u otros elementos de texto en línea.

¿Cuáles son las causas de un alto LCP?

• Tiempos de respuesta del servidor lentos
• JavaScript y CSS que bloquean el renderizado
• Tiempos de carga de recursos lentos
• Renderizado del lado del cliente

¿Cómo optimizar el sitio web para arreglar un alto LCP?

Usa un buen hosting con un buen tiempo de respuesta y una baja tasa de latencia. Asegúrate de optimizar los servidores, utiliza CDNs de terceros gratuitos como Cloudflare, jsDelivr, Statically para entregar activos estáticos rápidamente. Si estás trabajando en WordPress, hay una serie de plugins que pueden ayudarte a hacer el trabajo por ti.

Usa imágenes comprimidas con formatos de imagen de nueva generación como JPEG XR, JPEG 2000 o WebP. Estos formatos modernos ayudan a acelerar la carga de imágenes en un 50%. Hay algunos plugins para WordPress que te ayudan automáticamente a comprimir y convertir las imágenes sobre la marcha. Además, utiliza un CDN de imágenes como WP-Photon para reducir el ancho de banda del servidor y aumentar la velocidad del sitio.

Puedes usar servicios de caché para cargar una página HTML estática que no cambia en cada solicitud; la caché puede evitar que se recree innecesariamente. Los plugins de caché almacenarán una copia del HTML generado en tu servidor y, cuando se solicita una página, el servidor libera la carga de caché, lo que puede reducir el Tiempo hasta el Primer Byte (TTFB) y minimizar el uso de recursos.

También puedes usar servicios como Cloudflare, que ejecuta trabajadores de servicio en segundo plano en el navegador y puede interceptar solicitudes del servidor. Toman una caché HTML completa de la página y sirven páginas HTML primero desde la caché, lo que puede reducir significativamente el tiempo de carga.

Otras cosas importantes a considerar para optimizar el sitio web para un buen LCP son:

• Eliminar JavaScript y CSS que bloquean el renderizado
• Diferir CSS no crítico
• Minificar recursos
• Precargar recursos importantes

Puedes encontrar una guía más detallada sobre cómo optimizar un sitio web para reducir LCP y hacer que tus páginas se carguen más rápido para una mejor experiencia de usuario en el sitio oficial Web.Dev.

Conclusión: Con la introducción de los core web vitals en GSC y su consideración como un factor de clasificación. LCP es una métrica muy importante de arreglar porque toma nota del tiempo que tarda en cargarse el elemento más grande en el viewport del dispositivo. He proporcionado algunas soluciones tentativas para optimizar el sitio para un LCP bajo.

Si tienes alguna opinión sobre Arreglar el error de LCP ‘Más de’ en Core Web Vitals en GSC, no dudes en dejarla en el cuadro de comentarios a continuación. Además, suscríbete a nuestro canal de YouTube de DigitBin para tutoriales en video. ¡Salud!