Website-Geschwindigkeit steigern mit Ressourcen-Hints: Preload, Prefetch und Preconnect

In der heutigen schnelllebigen digitalen Welt ist die Website-Geschwindigkeit von größter Bedeutung. Benutzer erwarten, dass Websites schnell geladen werden und sofort reagieren. Lange Ladezeiten können zu einer schlechten Benutzererfahrung, höheren Absprungraten und letztendlich zu Umsatzeinbußen führen. Ressourcen-Hints sind leistungsstarke Tools, die Entwicklern helfen können, die Ladezeiten von Websites zu optimieren, indem sie dem Browser mitteilen, welche Ressourcen wichtig sind und wie sie priorisiert werden sollen. Dieser Artikel untersucht drei wichtige Ressourcen-Hints: preload, prefetch und preconnect, und liefert praktische Beispiele für deren Implementierung.

Ressourcen-Hints verstehen

Ressourcen-Hints sind Anweisungen, die den Browser über die Ressourcen informieren, die eine Webseite in Zukunft benötigen wird. Sie ermöglichen es Entwicklern, den Browser proaktiv über kritische Ressourcen zu informieren, wodurch er diese früher abrufen oder sich mit ihnen verbinden kann, als dies sonst der Fall wäre. Dies kann die Ladezeiten erheblich verkürzen und die wahrgenommene Leistung verbessern.

Die drei primären Ressourcen-Hints sind:

Preload: Ruft kritische Ressourcen ab, die für das anfängliche Laden der Seite benötigt werden.
Prefetch: Ruft Ressourcen ab, die wahrscheinlich für zukünftige Navigationen oder Interaktionen benötigt werden.
Preconnect: Stellt frühzeitig Verbindungen zu wichtigen Drittanbieter-Servern her.

Preload: Kritische Ressourcen priorisieren

Was ist Preload?

Preload ist ein deklarativer Abruf, der es Ihnen ermöglicht, dem Browser mitzuteilen, eine für die aktuelle Navigation benötigte Ressource so früh wie möglich abzurufen. Dies ist besonders nützlich für Ressourcen, die vom Browser spät entdeckt werden, wie Bilder, Schriftarten, Skripte oder Stylesheets, die über CSS oder JavaScript geladen werden. Durch das Vorladen dieser Ressourcen können Sie verhindern, dass sie das Rendering blockieren, und die wahrgenommene Ladegeschwindigkeit Ihrer Website verbessern.

Wann Preload verwenden?

Verwenden Sie preload für:

Schriftarten: Das frühe Laden benutzerdefinierter Schriftarten kann "Flash of Unstyled Text" (FOUT) oder "Flash of Invisible Text" (FOIT) verhindern.
Bilder: Die Priorisierung von Above-the-Fold-Bildern stellt sicher, dass sie schnell geladen werden, was die anfängliche Benutzererfahrung verbessert.
Skripte und Stylesheets: Das frühe Laden kritischer CSS- oder JavaScript-Dateien verhindert Rendering-Blockaden.
Module und Web Worker: Das Vorladen von Modulen oder Web Workern kann die Reaktionsfähigkeit Ihrer Anwendung verbessern.

Wie Preload implementiert wird

Sie können preload mithilfe des <link>-Tags im <head> Ihres HTML-Dokuments implementieren:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Erläuterung:

rel="preload": Gibt an, dass der Browser die Ressource vorladen soll.
href="/path/to/resource": Die URL der vorzuladenden Ressource.
as="type": Gibt den Typ der vorzuladenden Ressource an (z.B. Schriftart, Stil, Skript, Bild). Das Attribut `as` ist obligatorisch und entscheidend dafür, dass der Browser die Ressource korrekt priorisiert und behandelt. Die Verwendung des korrekten `as`-Werts stellt sicher, dass der Browser die richtige Content Security Policy (CSP) anwendet und den korrekten Accept-Header sendet.
type="mime/type": (Optional, aber empfohlen) Gibt den MIME-Typ der Ressource an. Dies hilft dem Browser, das richtige Ressourcenformat auszuwählen, insbesondere für Schriftarten.
crossorigin="anonymous": (Erforderlich für Schriftarten, die von einem anderen Ursprung geladen werden) Gibt den CORS-Modus für die Anfrage an. Wenn Sie Schriftarten von einem CDN laden, benötigen Sie dieses Attribut wahrscheinlich.

Beispiel: Eine Schriftart vorladen

Stellen Sie sich vor, Sie verwenden eine benutzerdefinierte Schriftart namens 'OpenSans' auf Ihrer Website. Ohne Preload würde der Browser diese Schriftart erst nach dem Parsen der CSS-Datei entdecken. Dies kann zu einer Verzögerung beim Rendern des Textes mit der korrekten Schriftart führen. Durch das Vorladen der Schriftart können Sie diese Verzögerung eliminieren.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Beispiel: Eine kritische CSS-Datei vorladen

Wenn Ihre Website eine kritische CSS-Datei enthält, die für das Rendern der anfänglichen Ansicht unerlässlich ist, kann das Vorladen die wahrgenommene Leistung erheblich verbessern.

<link rel="preload" href="/styles/critical.css" as="style">

Best Practices für Preload

Kritische Ressourcen priorisieren: Laden Sie nur Ressourcen vor, die für den anfänglichen Seitenaufbau unerlässlich sind. Eine übermäßige Verwendung von Preload kann die Leistung negativ beeinflussen.
Das korrekte as-Attribut verwenden: Geben Sie immer das korrekte as-Attribut an, um sicherzustellen, dass der Browser die Ressource richtig verarbeitet.
Das type-Attribut einschließen: Fügen Sie das type-Attribut ein, um dem Browser bei der Auswahl des korrekten Ressourcenformats zu helfen.
crossorigin für Cross-Origin-Schriftarten verwenden: Wenn Sie Schriftarten von einem anderen Ursprung laden, stellen Sie sicher, dass Sie das crossorigin-Attribut einfügen.
Leistung testen: Testen Sie immer die Auswirkungen von Preload auf die Leistung, um sicherzustellen, dass es tatsächlich die Ladezeiten verbessert. Verwenden Sie Tools wie Google PageSpeed Insights oder WebPageTest, um die Auswirkungen zu messen.

Prefetch: Zukünftige Anforderungen antizipieren

Was ist Prefetch?

Prefetch ist ein Ressourcen-Hint, der den Browser anweist, Ressourcen abzurufen, die wahrscheinlich für zukünftige Navigationen oder Interaktionen benötigt werden. Im Gegensatz zu preload, das sich auf Ressourcen für die aktuelle Seite konzentriert, antizipiert prefetch den nächsten Schritt des Benutzers. Dies ist besonders nützlich, um die Ladegeschwindigkeit nachfolgender Seiten oder Komponenten zu verbessern.

Wann Prefetch verwenden?

Verwenden Sie prefetch für:

Ressourcen für die nächste Seite: Wenn Sie wissen, dass der Benutzer wahrscheinlich als Nächstes zu einer bestimmten Seite navigieren wird, laden Sie deren Ressourcen vor (prefetch).
Ressourcen für Benutzerinteraktionen: Wenn eine Benutzerinteraktion das Laden spezifischer Ressourcen auslöst (z.B. ein Modalfenster, ein Formular), laden Sie diese Ressourcen vor.
Bilder und Assets auf anderen Seiten: Laden Sie Bilder oder Assets, die auf anderen Seiten verwendet werden, die der Benutzer wahrscheinlich besuchen wird, vor.

Wie Prefetch implementiert wird

Sie können prefetch mithilfe des <link>-Tags im <head> Ihres HTML-Dokuments implementieren:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Erläuterung:

rel="prefetch": Gibt an, dass der Browser die Ressource vorab laden soll.
href="/path/to/resource": Die URL der vorab zu ladenden Ressource.

Beispiel: Ressourcen der nächsten Seite vorab laden

Wenn Ihre Website einen klaren Benutzerfluss hat, wie z.B. ein mehrstufiges Formular, können Sie die Ressourcen für den nächsten Schritt vorab laden (prefetch), während sich der Benutzer im aktuellen Schritt befindet.

<link rel="prefetch" href="/form/step2.html">

Beispiel: Ressourcen für ein Modalfenster vorab laden

Wenn Ihre Website ein Modalfenster verwendet, das beim Öffnen zusätzliche Ressourcen lädt, können Sie diese Ressourcen vorab laden, um eine reibungslose Benutzererfahrung zu gewährleisten.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Best Practices für Prefetch

