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 davon am wichtigsten sind. So können Sie die kritischen Ressourcen vorab anfordern und den Ladevorgang beschleunigen. In diesem Beitrag wird erläutert, 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.
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.
Die kritische Anfragekette 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.
Sie können Ressourcen vorab laden, indem Sie dem Head Ihres HTML-Dokuments ein <link>
-Tag mit rel="preload"
hinzufü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 priorisieren Ressourcen bereits ziemlich gut. Daher ist es wichtig, preload
sparsam zu verwenden und nur die wichtigsten Ressourcen vorab zu laden.
Nicht verwendete Vorab-Ladevorgänge lösen ungefähr drei Sekunden nach dem load
-Ereignis eine Warnung in der Chrome-Konsole aus.
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 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-loaded. Wenn Sie warten, bis JavaScript ausgeführt wird, bevor nicht kritisches CSS geladen wird, kann das beim Scrollen zu Verzögerungen beim Rendern führen. 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>
Wenn Sie das Attribut as
angeben, kann der Browser die Priorität der vorab abgerufenen Ressource entsprechend ihrem Typ festlegen, die richtigen Header festlegen und ermitteln, 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 auch jede Art von Ressource ü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 finden. Dies kann in einigen Fällen zu kleinen Verbesserungen führen.
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. Mit webpack Version 4.6.0 oder höher wird das Vorladen durch Magische Kommentare 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 Optimierung, die sich auf die Ladegeschwindigkeit auswirkt. Solche Optimierungen können zu Änderungen bei den Core Web Vitals Ihrer Website führen.
Largest Contentful Paint (LCP)
Das Vorladen hat einen großen Einfluss auf den Largest Contentful Paint (LCP) bei Schriftarten und Bildern, da sowohl Bilder als auch Textknoten LCP-Kandidaten sein können. Hero-Bilder und große Textblöcke, die mit Webschriften gerendert werden, können von einem gut platzierten Preload-Hinweis erheblich profitieren. Sie sollten verwendet werden, wenn es Möglichkeiten gibt, diese wichtigen Inhalte schneller an den Nutzer zu liefern.
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. Mit den folgenden Strategien können Sie Layoutänderungen aufgrund von Webschriften minimieren:
- Schriftarten vorab laden und dabei den Standardwert
block
fürfont-display
verwenden Das ist ein heikles Gleichgewicht. 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 mitfont-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 mitfont-display: block;
kann ein akzeptabler Kompromiss sein. - Schriftarten vorab laden und dabei den Wert
fallback
fürfont-display
verwenden.fallback
ist ein Kompromiss zwischenswap
undblock
, da es eine extrem kurze Blockierungsdauer hat. - Verwenden Sie den
optional
-Wert fürfont-display
ohne Vorabdaten. Wenn eine Webschrift für die Nutzerfreundlichkeit nicht entscheidend ist, aber dennoch zum Rendern eines erheblichen Teils des Seitentexts verwendet wird, sollten Sie den Wertoptional
verwenden. Bei ungünstigen Bedingungen zeigtoptional
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 über JavaScript gesteuert wird, kann das Vorladen von JavaScript, das für wichtige Interaktionen verantwortlich ist, dazu beitragen, den INP einer Seite niedrig zu halten. 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 Pre-Load 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
Laden Sie wichtige Ressourcen, die vom Browser erst spät erkannt werden, vorab. Es wäre kontraproduktiv, alles vorab zu laden. Verwenden Sie preload
daher sparsam und messen Sie die Auswirkungen in der Praxis.