Wichtige Assets vorab laden, um die Ladegeschwindigkeit zu verbessern

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

Wenn Sie eine Webseite öffnen, fordert der Browser das HTML-Dokument von einem Server an, analysiert den Inhalt und sendet separate Anfragen für alle referenzierten Ressourcen. Als Entwickler wissen Sie bereits, welche Ressourcen für Ihre Seite erforderlich sind und welche am wichtigsten sind. So können Sie die kritischen Ressourcen vorab anfordern und den Ladevorgang beschleunigen. In diesem Beitrag erfahren Sie, wie Sie das mit <link rel="preload"> erreichen.

So funktioniert das Vorladen

Das Vorabladen eignet sich am besten für Ressourcen, die vom Browser in der Regel erst spät erkannt werden.

Screenshot des Bereichs „Netzwerk“ in den Chrome DevTools
In diesem Beispiel wird die Pacifico-Schriftart im Stylesheet mit der @font-face-Regel definiert. Der Browser lädt die Schriftartdatei erst, nachdem das Stylesheet heruntergeladen und geparst wurde.

Wenn Sie eine bestimmte Ressource vorab laden, teilen Sie dem Browser mit, dass Sie sie früher abrufen möchten, als er sie sonst finden würde, weil Sie sicher sind, dass sie für die aktuelle Seite wichtig ist.

Screenshot des Chrome DevTools-Netzwerkbereichs nach dem Anwenden des Vorabladens
In diesem Beispiel ist die Schriftart „Pacifico“ vorab geladen, sodass der Download parallel zum Stylesheet erfolgt.

Die Kette kritischer Anfragen stellt die Reihenfolge der Ressourcen dar, die vom Browser priorisiert und abgerufen werden. Lighthouse kennzeichnet Assets auf der dritten Ebene dieser Kette als spät erkannt. Mit der Prüfung Schlüsselanfragen vorladen können Sie ermitteln, welche Ressourcen vorgeladen werden sollen.

Audit von Lighthouse zum Vorabladen von Schlüsselanfragen.

Sie können Ressourcen vorab laden, indem Sie ein <link>-Tag mit rel="preload" in den Header Ihres HTML-Dokuments einfügen:

<link rel="preload" as="script" href="critical.js">

Der Browser speichert vorab geladene Ressourcen im Cache, damit sie bei Bedarf sofort verfügbar sind. Die Scripts werden nicht ausgeführt und die Stylesheets nicht angewendet.

Ressourcenhinweise wie preconnect und prefetch werden vom Browser nach Bedarf ausgeführt. Die preload ist dagegen für den Browser obligatorisch. Moderne Browser sind bereits ziemlich gut im Priorisieren von Ressourcen. Deshalb ist es wichtig, preload sparsam zu verwenden und nur die wichtigsten Ressourcen vorab zu laden.

Nicht verwendete Vorabladevorgänge lösen in Chrome etwa 3 Sekunden nach dem load-Ereignis eine Konsolenwarnung aus.

Warnung in der Chrome-Entwicklertools-Konsole zu nicht verwendeten vorab geladenen Ressourcen.

Anwendungsfälle

In CSS definierte Ressourcen vorab laden

Schriftarten, die mit @font-face-Regeln definiert sind, oder Hintergrundbilder, die in CSS-Dateien definiert sind, werden erst erkannt, wenn der Browser diese CSS-Dateien herunterlädt und analysiert. Wenn Sie diese Ressourcen vorab laden, werden sie abgerufen, bevor die CSS-Dateien heruntergeladen wurden.

CSS-Dateien vorab laden

Wenn Sie den Ansatz für kritisches CSS verwenden, teilen Sie Ihr CSS in zwei Teile auf. Das kritische CSS, das für das Rendern der Inhalte „above the fold“ (ohne Scrollen sichtbar) erforderlich ist, wird in die <head> des Dokuments eingebettet. Nicht kritisches CSS wird in der Regel mit JavaScript lazy geladen. Wenn Sie warten, bis JavaScript ausgeführt wird, bevor Sie nicht kritisches CSS laden, kann das zu Verzögerungen beim Rendern führen, wenn Nutzer scrollen. Daher ist es empfehlenswert, den Download mit <link rel="preload"> früher zu starten.

JavaScript-Dateien vorab laden

