La privacidad es importante para nosotros, por lo que tiene la opción de deshabilitar ciertos tipos de almacenamiento que pueden no ser necesarios para el funcionamiento básico del sitio web. El bloqueo de categorías puede afectar a su experiencia en el sitio web. Más información
Optimización de Largest Contentful Paint (LCP): reduce LCP bajo 2.5 segundos. Guía de optimización de imagen, mejoras de TTFB y diferimiento de JavaScript.
.webp){kind=small}
.webp){kind=small}
LCP es una métrica crítica de experiencia de usuario y un factor de clasificación de Google. Cuando un usuario navega a tu página, no les importa el tiempo de carga total de página. Les importa cuándo pueden ver el contenido principal y comenzar a leer o interactuar. LCP mide exactamente ese momento: cuándo el elemento de contenido más grande se vuelve visible. Consigue LCP correcto y tu página se siente rápida. Consiguelo mal y tu página se siente lenta, incluso si otras métricas están bien.
Optimizar LCP requiere un enfoque de tres métodos: mejorar tiempo de respuesta de servidor (TTFB), eliminar recursos bloqueadores de renderizado y optimizar imágenes. Cada enfoque aborda diferentes cuellos de botella de LCP. La combinación entrega mejoras dramáticas.
Largest Contentful Paint (LCP) es el tiempo de renderizado del elemento de contenido visible más grande en tu página. Esto podría ser una imagen grande, video, titular o bloque de texto. LCP mide desde cuándo el usuario navega a tu página hasta que ese elemento se vuelve visible. La documentación de LCP de Google proporciona información técnica detallada y estrategias de optimización.
LCP no es una métrica binaria de paso/fallo. Es una puntuación continua. Google ha determinado que LCP menor a 2.5 segundos es "bueno," LCP entre 2.5-4 segundos necesita mejora y LCP mayor a 4 segundos es pobre. Los usuarios perciben páginas con LCP menor a 2 segundos como muy rápidas. Las páginas con LCP de 3-4 segundos se sienten notablemente más lentas. Las páginas con LCP mayor a 5 segundos a menudo se abandonan.
LCP cambia durante la carga de página a medida que aparecen elementos de contenido más grandes. Si una imagen gigante carga en la marca de 3 segundos, LCP salta de 1 segundo a 3 segundos. Esto es importante: no puedes simplemente optimizar el tiempo de pintura inicial. Debes asegurar que todos los elementos de contenido grande carguen rápidamente.
Time to First Byte (TTFB) es el tiempo desde el inicio de navegación hasta que el servidor devuelve el primer byte del documento HTML. TTFB determina el piso para LCP. Si TTFB es 2 segundos, LCP no puede ser mejor que 2 segundos porque el navegador aún no ha recibido el HTML. Reducir TTFB es prerrequisito para reducir LCP.
Un buen TTFB es menor a 600 milisegundos. TTFB entre 600-1800ms necesita mejora. TTFB mayor a 1800ms es pobre. Si tu TTFB es lento, enfoca en optimización de servidor primero. Ninguna cantidad de optimización de frontend puede compensar un servidor lento.
Causas comunes de TTFB lento: código backend ineficiente, consultas de base de datos o sobrecarga de servidor. El alojamiento lento también causa TTFB alto. El alojamiento compartido es a menudo extremadamente lento. Mejora a VPS o alojamiento en la nube para mejor rendimiento. Usa un CDN para reducir TTFB sirviendo contenido desde servidores cerca de tus usuarios.
PageSpeed Insights de Google muestra tu TTFB en la sección "Tiempo de respuesta del servidor". Si TTFB es un cuello de botella, será resaltado como prioridad.
LCP depende de cuál es el elemento de contenido más grande en tu página. En una publicación de blog, el elemento más grande puede ser una imagen grande de héroe. En una página de producto, puede ser una foto de producto. En un sitio de noticias, puede ser un titular de artículo. Identificar el elemento de LCP es el primer paso para optimizarlo.
Usa Chrome DevTools para identificar el elemento de LCP. Abre DevTools, ve a la pestaña Rendimiento, comienza a grabar y recarga la página. En la grabación de Rendimiento, busca la marca "Largest Contentful Paint". Pasa el cursor sobre ella para ver qué elemento desencadenó LCP. Una vez que sabes el elemento, optimízalo.
El elemento de LCP a menudo es una imagen. Las imágenes son grandes y cargan después de que se analiza HTML. Optimizar la carga de imagen tiene el impacto más grande en LCP para la mayoría de sitios. Las imágenes que están bajo el pliegue pueden tener carga lenta, acelerando LCP para contenido sobre el pliegue.
La precarga le dice al navegador que comience a descargar un recurso temprano, antes de que sea necesario para renderizado. Precarga tu imagen de LCP u otros recursos críticos usando etiquetas `` en el HTML head. Esto le dice al navegador "comienza a descargar este recurso inmediatamente."
Ejemplo: `` le dice al navegador que comience a descargar la imagen de héroe inmediatamente, no esperando a que se analice CSS. Esto puede reducir LCP en 100-500ms dependiendo del tamaño de recurso.
Ten cuidado con precarga. Precarga demasiados recursos desperdicia ancho de banda. Precarga solo los recursos más críticos (imagen de héroe, fuentes críticas, CSS esencial). La guía de optimización de Web Vitals Principales de Google explica mejores prácticas de precarga.
Si tu elemento de LCP es una imagen, optimiza el tamaño de archivo de imagen y la estrategia de carga. Tres tácticas:
Comprime la imagen. Usa herramientas como TinyPNG, ImageOptim o Squoosh para comprimir sin perder calidad. La compresión JPEG puede reducir el tamaño de archivo 10-40 veces. Cada 100KB de tamaño de imagen añade 100-200ms a LCP en redes 4G. La compresión es alto retorno de inversión.
Usa formatos modernos. WebP es 25-35% más pequeño que JPEG. AVIF es incluso más pequeño. Usa el elemento HTML `
Especifica dimensiones de imagen. Incluir atributos width y height prevé el cambio de diseño y permite que el navegador reserve espacio antes de que cargue la imagen. Esto no mejora directamente LCP, pero mejora Cumulative Layout Shift (CLS) otra métrica de Web Vitals Principales.
CSS bloqueador de renderizado previene que el navegador renderice la página hasta que CSS sea descargado y analizado. Los archivos CSS grandes retrasan la renderización. Minimiza CSS bloqueador de renderizado inlineando CSS crítico y diferiendo el resto.
CSS crítico es CSS necesario para contenido sobre el pliegue. Inlinea esto en etiquetas `
