Cómo solucionar un LCP lento por imágenes
El LCP suele ser una imagen de portada. Formato, dimensiones, precarga y fetchpriority, en el orden que realmente mejora la métrica.
Solucione una imagen de Largest Contentful Paint (LCP) lenta en 4 pasos: redimensiónela a su tamaño de visualización, conviértala a WebP o AVIF, precárguela y establezca fetchpriority en high. Los primeros 2 pasos aportan la mayor parte de la mejora y no requieren cambios en el marcado de su página.
En la mayoría de las páginas, el elemento de renderizado del mayor elemento con contenido es una única imagen de portada, lo que significa que el LCP es en realidad una cuestión de un solo archivo en lugar de todo su sitio. Optimizar ese único archivo suele mejorar la métrica más que cualquier otra optimización disponible.
Qué mide el LCP
El LCP registra cuánto tarda en renderizarse el elemento visible más grande, medido desde que la página comienza a cargarse. Google considera que 2.5 segundos o menos es un buen resultado, de 2.5 a 4 segundos necesita mejorar y más de 4 segundos es deficiente.
El elemento medido suele ser una imagen, ocasionalmente un bloque de texto de encabezado, y siempre es algo visible sin necesidad de hacer scroll. El elemento puede cambiar entre dispositivos, ya que una imagen de portada que domina el diseño de escritorio puede quedar por debajo de la línea de flotación en un teléfono.
Cómo encontrar el elemento responsable
Ejecute Lighthouse y lea la entrada del elemento Largest Contentful Paint, que indica el elemento exacto que se está midiendo. Intentar adivinarlo hace perder tiempo, ya que con frecuencia el elemento no es el que la gente asume.
Realice la comprobación tanto en dispositivos móviles como en ordenadores de escritorio, ya que los diseños difieren y la respuesta también. Los datos de campo de visitantes reales son más fiables que una sola ejecución de laboratorio, porque las condiciones de la red varían mucho más en el mundo real que en una prueba. Cuando ambos discrepen, confíe en los datos de campo y utilice la ejecución de laboratorio para el diagnóstico.
Optimice la imagen por orden de impacto
Para mejorar el LCP en una imagen, siga estos 6 pasos en orden.
- Redimensione la imagen al tamaño más grande en el que se vaya a mostrar, duplicado para pantallas de alta densidad.
- Conviértala a WebP, o a AVIF si la imagen es grande y fotográfica.
- Comprímala a un objetivo inferior a 200 KB para una imagen de portada, lo cual es alcanzable a ancho completo en la mayoría de los diseños.
- Añada los atributos width y height para que el navegador reserve el espacio y no se produzcan cambios de diseño.
- Precargue la imagen en la cabecera de la página para que el navegador comience a descargarla inmediatamente.
- Establezca fetchpriority en high en el elemento de la imagen, lo que indica al navegador que este archivo es el más importante.
Los pasos 1 y 2 suelen aportar la mayor parte de la mejora, y son los 2 que no requieren tocar en absoluto el marcado de la página.
Por qué redimensionar es mejor que comprimir
Las dimensiones controlan la mayor parte del tamaño de un archivo, por lo que redimensionar reduce más peso que cualquier ajuste de calidad. Una fotografía de 4000 píxeles mostrada a 1200 píxeles contiene 11 veces más datos de píxeles de los que la página puede mostrar.
| Imagen de portada | Dimensiones | Formato | Tamaño de archivo | LCP típico |
|---|---|---|---|---|
| Directa de la cámara | 4032 x 3024 | JPEG calidad 90 | 4.2 MB | Más de 6 segundos |
| Solo comprimida | 4032 x 3024 | JPEG calidad 70 | 1.4 MB | Unos 3 segundos |
| Solo redimensionada | 1920 x 1440 | JPEG calidad 90 | 620 KB | Unos 2 segundos |
| Redimensionada y convertida | 1920 x 1440 | WebP calidad 80 | 190 KB | Menos de 1.5 segundos |
La tercera fila muestra por qué redimensionar es lo primero. Redimensionar por sí solo superó a comprimir por sí solo, y la combinación superó a ambos. Las cifras varían según la imagen y la conexión, mientras que el orden se mantiene de forma constante.
Precarga y fetchpriority
La precarga indica al navegador que descargue la imagen de portada antes de que haya terminado de analizar la página, lo que normalmente ahorra entre 200 y 500 milisegundos. Este ajuste es importante porque los navegadores descubren las imágenes tarde en el proceso de análisis.
Precargue solo una imagen. Precargar varias elimina el beneficio, ya que el navegador divide su atención exactamente de la misma manera que lo habría hecho de todos modos. Establecer fetchpriority en high logra un resultado similar con menos marcado y con frecuencia es suficiente por sí solo para una imagen que ya está presente en el HTML inicial.
Errores que empeoran el LCP
- Aplicar carga diferida (lazy loading) a la imagen de portada. La carga diferida retrasa precisamente el archivo que desea primero. Aplíquela únicamente por debajo de la línea de flotación.
- Cargar la imagen de portada a través de JavaScript. Una imagen insertada por script no puede empezar a descargarse hasta que se ejecuta el script.
- Usar una imagen de fondo CSS. Las imágenes de fondo se descubren más tarde que los elementos img y no se pueden priorizar tan fácilmente.
- Precargar varias imágenes. Las prioridades en conflicto eliminan la ventaja por completo.
- Omitir width y height. El cambio de diseño perjudica a otra métrica independiente mientras esta mejora.
Cuando el elemento LCP es texto
Un LCP basado en texto suele retrasarse por las fuentes web más que por el propio texto. El navegador dispone de las palabras inmediatamente y espera a un archivo de fuente antes de pintarlas.
Establezca font-display en swap para que el texto se renderice con una fuente alternativa y cambie cuando llegue la fuente web. Precargue el archivo de fuente más importante y reduzca la fuente a los caracteres que realmente utilizan sus páginas, lo que con frecuencia reduce una fuente de 200 KB a menos de 30 KB. Servir las fuentes desde su propio dominio elimina una conexión adicional a un tercero.
El tiempo de respuesta del servidor establece el límite
El LCP no puede ser más rápido que el tiempo que tarda su servidor en devolver el primer byte, por lo que un servidor lento limita cualquier otra mejora. Intente conseguir menos de 600 milisegundos para el primer byte.
Compruebe esa cifra antes de optimizar las imágenes, porque una respuesta del servidor de 2 segundos hace que un objetivo de LCP de 2.5 segundos sea imposible, independientemente de lo que haga con los archivos. El almacenamiento en caché, un alojamiento más rápido o una red de entrega de contenido (CDN) solucionan ese problema. El trabajo con las imágenes mejora entonces lo que queda en lugar de luchar contra un límite establecido en otra parte.
Los scripts de terceros también retrasan la imagen
Los scripts de analítica, banners de consentimiento, widgets de chat y publicidad compiten con su imagen de portada por el ancho de banda y el tiempo de procesamiento. Una imagen perfectamente optimizada se renderizará tarde si se cargan 12 scripts antes que ella.
Los banners de consentimiento son los más perjudiciales, ya que muchos bloquean el renderizado hasta que el visitante elige una opción. Cargue los scripts de terceros con el atributo defer o async para que no retrasen la página, y audite cuántos son realmente necesarios. Eliminar 3 scripts de seguimiento no utilizados con frecuencia mejora el LCP más que otra ronda de compresión de imágenes.
Cómo probar el cambio correctamente
Realice las pruebas en una ventana privada con las extensiones desactivadas y ejecute la medición 3 veces en lugar de confiar en un solo resultado. Las puntuaciones varían entre ejecuciones por un margen notable.
Verifique que el navegador realmente haya recibido el archivo más pequeño. Abra las herramientas de desarrollo, vaya a la pestaña Red, filtre por imágenes y vuelva a cargar. El tamaño transferido y el formato aparecen en la lista. Si la página sigue sirviendo el archivo antiguo, suele significar que una capa de caché está reteniendo la versión anterior, no que la optimización haya fallado.
Cómo mantener el LCP rápido después de la solución
Establezca una regla para las imágenes de portada en lugar de solucionarlas una a una, porque las nuevas páginas volverán a introducir el problema. Un sitio solucionado una vez volverá a empeorar en cuestión de meses si los editores suben imágenes directamente desde una cámara.
Acuerde un ancho máximo y un tamaño de archivo máximo para las imágenes de portada, escríbalo y aplíquelo a cada nueva página. Una regla como 1920 píxeles de ancho y menos de 200 KB es fácil de comprobar y cubre casi cualquier diseño. Cuando publican varias personas, la regla escrita importa más que la técnica, ya que la medición refleja la peor página en lugar de la mejor.
Preparación de imágenes de portada en una sola pasada
Procese todas las imágenes de portada del sitio juntas, ya que comparten una misma especificación y un tamaño objetivo. La mayoría de los sitios tienen entre 10 y 100 de ellas distribuidas en páginas de destino, páginas de categorías y artículos.
Establezca el ancho y el objetivo de KB una vez, arrastre las imágenes y todos los archivos se procesarán con la misma configuración. Se pueden ejecutar hasta 500 imágenes por lote, completamente dentro de su navegador en su propio procesador. No se sube nada, por lo que los recursos de prueba, las páginas de campañas no publicadas y el trabajo de los clientes permanecen en su máquina mientras se prepara toda la biblioteca.