Da Browser vorab geladene Dateien nicht ausführen, ist das Vorladen nützlich, um das Abrufen von der Ausführung zu trennen. So können Messwerte wie die Time to Interactive verbessert werden. Das Vorladen funktioniert am besten, wenn Sie Ihre JavaScript-Bundles aufteilen und nur kritische Chunks vorladen.

rel=preload implementieren

Die einfachste Möglichkeit, preload zu implementieren, besteht darin, dem <head> des Dokuments ein <link>-Tag hinzuzufügen:

<head>
  <link rel="preload" as="script" href="critical.js">
</head>

Mit dem Attribut as kann der Browser die Priorität der vorabgerufenen Ressource gemäß ihrem Typ festlegen, die richtigen Header festlegen und feststellen, ob die Ressource bereits im Cache vorhanden ist. Zulässige Werte für dieses Attribut sind: script, style, font, image und andere.

Einige Arten von Ressourcen, z. B. Schriftarten, werden im anonymen Modus geladen. Für diese müssen Sie das crossorigin-Attribut mit preload festlegen:

<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

<link>-Elemente akzeptieren auch das type-Attribut, das den MIME-Typ der verknüpften Ressource enthält. Die Browser verwenden den Wert des Attributs type, um dafür zu sorgen, dass Ressourcen nur dann vorab geladen werden, wenn ihr Dateityp unterstützt wird. Wenn ein Browser den angegebenen Ressourcentyp nicht unterstützt, wird <link rel="preload"> ignoriert.

Sie können jeden Ressourcentyp auch über den Link-HTTP-Header vorab laden:

Link: </css/style.css>; rel="preload"; as="style"

Ein Vorteil der Angabe von preload im HTTP-Header besteht darin, dass der Browser das Dokument nicht parsen muss, um es zu erkennen. Dies kann in einigen Fällen kleine Verbesserungen bewirken.

JavaScript-Module mit webpack vorab laden

Wenn Sie einen Modul-Bundler verwenden, der Build-Dateien Ihrer Anwendung erstellt, müssen Sie prüfen, ob er die Einschleusung von Pre-Load-Tags unterstützt. Ab Version 4.6.0 von webpack wird das Vorabladen durch die Verwendung von magischen Kommentaren in import() unterstützt:

import(_/* webpackPreload: true */_ "CriticalChunk")

Wenn Sie eine ältere Version von webpack verwenden, verwenden Sie ein Drittanbieter-Plug-in wie preload-webpack-plugin.

Auswirkungen des Vorladens auf die Core Web Vitals

Das Vorabladen ist eine leistungsstarke Leistungsoptimierung, die sich auf die Ladegeschwindigkeit auswirkt. Solche Optimierungen können zu Änderungen der Core Web Vitals Ihrer Website führen. Es ist wichtig, diese zu kennen.

Largest Contentful Paint (LCP)

Das Vorabladen wirkt sich bei Schriftarten und Bildern stark auf den Largest Contentful Paint (LCP) aus, da sowohl Bilder als auch Textknoten LCP-Kandidaten sein können. Hero-Images und große Textläufe, die mithilfe von Webschriftarten gerendert werden, können von einem gut platzierten Hinweis zum Vorabladen erheblich profitieren und sollten verwendet werden, wenn die Möglichkeit besteht, diese wichtigen Inhaltselemente dem Nutzer schneller bereitzustellen.

Beim Vorladen und bei anderen Optimierungen ist jedoch Vorsicht geboten. Vermeiden Sie insbesondere das Vorladen zu vieler Ressourcen. Wenn zu viele Ressourcen priorisiert werden, ist effektiv keine davon priorisiert. Die Auswirkungen übermäßiger Hinweise zur Vorab-Ladezeit sind besonders schädlich für Nutzer in langsameren Netzwerken, in denen Bandbreitenkonflikte stärker zu spüren sind.

Konzentrieren Sie sich stattdessen auf einige hochwertige Ressourcen, von denen Sie wissen, dass sie von einem gut platzierten Preloading profitieren. Achten Sie beim Vorabladen von Schriftarten darauf, dass Sie Schriftarten im WOFF 2.0-Format bereitstellen, um die Ressourcenladezeit so weit wie möglich zu verkürzen. Da WOFF 2.0 ausgezeichnet von Browsern unterstützt wird, führt die Verwendung älterer Formate wie WOFF 1.0 oder TrueType (TTF) zu einer Verzögerung des LCP, wenn der LCP-Kandidat ein Textknoten ist.

