Verbinding mislukt. Probeer het opnieuw.

Naar inhoud springen
SEO Tools
Help en documentatie
Snelheid Hoge impact Makkelijk 5–15 minuten

Uitstellen/asynchroonen op scripts

Een synchrone <script> blokkeert het renderen – stel dit uit.

Wat het is

Wanneer de browser een gewone <script> tegenkomt, stopt hij met het weergeven van de pagina, downloadt en voert het script uit, en gaat pas daarna verder. Dit wordt een "render-blocking"-script genoemd. De kenmerken uitstellen en async veranderen dit gedrag.

Waarom het belangrijk is

Elk blokkerend script in het hoofd vertraagt ​​het moment waarop de gebruiker inhoud ziet (verslechtering van LCP en First Paint). Bij meerdere scripts lopen de vertragingen op. Op mobiele en langzame verbindingen betekent dit seconden van een lege witte pagina – en een hoger bouncepercentage.

Hoe je het doet

  1. 1Markeer scripts die niet nodig zijn voor de eerste weergave met het uitstelattribuut: ze worden op de achtergrond gedownload en worden pas uitgevoerd nadat de pagina is gebouwd, in de volgorde waarin ze verschijnen.
  2. 2Voor onafhankelijke scripts (analyses, chat) gebruikt u async: ze worden uitgevoerd zodra ze worden gedownload, ongeacht de volgorde.
  3. 3Houd kritische scripts minimaal; laad de rest aan het einde van <body> of met uitstel.
  4. 4Regel: uitstellen = afhankelijk van de DOM of van bestelling; async = standalone, er hangt niets van af.

Voorbeeld

Fout
<head>
  <script src="/js/app.js"></script>   <!-- blocks rendering -->
</head>
Goed
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Conclusie

Uitstellen/asynchroniseren is een van de goedkoopste en meest effectieve snelheidsoptimalisaties; vaak is het voldoende om één woord aan de tag toe te voegen. Voor de meeste scripts is uitstel de juiste keuze. Controleer na de implementatie of niets meer werkt (vooral orderafhankelijke scripts) en meet de LCP-verbetering.

Gerelateerde onderwerpen