Schlüsselanfragen vorab laden

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

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.
Ohne Vorablade-Links werden 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.

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.
Mit Preload-Links werden 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.

Ressourcen