Optimización de la métrica LCP
Radek ŠírActualizado 7/2/20269 minutos lecturaExploremos juntos los problemas que puede presentar la métrica Largest Contentful Paint (LCP) y cómo optimizarla de manera más efectiva.
Hemos preparado varios consejos para optimizar la métrica LCP. Estos consejos se basan en nuestra asesoría sobre velocidad. Aquí le mostraremos, por ejemplo, el uso de tecnologías como Priority Hints, preload o la carga perezosa nativa.
Si desea obtener más información, continúe leyendo o vea la grabación de nuestro seminario web:
YouTube: Optimización práctica de la métrica de velocidad LCP
Antes de comenzar, consulte cómo identificar correctamente el elemento LCP. Esto es crucial para otras optimizaciones.
Priority Hints (aumento de prioridad directamente en el elemento)
Si el elemento LCP es una imagen, puede cambiar su prioridad de descarga usando Priority Hints. Aumenta la prioridad añadiendo el parámetro fetchpriority="high" en la etiqueta <img>. Este parámetro asegura que la fuente de la imagen comience a descargarse con la máxima prioridad, garantizando así la representación más rápida de este elemento.
Para otras imágenes en la página, añada el parámetro loading="lazy" en la etiqueta <img>. Esto le indica al navegador que desea descargar y renderizar este recurso solo cuando el usuario se desplace hasta él.
No olvide las imágenes de las áreas editadas mediante WYSIWYG, que los editores del sitio web insertan en las páginas.
También tenga en cuenta los carruseles y componentes similares con múltiples imágenes. Si el carrusel es el elemento LCP en la página, añada el parámetro fetchpriority="high" a la primera imagen y loading="lazy" a todas las demás.
<ul class="carousel">
<!-- Primera imagen del carrusel,
a la cual aumentamos la prioridad de carga: -->
<li><img src="imagen1.webp" fetchpriority="high" alt="" /></li>
<!-- Otras imágenes del carrusel,
a las que damos baja prioridad de carga: -->
<li><img src="imagen2.webp" loading="lazy" alt="" /></li>
<li><img src="imagen3.webp" loading="lazy" alt="" /></li>
</ul>
El soporte ya es bastante amplio. El parámetro fetchpriority funciona en todos los navegadores modernos excepto Firefox. Más información está disponible en web.dev.
Preload (aumento de prioridad en el encabezado del documento)
De manera similar a Priority Hints, funciona la etiqueta <preload>. Mediante la etiqueta <preload>, se puede indicar al navegador que debe comenzar a descargar el recurso lo antes posible. El preload es útil, por ejemplo, para precargar esos archivos de fuentes web que son importantes para la primera representación del área visible de la página:
<link rel="preload" href="/font400.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/font500.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/font600.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
Con <preload> se pueden precargar fuentes web, archivos JavaScript o imágenes.
La ventaja de la etiqueta <preload> es que funciona en todos los navegadores.
Si desea usar preload en imágenes con srcset, es necesario definir las fuentes en el orden exacto para todas las anchuras y todas las imágenes de origen. En ese aspecto, es mucho más sencillo usar el parámetro fetchpriority="high", que se añade directamente en la etiqueta <img>, y el navegador decide por usted qué fuente descargar prioritariamente.
Otra desventaja es que <preload> debe colocarse en el encabezado <head> lo más alto posible. Coloque el preload para la fuente al principio del encabezado <head>, antes de <link>, que declara la ruta a los archivos CSS con estilos.
Más información sobre cómo preparar correctamente <preload> está disponible en MDN.
Carga perezosa nativa
El uso del lazyload nativo es hoy en día un estándar, ya que cuenta con soporte completo en todos los navegadores modernos. Utilice lazyloading en todos los elementos <iframe> y <img> que no se encuentren en el primer viewport. Esto asegurará que el navegador pueda gestionar eficazmente la carga de estos elementos.
Cuando se utiliza lazy loading con JavaScript, donde las etiquetas <img> no tienen establecido el atributo src, el navegador no tiene conocimiento de los archivos de origen.
<img src="imagen1.webp" loading="lazy" alt="" />
Imágenes en formato WebP
Prepare imágenes en el moderno formato WebP y úselas en todas las partes de su sitio web, incluidas las imágenes ilustrativas. Este formato permite un ahorro significativo de espacio en comparación con los formatos JPG o PNG, mantiene la calidad y mejora la velocidad de carga de las páginas.
No olvide optimizar las imágenes de las partes WYSIWYG, que son preparadas por los editores del sitio web.
Ajuste manualmente la compresión de imágenes ilustrativas, por ejemplo, utilizando la herramienta Squoosh.
Herramienta Squoosh, que le permite experimentar con diferentes variantes de compresión.
Consejo: Al momento de publicar este artículo, Google presenta la biblioteca Jpegli, que puede comprimir imágenes en formato JPG hasta un 35 % mejor que las bibliotecas originales y puede competir en tamaño con el formato WebP.
Optimice las fuentes web
Antes de implementar fuentes web en su sitio, verifique su tamaño y considere el uso de subsetting para optimizar el tamaño final.
Siempre que sea posible, prefiera el almacenamiento local de las fuentes en su servidor, lo que puede mejorar significativamente la velocidad de carga de las páginas. Para generar archivos locales para fuentes de Google, puede utilizar Google Font Helper.
Siempre utilice el formato WOFF2. No se necesita otro formato hoy en día. WOFF2 es ampliamente compatible con todos los navegadores modernos.
Antes de implementar archivos de fuentes, verifique su contenido, por ejemplo, utilizando la herramienta Wakamai Fondue, para descubrir el número de caracteres, ejes y otra información para la selección y configuración óptima de fuentes en su sitio web.
Antes de la optimización, el archivo de la fuente tiene un tamaño de 51 kB. Fuente: Wakamai Fondue.
Después de la optimización, el archivo de la fuente tiene un tamaño de 19 kB. Fuente: Wakamai Fondue.
Después de optimizar todos los archivos de fuentes, se ahorraron aproximadamente 100 kB en la transferencia de datos. Fuente: PageSpeed Monitoring.
Archivos JS y scripts en línea
Coloque siempre los archivos JavaScript en el pie de página antes de la etiqueta </body> o en el encabezado antes de la etiqueta </head> en sus páginas. Idealmente, use el atributo defer, que permite procesar los archivos JS solo después de que el navegador haya terminado de analizar el código HTML.
<script src="app.js" defer></script>
Evite insertar scripts "ad-hoc" directamente en el código de la página. Por ejemplo, el archivo maps.google.com/maps/api/js, para manejar mapas en la página, no debería estar insertado en medio del documento HTML. Un script mal ubicado puede bloquear el renderizado de toda la página.
Compresión correcta Brotli o Gzip
Al optimizar un sitio web, es importante verificar la configuración de compresión para archivos de texto como CSS, JS, SVG e ICO. Asegúrese de que la compresión Gzip o Brotli esté habilitada en el servidor.
- Para la compresión Gzip, recomendamos establecer al menos el nivel 7, idealmente 9 - 10. Para Brotli, el nivel de compresión 6 - 7.
- Con la configuración correcta, asegurará una reducción efectiva del tamaño de los archivos y una carga más rápida de las páginas para los usuarios.
- No olvide también verificar si la compresión está correctamente configurada para archivos SVG, lo cual a menudo se pasa por alto.
- Por otro lado, la compresión no debe estar habilitada para el formato de imagen WebP, ya que estos archivos ya están comprimidos y la compresión podría aumentar su tamaño.
Para verificar la configuración de compresión, puede usar la herramienta Gzip and Brotli Compression Level Estimator.
Otras opciones de optimización de LCP
- Utilice BF cache para cargar instantáneamente la página desde el historial de navegación.
- Agregue Speculation Rules al sitio web para la carga instantánea de la página mediante renderizado en segundo plano.
- Asegúrese de que su LCP no "caiga" en la barra de cookies, que puede cargarse más tarde.
- Divida CSS en archivos más pequeños.
- Organice su
<head>.
¿Y qué decir al final sobre la optimización de LCP?
La optimización de la métrica LCP es clave para lograr sitios web rápidos y agradables para el usuario. La implementación correcta de técnicas como las mencionadas en el artículo puede ser de gran ayuda.
Monitorear LCP y la velocidad en general diariamente y analizar el código recién implementado son esenciales para mantener un alto nivel de rendimiento del sitio web.
En nuestro tester PLUS puede utilizar el monitoreo diario. Para URLs seleccionadas, monitoreamos y almacenamos datos CrUX de Google y realizamos mediciones sintéticas usando Lighthouse.
Visualización de datos CrUX de Google para las URLs que monitoreamos.
Con la función "Vigilante", enviamos resultados de deterioro de métricas de rendimiento a Slack o MS Teams.
Deterioro de la métrica LCP en una de las pruebas sintéticas automatizadas en la herramienta pagespeed.one.
Además de recomendaciones generales, hoy tenemos en el informe de Dominios datos detallados del CrUX API. No solo verá si su LCP se debe a una imagen o elemento de texto, sino también exactamente qué parte de la carga de la imagen añade el mayor retraso: la respuesta del servidor, la descarga en sí, o la renderización. Esto permite enfocar la optimización de LCP de manera mucho más precisa y los resultados llegan más rápido.
Cubrimos el tema de la optimización de las métricas Core Web Vitals en toda su extensión, lea nuestros otros artículos: