Was ist Link rel preload?
Definition und Zweck
link rel preload ist ein HTML-Attribut, das Anweisungen an den Browser sendet, bestimmte Ressourcen im Voraus zu laden, bevor sie vom Hauptdokument angefordert werden. Dadurch können Browser diese Ressourcen früher abrufen und bereitstellen, was die wahrgenommene Ladegeschwindigkeit deiner Website verbessert.
Wie funktioniert Link rel preload?
Wenn du link rel preload zu einem Ressourcenlink hinzufügst, weist du den Browser an, dass diese Ressource bald benötigt wird. Der Browser lädt und verarbeitet die Ressource dann im Hintergrund, bevor sie im Dokument gerendert werden muss. Dadurch wird die Zeit, die Besucher mit dem Warten auf das Laden von Inhalten verbringen, reduziert.
Vorteile der Verwendung von Link rel preload
- Erhöhte Ladegeschwindigkeit: Ressourcen werden im Voraus geladen, wodurch die Ladezeiten verkürzt werden.
- Verbesserte Benutzererfahrung: Besucher erleben schnellere Ladezeiten und eine reibungslosere Navigation.
- Geringere Serverlast: Da Ressourcen im Voraus geladen werden, wird die Last auf deine Server reduziert.
-
Unterstützung für moderne Browser:
link rel preloadwird von den meisten modernen Browsern unterstützt.
Vorteile der Verwendung von Link rel preload
Link rel preload ist eine wertvolle Technik zur Steigerung der Ladegeschwindigkeit deiner Website. Hier sind einige wichtige Vorteile, die du nutzen kannst:
Reduzierte Ladezeiten für kritische Ressourcen
Wenn du Link rel preload verwendest, zwingst du den Browser, wichtige Ressourcen wie Bilder, Skripte und Stylesheets sofort zu laden, auch wenn die Ressourcen noch nicht benötigt werden. Durch das Vorladen dieser Ressourcen vermeidest du Verzögerungen, wenn sie schließlich benötigt werden, was die gesamten Ladezeiten deiner Website verkürzt.
Verbesserte Benutzererfahrung
Schnellere Ladezeiten führen zu einer verbesserten Benutzererfahrung. Wenn deine Website schnell lädt, sind deine Besucher eher dazu geneigt, zu bleiben, sich zu engagieren und zu konvertieren. Eine bessere Benutzererfahrung kann sich positiv auf deine Geschäftsergebnisse auswirken.
Höhere Rankings in Suchmaschinen
Suchmaschinen wie Google bevorzugen Websites mit kurzen Ladezeiten. Indem du Link rel preload verwendest, kannst du die Ladezeiten deiner Website reduzieren und deine Rankings in den Suchergebnissen verbessern.
Reduzierter Datenverbrauch
Vorab geladene Ressourcen werden zwischengespeichert, so dass sie beim erneuten Besuch deiner Website nicht erneut heruntergeladen werden müssen. Dies kann den Datenverbrauch für deine Benutzer verringern, was besonders bei mobilen Geräten wichtig ist.
Unterstützung für moderne Browser
Link rel preload wird von den meisten modernen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Dies stellt sicher, dass die Vorteile von Link rel preload für die Mehrheit deiner Benutzer verfügbar sind.
So verwenden Sie Link rel preload
Um Link rel preload zu verwenden, musst du Folgendes tun:
Fügen Sie das Link-Element hinzu
Füge ein <link>-Element zum <head>-Bereich deiner HTML-Datei hinzu. Das rel-Attribut sollte auf "preload" und das as-Attribut auf den Typ der Ressource festgelegt werden, die du vorab laden möchtest. Beispielsweise, um die Datei style.css vorab zu laden, würdest du Folgendes hinzufügen:
<link rel="preload" as="style" href="style.css">
Legen Sie den Medientyp fest (optional)
Wenn du einen bestimmten Medientyp für die vorab geladene Ressource angeben möchtest, kannst du das media-Attribut verwenden. Beispielsweise, um die Datei style.css nur auf großen Bildschirmen vorab zu laden, würdest du Folgendes hinzufügen:
<link rel="preload" as="style" href="style.css" media="screen and (min-width: 1024px)">
Setzen Sie die Priorität (optional)
Du kannst die Priorität der vorab geladenen Ressource mit dem crossorigin-Attribut festlegen. Standardmäßig ist die Priorität "auto", was bedeutet, dass der Browser die Ressource nach Bedarf vorab lädt. Du kannst jedoch "high" festlegen, um dem Browser anzuzeigen, dass er die Ressource so schnell wie möglich vorab laden soll:
<link rel="preload" as="style" href="style.css" crossorigin="high">
Setzen Sie die Integrität (optional)
Du kannst die Integrität der vorab geladenen Ressource mit dem integrity-Attribut festlegen. Dies ist hilfreich, um sicherzustellen, dass die Ressource von einem vertrauenswürdigen Server stammt:
<link rel="preload" as="style" href="style.css" integrity="sha256-1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ">
Kompatibilität mit Browsern
Link rel preload wird von einer Vielzahl moderner Browser weitgehend unterstützt. Die folgenden Browserversionen unterstützen Link rel preload:
Google Chrome
- Chrome 49+
Mozilla Firefox
- Firefox 45+
Apple Safari
- Safari 10.1+
Microsoft Edge
- Edge 16+
Andere Browser
- Opera 36+
- Samsung Internet 4.0+
Hinweis: Die Unterstützung für Link rel preload kann sich je nach Betriebssystem und Gerätetyp ändern. Es wird empfohlen, die neuesten Versionen der oben aufgeführten Browser zu verwenden, um die beste Kompatibilität sicherzustellen.
Best Practices für Link rel preload
Um das volle Potenzial von Link rel preload auszuschöpfen, befolge die folgenden Best Practices:
Priorisierung wichtiger Ressourcen
Priorisieren Sie die Vorabladung der Ressourcen, die für das erste Rendern Ihrer Seite am wichtigsten sind. Dies sind in der Regel kritische CSS-Dateien, JavaScript-Dateien und Schriftarten.
Vermeidung blockierender Ressourcen
Laden Sie keine blockierenden Ressourcen mit Link rel preload. Blockierende Ressourcen verhindern das Rendern der Seite, bis sie geladen sind. Erwägen Sie stattdessen die Verwendung von asynchronem Laden für solche Ressourcen.
Begrenzung der Anzahl der vorabgeladenen Ressourcen
Die gleichzeitige Vorabladung einer großen Anzahl von Ressourcen kann den Browser überlasten und zu Leistungsproblemen führen. Begrenzen Sie die Anzahl der vorabgeladenen Ressourcen auf 3-5 und konzentrieren Sie sich auf die kritischsten Ressourcen.
Verwendung des as- Attributs
Das as- Attribut teilt dem Browser den erwarteten Ressourcentyp mit. Dies kann dem Browser helfen, die Ressource effektiver vorabzuladen.
Aktivieren der Caching-Header
Setzen Sie geeignete Caching-Header für vorabgeladene Ressourcen. Dies kann verhindern, dass der Browser dieselben Ressourcen wiederholt anfordert und verbessert die Leistung.
Überwachung der Leistung
Überwachen Sie die Leistung Ihrer Website nach der Implementierung von Link rel preload. Verwenden Sie Tools wie Google PageSpeed Insights oder GTmetrix, um die Auswirkungen auf die Ladezeiten zu messen.
Verwendung von rel="preload" für Schriftarten
Verwenden Sie rel="preload" für die Vorabladung von Schriftarten. Dies kann die Ladezeit von Textinhalten erheblich verbessern.
Fehlersuche bei Link rel preload
Sollte deine Website nach der Implementierung von Link rel preload nicht wie erwartet laden, kannst du die folgenden Schritte zur Fehlersuche unternehmen:
Überprüfe die Syntax
Stelle sicher, dass du den Link rel preload korrekt formatiert hast. Die Syntax lautet:
<link rel="preload" href="Pfad/zur/Ressource" as="Typ">
Dabei sollte "Pfad/zur/Ressource" durch den Pfad zur vorzuladenden Ressource und "Typ" durch den entsprechenden Ressourcentyp (z. B. "image" oder "script") ersetzt werden.
Überprüfe die Kompatibilität des Browsers
Link rel preload wird von den meisten modernen Browsern unterstützt, es gibt jedoch einige Ausnahmen. Überprüfe die Kompatibilitätstabelle in der offiziellen Link rel preload-Dokumentation, um sicherzustellen, dass der von dir verwendete Browser unterstützt wird.
Aktiviere die Konsolenprotokollierung
Aktiviere die Konsolenprotokollierung in deinem Browser, um mögliche Fehlermeldungen im Zusammenhang mit Link rel preload anzuzeigen. Dies kann dir dabei helfen, Probleme mit der Ressourceneinbindung oder Kompatibilitätsprobleme zu identifizieren.
Überprüfe die Netzwerkaktivität
Verwende die Netzwerkaktivitätsfunktion in deinem Browser (z. B. die Registerkarte "Netzwerk" in Chrome DevTools), um die Ladezeiten und Fehler im Zusammenhang mit vorabgeladenen Ressourcen zu überprüfen. Dies kann dir dabei helfen, Engpässe zu identifizieren und Probleme mit der Serverkonfiguration auszuschließen.
Teste mit verschiedenen Ressourcen
Teste mit verschiedenen Ressourcentypen (z. B. Bildern, Skripten und Stylesheets), um sicherzustellen, dass Link rel preload für alle gewünschten Ressourcen effektiv funktioniert.
Verwende einen Testdienst
Du kannst einen Testdienst wie Website Performance Audit von Google verwenden, um die Leistung deiner Website zu analysieren und mögliche Probleme mit Link rel preload zu identifizieren.
Weitere Ressourcen
Auswirkungen von Link rel preload auf die Web-Performance
Link rel preload kann erhebliche Auswirkungen auf die Web-Performance haben. Indem du wichtige Ressourcen vorab lädst, kannst du Folgendes erreichen:
Verbesserte Ladezeiten
Das Vorabladen von Ressourcen reduziert die Wartezeit des Browsers auf das Herunterladen dieser Ressourcen, wodurch die wahrgenommene Ladezeit für die Benutzer verkürzt wird. Du kannst den PageSpeed Insights-Bericht von Google verwenden, um die Auswirkungen von Link rel preload auf die Ladezeit deiner Website zu messen.
Geringerer Ressourcenverbrauch
Durch das Vorabladen von Ressourcen kann der Browser diese im Hintergrund herunterladen, ohne die Darstellung der Seite zu blockieren. Dies führt zu einem geringeren Ressourcenverbrauch und einer verbesserten Reaktionsfähigkeit der Website.
Verbesserte Benutzererfahrung
Eine schnellere Ladezeit und Reaktionsfähigkeit verbessern die Benutzererfahrung auf deiner Website erheblich. Benutzer neigen dazu, länger auf Websites zu bleiben und mehr zu interagieren, wenn sie schnell geladen werden und reibungslos funktionieren.
Reduzierte Absprungraten
Langsame Ladezeiten können zu erhöhten Absprungraten führen, da Benutzer dazu neigen, Websites zu verlassen, die nicht schnell genug geladen werden. Link rel preload kann Absprungraten reduzieren, indem die Ladezeit verkürzt und die Benutzererfahrung verbessert wird.
Höhere Konversionsraten
Eine bessere Benutzererfahrung führt häufig zu höheren Konversionsraten. Indem du Link rel preload implementierst, kannst du die Konversionsraten deiner Website verbessern, indem du eine schnellere und reibungslosere Erfahrung für deine Benutzer schaffst.
Alternativen zu Link rel preload
Während Link rel preload eine effektive Methode zur Priorisierung von Ressourcen ist, gibt es auch alternative Ansätze, um die Ladegeschwindigkeit deiner Website zu verbessern.
Prärendering
Prärendering rendert die erste Seite eines Dokuments im Hintergrund, bevor du auf sie zugreifst. Dies führt dazu, dass die Seite beim Laden schneller erscheint. Tools wie Prerender.io und CloudFlare Rocket Loader können für das Prärendering verwendet werden.
Prefetching
Prefetching lädt Ressourcen in den Hintergrund, während du auf einer Seite bist, sodass sie schneller verfügbar sind, wenn du sie benötigst. Im Gegensatz zum Preloaden ist das Prefetching nicht unbedingt auf die erste Seite beschränkt. Es kann mit dem Link rel="prefetch"-Attribut oder der fetch()-API implementiert werden.
HTTP/2 Multiplexing
HTTP/2 ist eine Version des HTTP-Protokolls, die Multiplexing unterstützt. Dies ermöglicht es, mehrere Anfragen und Antworten gleichzeitig über eine einzelne Verbindung zu senden, wodurch die Latenzzeit verringert wird.
CDN (Content Delivery Network)
Ein CDN speichert Kopien deiner Website an verschiedenen Standorten auf der ganzen Welt. Wenn ein Benutzer auf deine Website zugreift, wird die Kopie von dem nächstgelegenen Standort geladen, was die Ladezeiten verbessert. Zu den beliebten CDN-Anbietern gehören Cloudflare, Fastly und Amazon CloudFront.
Bildoptimierung
Bilder machen oft einen großen Teil der Größe einer Webseite aus. Durch die Optimierung von Bildern in Bezug auf Dateigröße und -format kann die Ladegeschwindigkeit erheblich verbessert werden. Tools wie TinyPNG, ImageOptim und Adobe Photoshop können für die Bildoptimierung verwendet werden.