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, parst seinen Inhalt und sendet separate Anfragen für alle referenzierten Ressourcen. Als Entwickler kennen Sie bereits alle Ressourcen, die Ihre Seite benötigt, und wissen, welche am wichtigsten sind. Mit diesem Wissen können Sie die kritischen Ressourcen im Voraus anfordern und den Ladevorgang beschleunigen. In diesem Beitrag erfahren Sie, wie Sie das mit <link rel="preload"> erreichen.

Funktionsweise des Vorabladens

Das Vorabladen eignet sich am besten für Ressourcen, die der Browser normalerweise erst spät entdeckt hat.

Screenshot des Chrome-Entwicklertools im Bereich „Netzwerk“.
In diesem Beispiel wird die Schriftart Pacifico im Stylesheet mit einer @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 sonst erkennen würde, da Sie sicher sind, dass sie für die aktuelle Seite wichtig ist.

Screenshot des Chrome-Entwicklertools im Bereich „Netzwerk“ nach Anwendung des Vorabladens.
In diesem Beispiel ist die Schriftart „Pacifico“ vorinstalliert, sodass der Download parallel zum Stylesheet erfolgt.

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

Lighthouse-Prüfung 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, sodass sie bei Bedarf sofort verfügbar sind. Es werden weder die Skripts ausgeführt noch die Stylesheets angewendet.

Ressourcenhinweise wie preconnect und prefetch werden nach Bedarf des Browsers ausgeführt. preload ist hingegen für den Browser obligatorisch. Moderne Browser können Ressourcen bereits ziemlich gut priorisieren. Deshalb ist es wichtig, preload sparsam zu verwenden und nur die wichtigsten Ressourcen vorab zu laden.

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

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

Anwendungsfälle

In CSS definierte Ressourcen vorab laden

Mit @font-face-Regeln definierte Schriftarten oder in CSS-Dateien definierte Hintergrundbilder werden erst erkannt, wenn der Browser diese CSS-Dateien herunterlädt und parst. Durch das Vorabladen dieser Ressourcen wird sichergestellt, dass sie abgerufen werden, bevor die CSS-Dateien heruntergeladen wurden.

CSS-Dateien werden vorab geladen

Wenn Sie den Ansatz für kritische CSS-Elemente verwenden, teilen Sie Ihr CSS in zwei Teile auf. Der wichtige CSS-Code, der zum Rendern der ohne Scrollen sichtbaren Inhalte erforderlich ist, ist im <head> des Dokuments enthalten. Nicht kritischer CSS-Code wird normalerweise mit JavaScript per Lazy Loading geladen. Wenn Nutzer auf die Ausführung von JavaScript warten, bevor kritischer CSS-Code geladen wird, kann es beim Scrollen zu Verzögerungen beim Rendering kommen. Verwenden Sie daher <link rel="preload">, um den Download früher zu starten.

JavaScript-Dateien werden vorab geladen

Da Browser keine vorab geladenen Dateien ausführen, ist das Vorabladen nützlich, um das Abrufen von der Ausführung zu trennen. Dadurch können Messwerte wie „Zeit bis Interaktivität“ verbessert werden. Das Vorabladen funktioniert am besten, wenn Sie Ihre JavaScript-Bundles aufteilen und nur kritische Blöcke vorab laden.

rel=preload implementieren

Die einfachste Möglichkeit, preload zu implementieren, besteht darin, ein <link>-Tag zum <head> des Dokuments 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 Ressourcentypen, etwa Schriftarten, werden im anonymen Modus geladen. Bei diesen müssen Sie das Attribut crossorigin mit preload festlegen:

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

<link>-Elemente akzeptieren auch ein type-Attribut, das den MIME-Typ der verknüpften Ressource enthält. Die Browser verwenden den Wert des Attributs type, damit 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 auch jeden Ressourcentyp ü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 bieten.

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 Injektion von Preload-Tags unterstützt. Ab webpack-Version 4.6.0 wird das Vorabladen durch magische Kommentare in import() unterstützt:

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

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

Auswirkungen des Vorabladens auf 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, die Sie unbedingt kennen sollten.

Largest Contentful Paint (LCP)

Das Vorabladen wirkt sich stark auf den Largest Contentful Paint (LCP) aus, wenn es um Schriftarten und Bilder geht, da sowohl Bilder als auch Textknoten LCP-Kandidaten sein können. Hero-Images und große, mit Webschriftarten gerenderte Texte, die mit Webschriftarten gerendert werden, können von einem gut platzierten Hinweis für das Vorabladen erheblich profitieren. Sie sollten verwendet werden, wenn die Möglichkeit besteht, dem Nutzer diese wichtigen Inhalte schneller bereitzustellen.

Beim Vorabladen und bei anderen Optimierungen solltest du aber vorsichtig sein. Vermeiden Sie insbesondere, zu viele Ressourcen vorab zu laden. Wenn zu viele Ressourcen priorisiert werden, dann effektiv keine. Die Auswirkungen übermäßiger Vorabladehinweise sind besonders bei langsameren Netzwerken nachteilig, wo Bandbreitenkonflikte deutlicher auftreten.

