JavaScript verwijderen dat de weergave blokkeert

Deze regel wordt geactiveerd wanneer PageSpeed Insights detecteert dat uw HTML-code verwijst naar een blokkerend extern JavaScript-bestand in het gedeelte van uw pagina boven de vouw.

Overzicht

Voordat een browser een pagina kan weergeven voor de gebruiker, moet de pagina worden geparseerd. Als er tijdens het parseren een blokkerend extern script wordt aangetroffen, wordt het parseren gestopt en moet dat JavaScript worden gedownload. Elke keer dat dit gebeurt, vindt er een netwerkretour plaats, waardoor de tijd voor de eerste weergave van de pagina langer wordt.

Aanbevelingen

JavaScript dat nodig is om het gedeelte boven de vouw weer te geven, moet inline worden geplaatst. JavaScript dat nodig is om extra functionaliteit aan de pagina toe te voegen, moet worden uitgesteld totdat de inhoud boven de vouw is geladen. Als u uw laadtijd zo wilt verbeteren, moet u ook de CSS-weergave optimaliseren.

Kleine JavaScript-bronnen inline plaatsen

Als de externe scripts klein zijn, kunt u ze rechtstreeks opnemen in het HTML-document. Als u kleine bestanden zo inline plaatst, kan de browser doorgaan met het weergeven van de pagina. Als het HTML-document er als volgt uitziet:

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

En de resource small.js is als volgt:

  /* contents of a small JavaScript file */

Dan kunt u het script als volgt inline plaatsen:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Door het script inline in het HTML-document te plaatsen, wordt het verzoek voor small.js verwijderd.

Het laden van JavaScript uitstellen

Om te voorkomen dat JavaScript het laden van een pagina blokkeert, raden we u aan het asynchrone HTML-kenmerk te gebruiken om JavaScript te laden. Bijvoorbeeld:

<script async src="my.js">

Als uw JavaScript-bronnen gebruikmaken van document.write, is het niet veilig om asynchroon laden te gebruiken. We raden u aan scripts die werken met document.write, te herschrijven met een andere techniek.

Als JavaScript asynchroon wordt geladen en uw pagina scripts laadt die van elkaar afhankelijk zijn, moet u ervoor zorgen dat uw app scripts in de juiste afhankelijkheidsvolgorde laadt.

Veelgestelde vragen

Wat als ik een JavaScript-bibliotheek, zoals jQuery, gebruik?
Veel JavaScript-bibliotheken, zoals JQuery, worden gebruikt om de pagina uit te breiden met extra interactiviteit, animaties en andere effecten. Veel van dit gedrag kan echter veilig worden toegevoegd nadat de inhoud boven de vouw is geladen. Onderzoek of u het uitvoeren en laden van dergelijk JavaScript kunt verplaatsen tot na het laden van de pagina.
Wat als ik een JavaScript-framework gebruikt om de pagina op te bouwen?
Als de inhoud van de pagina is opgebouwd met JavaScript aan clientzijde, moet u kijken of u de relevante JavaScript-modules inline kunt plaatsen om extra netwerkcommunicatie te vermijden. Als u gebruikmaakt van weergave aan serverzijde, kunt u de prestaties met betrekking tot het laden van de eerste pagina aanzienlijk verbeteren. Geef JavaScript-sjablonen op de server weer, plaats de resultaten inline in het HTML-document en gebruik sjablonen aan clientzijde zodra de app is geladen. Zie http://youtu.be/VKTWdaupft0?t=14m28s voor meer informatie over weergave aan serverzijde.