Optimiza la prioridad de precarga

Funciones web: Prioridad de recuperación <link rel="preload">

La carga previa de recursos con <link rel="preload"> le indica al navegador que pronto se necesitará un recurso. Sin embargo, las precargas heredan la prioridad predeterminada para el tipo de recurso y, en particular, para las imágenes, esta es baja. El uso de fetchpriority te permite definir mejor esta prioridad relativa, en particular, garantizar que las precargas de imágenes se precarguen con una prioridad alta, lo que les permite comenzar antes y usar más recursos de ancho de banda.

Cómo implementarlo

  1. Identifica los candidatos para la precarga: Busca recursos que el navegador no descubra con anticipación (p.ej., imágenes de póster de video o imágenes de fondo en CSS), pero que sean esenciales para la apariencia de la página.
  2. Eleva las precargas de imágenes fundamentales: Para la imagen de LCP o cualquier otra imagen fundamental que no se priorice de forma predeterminada, usa <link rel="preload" fetchpriority="high"> para asegurarte de que se prioricen por encima de otras precargas. Ten en cuenta que las fuentes ya tienen prioridad alta de forma predeterminada.
  3. Quita la prioridad de las precargas no esenciales: Para los recursos que no son esenciales para la renderización inicial (p.ej., un video de fondo o fuentes secundarias), usa <link rel="preload" fetchpriority="low">.
  4. Coordinación con los tipos de recursos: Ten en cuenta que los diferentes tipos de as tienen distintas prioridades predeterminadas. Usa fetchpriority para anular estos valores predeterminados cuando sea necesario.

Ejemplo de código

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Prácticas recomendadas

  • OBLIGATORIO: Solo usa fetchpriority="high" en un máximo de 1 o 2 precargas de imágenes críticas para evitar la contención de la red y diluir el aumento de prioridad.
  • OBLIGATORIO: Usa fetchpriority="high" en las imágenes de Largest Contentful Paint (LCP).
  • SÍ: Limita la cantidad total de precargas en una página a un máximo de 2 imágenes y de 2 a 3 fuentes esenciales para evitar la contención del ancho de banda.
  • SÍ usa fetchpriority="low" para las precargas que quieras que el navegador inicie temprano, pero no a expensas de los recursos críticos (especialmente las fuentes no críticas).
  • SÍ especifica el atributo as correctamente para garantizar que se use la precarga.
  • SÍ prefiere que los recursos críticos (como las imágenes de LCP) se puedan descubrir de forma estática en HTML a través de etiquetas <img> en lugar de depender de las precargas para las imágenes de fondo.
  • SÍ asegúrate de que las precargas de fuentes siempre tengan el atributo crossorigin (incluso si son del mismo origen).
  • NO uses el atributo importance obsoleto. Se reemplazó por fetchpriority.

Estrategia de resguardo

El atributo fetchpriority en <link rel="preload"> es una mejora progresiva. Los navegadores que no lo admitan seguirán precargando el recurso con su prioridad predeterminada para ese tipo de recurso. Para garantizar la compatibilidad, siempre proporciona los atributos as y type correctos.