Konzentrieren Sie sich stattdessen auf ein paar hochwertige Ressourcen, von denen Sie wissen, dass sie von einem gut platzierten Vorabladevorgang profitieren werden. Stellen Sie beim Vorabladen von Schriftarten sicher, dass Sie Schriftarten im WOFF 2.0-Format bereitstellen, um die Ladezeit der Ressourcen so weit wie möglich zu reduzieren. Da WOFF 2.0 eine hervorragende Browserunterstützung hat, verzögert die Verwendung älterer Formate wie WOFF 1.0 oder TrueType (TTF) das LCP, wenn der LCP-Kandidaten ein Textknoten ist.

Bei LCP und JavaScript sollten Sie darauf achten, dass das vollständige Markup vom Server gesendet wird, damit der Preload-Scanner des Browsers ordnungsgemäß funktioniert. Wenn Sie eine Websitevariante bereitstellen, die das Markup vollständig auf JavaScript verlässt und Sie keinen vom Server gerenderten HTML-Code senden können, ist es vorteilhaft, dort einzusteigen, wo der Browser-Scanner zum Vorabladen nicht funktioniert, und Ressourcen vorab zu laden, die sonst nur sichtbar wären, wenn das Laden und Ausführen des JavaScript abgeschlossen ist.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) ist ein besonders wichtiger Messwert, wenn es um Webschriftarten geht. CLS spielt eine wichtige Rolle mit Webschriftarten, bei denen das Laden von Schriftarten mithilfe der font-display-CSS-Eigenschaft verwaltet wird. Sie können folgende Strategien in Betracht ziehen, um Layoutverschiebungen im Zusammenhang mit Webschriftarten so gering wie möglich zu halten:

  1. Schriftarten vorab laden und dabei den Standardwert von block für font-display verwenden. Das ist ein heikles Gleichgewicht. Das Blockieren der Anzeige von Schriftarten ohne Fallback kann als Problem mit der Nutzererfahrung betrachtet werden. Einerseits eliminiert das Laden von Schriftarten mit font-display: block; Schriftart-bezogene Layoutverschiebungen im Web. Andererseits möchten Sie, dass diese Web-Schriftarten so schnell wie möglich geladen werden, wenn sie für die Nutzererfahrung wichtig sind. Die Kombination einer Vorabladung mit font-display: block; kann ein akzeptabler Kompromiss sein.
  2. Schriftarten vorab laden und dabei den fallback-Wert für font-display verwenden. fallback ist ein Kompromiss zwischen swap und block, da er eine extrem kurze Blockierungsfrist hat.
  3. Verwende den Wert optional für font-display ohne Vorabladen. Falls eine Webschriftart für die Nutzererfahrung nicht entscheidend ist, aber dennoch zum Rendern einer erheblichen Menge an Seitentext verwendet wird, empfiehlt sich die Verwendung des optional-Werts. 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 ist unter diesen Bedingungen ein verbesserter CLS-Wert, da Systemschriftarten sofort gerendert werden, während beim nachfolgenden Laden der Seite die Schriftart ohne Layoutverschiebungen sofort geladen wird.

CLS ist bei Webschriftarten ein schwer zu optimierender Messwert. Experimentieren Sie wie immer im Lab, aber stellen Sie anhand Ihrer Felddaten fest, ob Ihre Strategien zum Laden von Schriftarten den CLS verbessern oder sie verschlimmern.

Interaction to Next Paint (INP)

Interaction to Next Paint ist ein Messwert, der die Reaktionsfähigkeit auf Nutzereingaben bewertet. Der überwiegende Anteil der Interaktivität im Web wird durch JavaScript gesteuert. Deshalb kann das Vorabladen von JavaScript, das wichtige Interaktionen ermöglicht, dazu beitragen, den INP einer Seite zu senken. Bedenken Sie jedoch, dass beim Start zu viel JavaScript vorab geladen werden kann, wenn zu viele Ressourcen Bandbreite benötigen, um unbeabsichtigte negative Folgen zu haben.

Außerdem sollten Sie die Codeaufteilung mit Bedacht anwenden. Die Codeaufteilung ist eine hervorragende Optimierung, um die Menge an JavaScript zu reduzieren, die während des Starts geladen wird. Interaktionen können jedoch verzögert sein, wenn sie auf JavaScript basieren, das direkt zu Beginn der Interaktion geladen wird. Um dies zu kompensieren, müssen Sie die Absicht des Nutzers untersuchen und eine Vorabladung für die erforderlichen JavaScript-Chunks einfügen, bevor die Interaktion stattfindet. Ein Beispiel könnte das Vorabladen von JavaScript sein, das zur Validierung der Formularinhalte erforderlich ist, wenn eines der Felder im Formular hervorgehoben ist.

Fazit

Um die Seitengeschwindigkeit zu verbessern, sollten Sie wichtige Ressourcen, die der Browser erst spät erkannt hat, vorab laden. Alles vorab zu laden wäre kontraproduktiv. Setzen Sie daher preload sparsam ein und messen Sie die Auswirkungen in der realen Welt.