Ottimizza la priorità di precaricamento

Il precaricamento delle risorse con <link rel="preload"> indica al browser che una risorsa sarà necessaria a breve. Tuttavia, i precaricamenti ereditano la priorità predefinita per il tipo di risorsa e, in particolare per le immagini, questa è bassa. L'utilizzo di fetchpriority ti consente di perfezionare questa priorità relativa, in particolare garantendo che i precaricamenti delle immagini vengano eseguiti con una priorità elevata, in modo che possano iniziare prima e utilizzare più risorse di larghezza di banda.

Come implementare

1. Identifica i candidati per il precaricamento: trova le risorse che non vengono rilevate in anticipo dal browser (ad esempio immagini poster di video o immagini di sfondo in CSS), ma che sono essenziali per l'aspetto della pagina.
2. Aumenta la priorità dei precaricamenti delle immagini critiche: per l'immagine LCP o altre immagini critiche a cui non viene assegnata la priorità per impostazione predefinita, utilizza <link rel="preload" fetchpriority="high"> per assicurarti che abbiano la priorità rispetto ad altri precaricamenti. Tieni presente che i caratteri hanno già una priorità elevata per impostazione predefinita.
3. Riduci la priorità dei precaricamenti non critici: per le risorse non critiche per il rendering iniziale (ad es. un video di sfondo o caratteri secondari), utilizza <link rel="preload" fetchpriority="low">.
4. Coordinamento con i tipi di risorse: tieni presente che i diversi tipi di as hanno priorità predefinite diverse; utilizza fetchpriority per eseguire l'override di queste impostazioni predefinite, se necessario.

Esempio di codice

<!-- 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>

Best practice

• OBBLIGATORIO: utilizza fetchpriority="high" solo su un massimo di 1-2 precaricamenti di immagini critici per evitare la congestione della rete e la diluizione dell'aumento della priorità.
• OBBLIGATORIO: utilizza fetchpriority="high" sulle immagini Largest Contentful Paint (LCP).
• SÌ: limita il numero totale di precaricamenti in una pagina a un massimo di 2 immagini e 2-3 caratteri essenziali per evitare conflitti di larghezza di banda.
• SÌ: utilizza fetchpriority="low" per i precaricamenti che vuoi che il browser avvii in anticipo, ma non a scapito di risorse critiche (soprattutto i caratteri non critici).
• SÌ: specifica correttamente l'attributo as per assicurarti che il precaricamento venga utilizzato.
• SÌ: preferisci rendere le risorse critiche (come le immagini LCP) rilevabili staticamente in HTML tramite i tag <img>, anziché fare affidamento sui precaricamenti per le immagini di sfondo.
• SÌ: assicurati che i precaricamenti dei caratteri abbiano sempre l'attributo crossorigin (anche se della stessa origine).
• NON utilizzare l'attributo importance deprecato. È stato sostituito da fetchpriority.

Strategia di riserva

L'attributo fetchpriority su <link rel="preload"> è un potenziamento progressivo. I browser che non lo supportano precaricheranno comunque la risorsa utilizzando la priorità predefinita per quel tipo di risorsa. Per garantire la compatibilità, fornisci sempre gli attributi as e type corretti.