Bei LCP und JavaScript sollten Sie darauf achten, dass Sie vollständiges Markup vom Server senden, damit der Preloader des Browsers ordnungsgemäß funktioniert. Wenn Sie eine Website bereitstellen, die zum Rendern von Markup vollständig auf JavaScript angewiesen ist und keine serverseitig gerenderte HTML senden kann, ist es von Vorteil, dort einzugreifen, wo der Browser-Preload-Scanner nicht kann, und Ressourcen vorab zu laden, die sonst erst nach dem Laden und Ausführen von JavaScript gefunden werden.

Cumulative Layout Shift (CLS)

Der Cumulative Layout Shift (CLS) ist ein besonders wichtiger Messwert für Webfonts. Er hat eine erhebliche Wechselwirkung mit Webfonts, bei denen die CSS-Eigenschaft font-display zum Verwalten des Ladens von Schriftarten verwendet wird. Ziehen Sie die folgenden Strategien in Betracht, um Layoutverschiebungen im Zusammenhang mit Webschriftarten zu minimieren:

  1. Schriftarten vorab laden und dabei den Standardwert block für font-display verwenden Das ist eine knifflige Balance. Das Blockieren der Anzeige von Schriftarten ohne Fallback kann als Problem für die Nutzerfreundlichkeit angesehen werden. Zum einen werden durch das Laden von Schriftarten mit font-display: block; Layoutänderungen aufgrund von Webschriften vermieden. Andererseits sollten diese Web-Schriftarten so schnell wie möglich geladen werden, wenn sie für die Nutzerfreundlichkeit entscheidend sind. Die Kombination eines Preloads mit font-display: block; kann ein akzeptabler Kompromiss sein.
  2. Schriftarten vorab laden und dabei den Wert fallback für font-display verwenden. fallback ist ein Kompromiss zwischen swap und block, da es eine extrem kurze Blockierungsdauer hat.
  3. Verwenden Sie den Wert optional für font-display ohne Vorabladen. Wenn eine Webschriftart für die Nutzererfahrung nicht entscheidend ist, aber dennoch zum Rendern einer großen Menge von Seitentext verwendet wird, sollten Sie den Wert optional in Betracht ziehen. Bei ungünstigen Bedingungen zeigt optional den Seitentext in einer Fallback-Schriftart an, während die Schriftart für die nächste Navigation im Hintergrund geladen wird. Das Endergebnis dieser Bedingungen ist eine verbesserte CLS, da Systemschriften sofort gerendert werden, während bei nachfolgenden Seitenladevorgängen die Schrift sofort ohne Layoutverschiebungen geladen wird.

Der CLS ist ein Messwert, der sich bei Webschriften nur schwer optimieren lässt. Wie immer sollten Sie im Lab experimentieren, aber anhand Ihrer Felddaten feststellen, ob Ihre Schriftladestrategien den CLS verbessern oder verschlechtern.

Interaction to Next Paint (INP)

Interaction to Next Paint ist ein Messwert, mit dem die Reaktionsfähigkeit auf Nutzereingaben gemessen wird. Da der Großteil der Interaktivität im Web auf JavaScript beruht, kann das Vorabladen von JavaScript, das wichtige Interaktionen ermöglicht, dazu beitragen, den INP-Wert einer Seite zu senken. Beachten Sie jedoch, dass das Vorladen zu viel JavaScript beim Starten unbeabsichtigte negative Folgen haben kann, wenn zu viele Ressourcen um die Bandbreite konkurrieren.

Achten Sie auch darauf, wie Sie den Code aufteilen. Die Codeaufteilung ist eine hervorragende Optimierung, um die Menge an JavaScript zu reduzieren, die beim Start geladen wird. Interaktionen können sich jedoch verzögern, wenn sie auf JavaScript angewiesen sind, das direkt zu Beginn der Interaktion geladen wird. Um dies zu kompensieren, müssen Sie die Absicht des Nutzers prüfen und vor der Interaktion ein Preloading für die erforderlichen JavaScript-Chunks einfügen. Ein Beispiel wäre das Vorladen von JavaScript, das zum Validieren des Inhalts eines Formulars erforderlich ist, wenn eines der Felder im Formular den Fokus hat.

Fazit

Um die Seitengeschwindigkeit zu verbessern, sollten Sie wichtige Ressourcen vorab laden, die vom Browser spät erkannt werden. Es wäre kontraproduktiv, alles vorab zu laden. Verwenden Sie preload daher sparsam und messen Sie die Auswirkungen in der Praxis.