Schlüsselanfragen vorab laden

Im Bereich „Optimierungsmöglichkeiten“ Ihres Lighthouse-Berichts werden die Anfragen der dritten Ebene in Ihrer Kette kritischer Anfragen als Kandidaten für das Vorabladen gekennzeichnet:

Screenshot der Lighthouse-Prüfung „Schlüsselanfragen vorab laden“

So werden Vorabladenkandidaten durch Lighthouse-Flags bestimmt

Angenommen, die Kette kritischer Anfragen Ihrer Seite sieht so aus:

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

In Ihrer Datei index.html 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 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 kennzeichnen.

Die potenziellen Einsparungen basieren darauf, wie viel früher der Browser die Anfragen starten könnte, wenn Sie Preload-Links deklariert hätten. Wenn es beispielsweise 200 ms dauert, bis app.js heruntergeladen, geparst und ausgeführt wird, beträgt die potenzielle Einsparung für jede Ressource 200 ms, da app.js nicht mehr der Engpass für die einzelnen Anfragen ist.

Durch das Vorabladen von Anfragen können Sie die Ladegeschwindigkeit Ihrer Seiten erhöhen.

Ohne Preload-Links werden styles.css und ui.js erst angefordert, nachdem app.js heruntergeladen, geparst und ausgeführt wurde.
Ohne Preload-Links werden styles.css und ui.js erst angefordert, nachdem app.js heruntergeladen, geparst und ausgeführt wurde.

Das Problem besteht darin, dass der Browser erst dann auf die letzten beiden Ressourcen aufmerksam wird, wenn er app.js heruntergeladen, geparst und ausgeführt hat. Sie wissen jedoch, 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 bald wie möglich zu laden.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
Bei 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. Aktuelle Informationen finden Sie unter Browserkompatibilität.

Unterstützung von Build-Tools für das Vorladen

Weitere Informationen finden Sie auf der Seite Tooling.Report's Preloading Assets.

Stack-spezifische Anleitung

Angular

Lassen Sie Routen vorab laden, um die Bedienung zu beschleunigen.

Magento

Layout Ihres Designs ändern und <link rel=preload>-Tags hinzufügen.

Ressourcen