Ottimizza la priorità degli script

Funzionalità web: Fetch priority

I browser assegnano priorità predefinite agli script in base alla loro posizione nel documento e alla presenza di attributi come async o defer. L'utilizzo di fetchpriority offre agli sviluppatori un controllo esplicito per garantire che gli script critici vengano caricati per primi, mentre quelli non essenziali non interferiscono.

Come implementare

  1. Identifica gli script critici: determina quali script sono essenziali per la funzionalità di base della pagina o per l'interazione iniziale dell'utente.
  2. Dai priorità agli script asincroni critici: per gli script critici caricati con async o defer, aggiungi l'attributo fetchpriority="high" per assicurarti che abbiano la priorità durante la fase di rilevamento.
  3. Riduci la priorità degli script non essenziali: per gli script che non sono necessari immediatamente (ad es. analisi, annunci o widget below the fold), aggiungi fetchpriority="low" e assicurati che abbiano un attributo async, defer o module per evitare il blocco.
  4. Sequenzia gli script che bloccano l'analizzatore: utilizza fetchpriority="low" sugli script che bloccano l'analizzatore alla fine del corpo per evitare che competano per la larghezza di banda con risorse più critiche.

Esempio di codice

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Best practice

  • OBBLIGATORIO: utilizza fetchpriority="high" solo su un massimo di 1-2 script critici per evitare la congestione della rete e la diluizione dell'aumento della priorità.
  • SÌ: utilizza fetchpriority="high" specificamente per gli script async che sono noti per essere fondamentali per Interaction to Next Paint (INP).
  • SÌ: declassa gli script non necessari per l'esperienza utente iniziale utilizzando fetchpriority="low".
  • NON utilizzare fetchpriority su ogni tag di script; deve essere utilizzato solo per modificare l'euristica predefinita del browser quando è noto che non è ottimale.
  • NON utilizzare l'attributo importance deprecato. È stato sostituito da fetchpriority.

Strategia di riserva

L'attributo fetchpriority è un potenziamento progressivo. I browser che non lo supportano ignoreranno l'attributo e utilizzeranno la loro logica di pianificazione interna senza errori. Per l'utilizzo di base non è necessario alcun rilevamento esplicito delle funzionalità o logica di riserva.