Scriptprioriteit optimaliseren

Webfuncties: Ophaalprioriteit

Browsers wijzen standaardprioriteiten toe aan scripts op basis van waar ze in het document verschijnen en of ze kenmerken hebben zoals async of defer. Met fetchpriority hebben ontwikkelaars expliciete controle om te zorgen dat kritieke scripts als eerste worden geladen, terwijl niet-essentiële scripts op de achtergrond blijven.

Hoe wordt dit geïmplementeerd

  1. Kritieke scripts identificeren: Bepaal welke scripts essentieel zijn voor de kernfunctionaliteit van de pagina of de eerste gebruikersinteractie.
  2. Kritieke asynchrone scripts prioriteit geven: Voor kritieke scripts die zijn geladen met async of defer, voeg je het kenmerk fetchpriority="high" toe om te zorgen dat ze prioriteit krijgen tijdens de ontdekkingsfase.
  3. Geef niet-essentiële scripts een lagere prioriteit: Voor scripts die niet onmiddellijk nodig zijn (bijvoorbeeld analyses, advertenties of widgets onder de vouw), voeg je fetchpriority="low" toe en zorg je dat ze een kenmerk async, defer of module hebben om blokkering te voorkomen.
  4. Parser-blokkerende scripts in een reeks plaatsen: Gebruik fetchpriority="low" voor parser-blokkerende scripts aan het einde van de hoofdtekst om te voorkomen dat ze strijden om bandbreedte met belangrijkere bronnen.

Voorbeeldcode

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

Praktische tips

  • VERPLICHT: Gebruik fetchpriority="high" alleen voor maximaal 1-2 kritieke scripts om netwerkconflicten en verwatering van de prioriteitsboost te voorkomen.
  • Gebruik WEL fetchpriority="high" specifiek voor async-scripts waarvan bekend is dat ze essentieel zijn voor Interaction to Next Paint (INP).
  • WEL: Geef scripts die niet vereist zijn voor de eerste gebruikerservaring een lagere prioriteit met fetchpriority="low".
  • Gebruik fetchpriority NIET voor elke scripttag. Gebruik deze alleen om de standaard heuristiek van de browser te wijzigen als bekend is dat deze suboptimaal is.
  • Gebruik het beëindigde kenmerk importance NIET. Deze is vervangen door fetchpriority.

Reservestrategie

Het kenmerk fetchpriority is een progressive enhancement. Browsers die dit niet ondersteunen, negeren het kenmerk en gebruiken hun interne planningslogica zonder fouten. Voor basisgebruik is geen expliciete functiedetectie of fallback-logica vereist.