Optimiza la prioridad de las imágenes

Los navegadores usan heurísticas para asignar prioridades de carga a las imágenes, pero es posible que estos valores predeterminados no siempre se alineen con el Largest Contentful Paint (LCP) de tu página.

Usar fetchpriority en un elemento <img> te permite indicar de forma explícita la importancia de una imagen al navegador, lo que garantiza que las imágenes fundamentales se carguen más rápido, mientras que las no esenciales no compiten por el ancho de banda.

El atributo loading=lazy evita que se descarguen imágenes cuando están lo suficientemente fuera de la pantalla, lo que puede ayudar a priorizar las imágenes.

Cómo implementarlo

1. Identifica la imagen de LCP: Determina qué imagen es la candidata más probable para el Largest Contentful Paint (por lo general, la imagen hero en la parte superior de la página).
2. Aumenta la prioridad del LCP: Agrega fetchpriority="high" al elemento <img> para el candidato de LCP.
3. Quita prioridad a las imágenes no esenciales: Para las imágenes que forman parte de una IU secundaria o que solo se revelan después de la interacción del usuario (como megamenús, modales o diapositivas de carrusel fuera de la pantalla), agrega fetchpriority="low".
4. Optimiza la carga diferida: Nunca uses loading="lazy" en la imagen del LCP. En el caso de las imágenes estándar que se encuentran en la mitad inferior de la página, basta con loading="lazy" para aplazar la solicitud hasta que el usuario se desplace cerca de ellas. Evita agregar fetchpriority="low" a estas imágenes, ya que quieres que se carguen con prioridad normal una vez que el usuario se desplace hasta ellas. Reserva fetchpriority="low" para las imágenes que técnicamente están "en la mitad superior de la página", pero que no se ven inicialmente (p.ej., diapositivas de carrusel ocultas o megamenús). Para estas imágenes ocultas, también se puede usar loading="lazy". El navegador controlará el tiempo de la solicitud y respetará la prioridad baja.
5. Prioriza las prioridades predeterminadas: Si una imagen debe tener una prioridad de carga normal, omite el atributo fetchpriority por completo en lugar de establecerlo en auto. Esta es una convención de estilo para mantener tu HTML más limpio mientras confías en la heurística nativa del navegador.

Ejemplo de código

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Prácticas recomendadas

• OBLIGATORIO: Aplica siempre fetchpriority="high" a la imagen de LCP.
• OBLIGATORIO: Solo usa fetchpriority="high" en 1 o 2 imágenes críticas como máximo para evitar la contención de la red y diluir el aumento de prioridad.
• OBLIGATORIO: Usa fetchpriority="low" para las imágenes que técnicamente están "en la mitad superior de la página", pero que inicialmente están ocultas (p.ej., diapositivas de carrusel ocultas, imágenes de megamenú).
• OBLIGATORIO: No uses fetchpriority="low" en imágenes estándar de la mitad inferior de la página que ya usen loading="lazy". Estas imágenes deben cargarse con prioridad normal una vez que ingresan al viewport.
• RECOMENDACIÓN: Evita usar fetchpriority="auto". Si quieres la prioridad predeterminada, omite el atributo por completo para mantener limpio tu HTML.
• NO combines fetchpriority="high" con loading="lazy".
• NO uses el atributo importance obsoleto. Se reemplazó por fetchpriority y no es compatible con ningún navegador.
• NO uses el valor loading="auto" obsoleto. Inicialmente, era compatible con Chrome, pero se quitó y ya no es compatible con ningún navegador.

Estrategia de resguardo

El atributo fetchpriority es una mejora progresiva para el elemento <img>. Si un navegador no lo admite, se ignora el atributo y el navegador usa su heurística de prioridad predeterminada.