Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts wird die dritte Ebene von Anfragen in der Kette kritischer Anfragen als Kandidaten für das Vorabladen gekennzeichnet:
![Screenshot der Prüfung der Schlüsselanfragen des Lighthouse-Vorabladens](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=6&hl=de)
Bestimmung von Kandidaten für das Vorabladen durch Lighthouse-Flags
Angenommen, die Kette kritischer Anfragen Ihrer Seite sieht so aus:
index.html |--app.js |--styles.css |--ui.js
In Ihrer index.html
-Datei wird <script src="app.js">
deklariert. Wenn app.js
ausgeführt wird, wird fetch()
aufgerufen, um styles.css
und ui.js
herunterzuladen. Die Seite wird erst als vollständig angezeigt, wenn die letzten beiden Ressourcen heruntergeladen, geparst und ausgeführt wurden.
Im obigen Beispiel würde Lighthouse styles.css
und ui.js
als Kandidaten markieren.
Die potenziellen Einsparungen basieren darauf, wie viel früher der Browser die Anfragen starten könnte, wenn Sie Vorablade-Links deklariert haben.
Wenn app.js
beispielsweise 200 ms zum Herunterladen, Parsen und Ausführen benötigt, betragen die potenziellen Einsparungen für jede Ressource 200 ms, da app.js
kein Engpass mehr für die einzelnen Anfragen darstellt.
Anfragen zum Vorabladen können dazu führen, dass deine Seiten schneller geladen werden.
![Ohne Vorablade-Links werden „styles.css“ und „ui.js“ erst angefordert, nachdem „app.js“ heruntergeladen, geparst und ausgeführt wurde.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=6&hl=de)
styles.css
und ui.js
erst angefordert, nachdem app.js
heruntergeladen, geparst und ausgeführt wurde.
Das Problem hier besteht darin, dass der Browser diese letzten beiden Ressourcen erst erkennt, nachdem er app.js
heruntergeladen, geparst und ausgeführt hat.
Sie wissen aber, dass diese Ressourcen wichtig sind und
so schnell wie möglich heruntergeladen werden sollten.
Vorablade-Links deklarieren
Deklarieren Sie Vorablade-Links im HTML-Code, um den Browser anzuweisen, wichtige Ressourcen so schnell wie möglich herunterzuladen.
<head>
...
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="ui.js" as="script" />
...
</head>
![Mit Preload-Links werden „styles.css“ und „ui.js“ gleichzeitig mit „app.js“ angefordert.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=6&hl=de)
styles.css
und ui.js
gleichzeitig mit app.js
angefordert.
Weitere Informationen finden Sie unter Wichtige Assets vorab laden, um die Ladegeschwindigkeit zu verbessern.
Browserkompatibilität
Seit Juni 2020 wird das Vorabladen in Chromium-basierten Browsern unterstützt. Weitere Informationen finden Sie unter Browserkompatibilität.
Unterstützung für Vorabladen entwickeln
Weitere Informationen finden Sie auf der Seite Assets vorab laden von Tooling.Report.
Stackspezifische Anleitung
Angular
Routen vorab laden, um die Navigation zu beschleunigen
Magento
Ändern Sie das Layout des Designs und fügen Sie <link rel=preload>
-Tags hinzu.