Sparsam verwenden: Prefetch sollte sparsam eingesetzt werden, da es Bandbreite und Ressourcen verbrauchen kann, auch wenn der Benutzer die vorab geladenen Ressourcen nicht benötigt.
Wahrscheinliche Navigationen priorisieren: Laden Sie Ressourcen für Seiten oder Interaktionen vorab, die am wahrscheinlichsten eintreten werden.
Netzwerkbedingungen berücksichtigen: Prefetch eignet sich am besten für Benutzer mit stabilen und schnellen Internetverbindungen. Vermeiden Sie das Vorladen großer Ressourcen für Benutzer mit langsamen oder getakteten Verbindungen. Sie können die Network Information API verwenden, um den Verbindungstyp des Benutzers zu erkennen und das Prefetching entsprechend anzupassen.
Leistung überwachen: Überwachen Sie die Auswirkungen von Prefetch auf die Leistung Ihrer Website, um sicherzustellen, dass es einen Netto-Nutzen bietet.
Dynamisches Prefetching nutzen: Implementieren Sie Prefetching dynamisch basierend auf Benutzerverhalten und Analysedaten. Laden Sie beispielsweise Ressourcen für Seiten vorab, die häufig von Benutzern besucht werden, die sich gerade auf der aktuellen Seite befinden.

Preconnect: Frühzeitige Verbindungen herstellen

Was ist Preconnect?

Preconnect ist ein Ressourcen-Hint, der es Ihnen ermöglicht, frühzeitig Verbindungen zu wichtigen Drittanbieter-Servern herzustellen. Der Aufbau einer Verbindung umfasst mehrere Schritte, darunter DNS-Lookup, TCP-Handshake und TLS-Verhandlung. Diese Schritte können die Ladezeit von Ressourcen von diesen Servern erheblich verzögern. Preconnect ermöglicht es Ihnen, diese Schritte im Hintergrund zu initiieren, sodass die Verbindung bereits hergestellt ist, wenn der Browser eine Ressource vom Server abrufen muss.

Wann Preconnect verwenden?

Verwenden Sie preconnect für:

Drittanbieter-Server: Server, die Schriftarten, CDNs, APIs oder andere Ressourcen hosten, auf die sich Ihre Website verlässt.
Häufig genutzte Server: Server, die von Ihrer Website häufig aufgerufen werden.

Wie Preconnect implementiert wird

Sie können preconnect mithilfe des <link>-Tags im <head> Ihres HTML-Dokuments implementieren:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

Erläuterung:

rel="preconnect": Gibt an, dass der Browser sich mit dem Server vorverbinden soll.
href="https://example.com": Die URL des Servers, zu dem die Vorverbindung hergestellt werden soll.
crossorigin: (Optional, aber erforderlich für Ressourcen, die mit CORS geladen werden) Gibt an, dass die Verbindung CORS erfordert.

Beispiel: Vorverbindung zu Google Fonts

Wenn Ihre Website Google Fonts verwendet, kann eine Vorverbindung zu https://fonts.gstatic.com die Latenz beim Laden der Schriftarten erheblich reduzieren.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Das Attribut `crossorigin` ist hier entscheidend, da Google Fonts CORS verwendet, um die Schriftarten bereitzustellen.

Beispiel: Vorverbindung zu einem CDN

Wenn Ihre Website ein CDN verwendet, um statische Assets bereitzustellen, kann eine Vorverbindung zum Hostnamen des CDN die Latenz beim Laden dieser Assets reduzieren.

<link rel="preconnect" href="https://cdn.example.com">

Best Practices für Preconnect

Besonnen einsetzen: Eine Vorverbindung zu zu vielen Servern kann die Leistung tatsächlich beeinträchtigen, da der Browser nur begrenzte Ressourcen für den Verbindungsaufbau hat.
Wichtige Server priorisieren: Stellen Sie eine Vorverbindung zu den Servern her, die für die Leistung Ihrer Website am kritischsten sind.
DNS-Prefetch in Betracht ziehen: Für Server, zu denen Sie keine vollständige Vorverbindung benötigen, aber den DNS-Lookup frühzeitig auflösen möchten, sollten Sie <link rel="dns-prefetch" href="https://example.com"> verwenden. DNS-Prefetch führt nur den DNS-Lookup durch, was weniger ressourcenintensiv ist als eine vollständige Vorverbindung.
Leistung testen: Testen Sie immer die Auswirkungen von Preconnect auf die Leistung, um sicherzustellen, dass es einen Netto-Nutzen bietet.
Mit anderen Ressourcen-Hints kombinieren: Verwenden Sie Preconnect in Verbindung mit Preload und Prefetch, um eine optimale Leistung zu erzielen. Stellen Sie beispielsweise eine Vorverbindung zum Server her, der Ihre Schriftarten hostet, und laden Sie dann die Schriftartdateien vorab.

