Sleutelverzoeken vooraf laden

In het gedeelte Mogelijkheden van uw Lighthouse-rapport wordt het derde niveau van verzoeken in uw kritieke verzoekketen gemarkeerd als preload-kandidaten:

Een screenshot van de Lighthouse Preload-audit van sleutelverzoeken

Hoe Lighthouse-vlaggen de voorgeladen kandidaten bepalen

Stel dat de kritieke verzoekketen van uw pagina er als volgt uitziet:

index.html |--app.js |--styles.css |--ui.js

Uw index.html bestand declareert <script src="app.js"> . Wanneer app.js wordt uitgevoerd, wordt fetch() aangeroepen om styles.css en ui.js te downloaden. De pagina lijkt pas compleet als de laatste twee bronnen zijn gedownload, geparseerd en uitgevoerd. Met behulp van het bovenstaande voorbeeld zou Lighthouse styles.css en ui.js als kandidaten markeren.

De potentiële besparingen zijn gebaseerd op hoeveel eerder de browser de verzoeken zou kunnen starten als u vooraf geladen links had opgegeven. Als app.js bijvoorbeeld 200 ms nodig heeft om te downloaden, te parseren en uit te voeren, is de potentiële besparing voor elke bron 200 ms, omdat app.js niet langer een knelpunt is voor elk van de verzoeken.

Als u verzoeken vooraf laadt, kunnen uw pagina's sneller worden geladen.

Zonder preload-links worden style.css en ui.js pas opgevraagd nadat app.js is gedownload, geparseerd en uitgevoerd.
Zonder preload-links worden styles.css en ui.js pas opgevraagd nadat app.js is gedownload, geparseerd en uitgevoerd.

Het probleem hier is dat de browser zich pas bewust wordt van die laatste twee bronnen nadat app.js is gedownload, geparseerd en uitgevoerd. Maar u weet dat deze bronnen belangrijk zijn en zo snel mogelijk moeten worden gedownload.

Vermeld vooraf geladen links in uw HTML om de browser te instrueren de belangrijkste bronnen zo snel mogelijk te downloaden. 

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
Met preload-links worden style.css en ui.js tegelijk met app.js opgevraagd.
Met preload-links worden styles.css en ui.js tegelijkertijd opgevraagd als app.js .

Zie ook Kritieke assets vooraf laden om de laadsnelheid te verbeteren voor meer begeleiding.

Browsercompatibiliteit

Vanaf juni 2020 wordt vooraf laden ondersteund in Chromium-gebaseerde browsers. Zie Browsercompatibiliteit voor updates.

Bouw toolondersteuning voor voorladen

Zie de pagina Activa vooraf laden van Tooling.Report .

Stapelspecifieke begeleiding

Hoekig

Laad routes vooraf in om de navigatie te versnellen.

Magento

Wijzig de lay-out van uw thema's en voeg <link rel=preload> -tags toe.

Bronnen