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](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=9&hl=nl)
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.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=9&hl=nl)
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.
Geef uw preload-links aan
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.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=9&hl=nl)
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 'Activiteiten vooraf laden' van Tooling.Report .
Stapelspecifieke begeleiding
Hoekig
Laad routes vooraf in om de navigatie te versnellen.
Magento
Pas de lay-out van uw thema's aan en voeg <link rel=preload>
-tags toe.