Ressourcen-Hints für optimale Leistung kombinieren

Die wahre Stärke von Ressourcen-Hints liegt in ihrer strategischen Kombination. Hier ist ein praktisches Beispiel:

Stellen Sie sich eine Website vor, die eine benutzerdefinierte Schriftart verwendet, die auf einem CDN gehostet wird, und eine kritische JavaScript-Datei lädt.

Vorverbindung zum CDN: Stellen Sie eine frühzeitige Verbindung zum CDN her, das die Schriftart und die JavaScript-Datei hostet.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Schriftart vorladen: Priorisieren Sie das Laden der Schriftart, um FOUT zu verhindern.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

JavaScript-Datei vorladen: Priorisieren Sie das Laden der JavaScript-Datei, um sicherzustellen, dass sie bei Bedarf verfügbar ist.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Tools zur Analyse von Ressourcen-Hints

Mehrere Tools können Ihnen helfen, die Effektivität Ihrer Ressourcen-Hints zu analysieren:

Google PageSpeed Insights: Bietet Empfehlungen zur Optimierung der Leistung Ihrer Website, einschließlich der Verwendung von Ressourcen-Hints.
WebPageTest: Ermöglicht es Ihnen, die Leistung Ihrer Website von verschiedenen Standorten und unter verschiedenen Netzwerkbedingungen zu testen.
Chrome DevTools: Das Netzwerk-Panel in Chrome DevTools zeigt das Timing des Ressourcenladens und kann Ihnen helfen, Optimierungsmöglichkeiten zu identifizieren.
Lighthouse: Ein automatisiertes Tool zur Verbesserung der Qualität von Webseiten. Es verfügt über Audits für Leistung, Zugänglichkeit, Progressive Web Apps, SEO und mehr.

Häufige Fallstricke und wie man sie vermeidet

Übermäßige Verwendung von Ressourcen-Hints: Zu viele Ressourcen-Hints können die Leistung negativ beeinflussen. Konzentrieren Sie sich auf die kritischsten Ressourcen.
Falsches as-Attribut: Die Verwendung des falschen as-Attributs für Preload kann dazu führen, dass die Ressource nicht korrekt geladen wird.
CORS ignorieren: Das Nicht-Einbeziehen des crossorigin-Attributs beim Laden von Ressourcen von einem anderen Ursprung kann Ladefehler verursachen.
Leistung nicht testen: Testen Sie immer die Auswirkungen von Ressourcen-Hints auf die Leistung, um sicherzustellen, dass sie einen Netto-Nutzen bieten.
Falsche Pfade: Überprüfen Sie zweimal und stellen Sie sicher, dass alle für die Ressourcen-Hints angegebenen Dateipfade und URLs korrekt sind, da es sonst zu einem Fehler kommt.

Die Zukunft der Ressourcen-Hints

Ressourcen-Hints entwickeln sich ständig weiter, wobei neue Funktionen und Verbesserungen zu den Browser-Spezifikationen hinzugefügt werden. Wenn Sie über die neuesten Entwicklungen bei Ressourcen-Hints auf dem Laufenden bleiben, können Sie die Leistung Ihrer Website weiter optimieren. Zum Beispiel ist modulepreload ein neuerer Ressourcen-Hint, der speziell für das Vorladen von JavaScript-Modulen entwickelt wurde. Außerdem ermöglicht das Attribut `priority` für Ressourcen-Hints, die Priorität einer Ressource relativ zu anderen Ressourcen anzugeben. Die Browser-Unterstützung für diese Funktionen entwickelt sich noch, daher prüfen Sie die Kompatibilität, bevor Sie sie implementieren.

Fazit

Ressourcen-Hints sind leistungsstarke Tools zur Optimierung der Ladezeiten von Websites und zur Verbesserung der Benutzererfahrung. Durch den strategischen Einsatz von preload, prefetch und preconnect können Sie den Browser proaktiv über kritische Ressourcen informieren, die Latenz reduzieren und die wahrgenommene Leistung Ihrer Website steigern. Denken Sie daran, kritische Ressourcen zu priorisieren, Ressourcen-Hints mit Bedacht einzusetzen und immer die Auswirkungen Ihrer Änderungen auf die Leistung zu testen. Indem Sie die in diesem Artikel beschriebenen Best Practices befolgen, können Sie die Leistung Ihrer Website erheblich verbessern und Ihren Benutzern weltweit ein besseres Erlebnis bieten.