Preload, Preconnect, Prefetch: Verbessern Sie die Leistung Ihrer Website mit Ressourcenhinweisen

Moderne Webbrowser verwenden alle möglichen Techniken, um die Gesamtleistung Ihrer Website zu verbessern – von der Priorisierung der wichtigsten Ressourcen und deren Abruf zuerst bis hin zum Erraten, welche Seite der Benutzer als nächstes besuchen wird.

Sie sollten sich jedoch nicht darauf verlassen, dass Browser, so fortschrittlich sie auch sein mögen, alle Entscheidungen über die Leistung Ihrer Website treffen.

Als Websitebesitzer sind Sie derjenige, der weiß, welche Ressourcen am wichtigsten sind und wie die tatsächliche Benutzerreise auf Ihrer Website aussieht. Und um die Gesamtleistung, wahrgenommene Geschwindigkeit und Benutzererfahrung Ihrer Website zu verbessern, könnten Sie dieses Wissen nutzen, um den Browsern zu helfen, Ihre Seiten schneller zu laden.

Hier kommen die Ressourcenhinweise ins Spiel.

In den folgenden Zeilen schauen wir uns diese an und wie man ihre Vorteile optimal nutzt.

Tauchen wir ein.

Funktionsweise von Browsern (in Kürze)

Um die Ressourcenhinweise besser zu verstehen und wo sie anwendbar sind, werfen wir einen kurzen Blick darauf, wie Browser Inhalte tatsächlich laden.

Wir könnten den gesamten Prozess des Ladens einer Seite durch einen Browser in drei Schritte unterteilen:

• Stelle Verbindung her;
• Herunterladen, Analysieren und Rendern des Codes;
• Die Seite interaktiv gestalten;

In der ersten Phase muss der Browser eine Verbindung mit dem Server herstellen, um die Ressourcen herunterzuladen. Dazu gehört das Nachschlagen des Domänennamens und das Auflösen in eine IP-Adresse, das Einrichten einer Verbindung zum Server und das Verschlüsseln der Verbindung aus Sicherheitsgründen.

Sobald alles erledigt ist, kann der Browser mit dem Herunterladen und Analysieren der Informationen fortfahren, das Document Object Model (DOM) und das CSS Object Model (CSSOM) erstellen und dann den Inhalt rendern.

Der letzte Teil besteht darin, die Seite interaktiv zu machen. Alle oben genannten Prozesse finden im Hauptthread statt. Nachdem also der Hauptthread des Browsers mit dem Parsen, Rendern und Zeichnen der Seite abgeschlossen ist, ist es an der Zeit, sich um zurückgestellte JavaScript-Dateien zu kümmern, um die Seite für Scrollen, Berühren und andere Interaktionen verfügbar zu machen.

Kurz gesagt, das ist der Prozess hinter den Kulissen jedes Mal, wenn eine Seite geladen wird.

Sehen wir uns an, wie Sie jede dieser Phasen positiv beeinflussen können, indem Sie die Ressourcenhinweise integrieren.

Ressourcenhinweise: Prefetch, Preconnect, Preload

Wie der Name schon sagt, sind Ressourcenhinweise Hinweise oder Anweisungen, die dem Browser mitteilen, wie er mit bestimmten Ressourcen oder Webseiten umgehen soll. Mit anderen Worten, mit diesen Anweisungen können Sie den Browser bei der Priorisierung von Ursprüngen oder Ressourcen unterstützen, die abgerufen und gerendert werden müssen.

Alle Ressourcenhinweise verwenden das rel -Attribut des link -Elements, das Sie im Kopf Ihrer HTML-Dokumente finden.

Durch die Integration dieser HTML-Code-Snippets auf Ihrer Website kann der Browser früher mit dem Laden der ausgewählten Dateien beginnen, als wenn der Browser sie beim normalen Laden der Seite findet.

Und jetzt, da die Grundlagen hinter uns liegen, gehen wir zu dem Teil über, für den Sie hier sind – einen Überblick über die Ressourcenhinweise, ihre Vorteile und wann sie zu verwenden sind.

Vorauslesen

link rel=prefetch ist ein Ressourcenhinweis mit niedriger Priorität, der es dem Browser ermöglicht, Ressourcen abzurufen, die später benötigt werden, und sie im Cache des Browsers zu speichern.

Da Prefetch eine sehr niedrige Priorität festlegt, verwenden Sie diesen Hinweis nicht für Dateien mit hoher Wichtigkeit .

Einer der großartigen Anwendungsfälle ist die Verwendung von Prefetch , um die Ladezeit nachfolgender Seiten zu verbessern. Beispielsweise können Sie die Prefetch- Direktive während der Authentifizierung eines Benutzers anwenden. Auf diese Weise können Sie die Zeit nutzen, die sie benötigen, um ihre Anmeldeinformationen einzugeben, um die Ressourcen vorab zu laden, die für die Seite erforderlich sind, die sie als Nächstes sehen werden.

Indem Sie die Schritte Ihrer Besucher auf Ihrer Website antizipieren und die Ressourcen vorab abrufen, können Sie Metriken wie First Contentful Paint und Time to Interactive verbessern. Etwas, das Netflix getan hat und seine Time to Interactive um 30 % reduziert hat.

Alles, was wir bis zu diesem Punkt erwähnt haben, bezieht sich auf das Prefetching, auch bekannt als Link-Prefetching. Aber es gibt zwei andere Arten von Prefetching, die ebenso wichtig sind, und wir müssen erwähnen:

1. DNS-Vorabruf
Der Browser muss eine DNS-Suche durchführen, um einen Hostnamen (die URL) in eine IP-Adresse umzuwandeln, bevor er eine Verbindung zum Host (Ursprungsserver) herstellt.

Obwohl dies normalerweise nur Millisekunden dauert, muss der Browser, wenn eine Website Dateien von einem Domänennamen eines Drittanbieters lädt, was die meisten Websites tun, eine DNS-Suche für jede Domäne durchführen. Einige Sites (z. B. Nachrichten-Websites) verwenden viele externe Ressourcen, was bedeutet, dass pro Seite möglicherweise Dutzende von DNS-Lookups erforderlich sind.

In diesen Fällen kann die Verwendung des dns-prefetch- Hinweises einige Millisekunden einsparen, da die Anweisung den Browser anweist, diesen Prozess sofort zu starten, anstatt erst später im Ladeprozess die Notwendigkeit zu erkennen.

Wie im Web Almanac 2021 vorgeschlagen, besteht eine bewährte Vorgehensweise darin, dns-prefetch mit dem preconnect -Hinweis zu kombinieren, um optimale Ergebnisse zu erzielen. Sie können den Grund in dem Abschnitt sehen, in dem wir über Preconnect sprechen.

2. Vorrendern
Prerendering ist dem Prefetching insofern sehr ähnlich, als es Ressourcen optimiert, zu denen der Benutzer als nächstes navigieren kann. Der Unterschied besteht darin, dass Prerender tatsächlich die gesamte Seite anstelle bestimmter Ressourcen rendert .

Vorverbinden

Wie dns-prefetch hilft die Anweisung preconnect dem Browser, frühzeitig Verbindungen herzustellen, bevor eine erste Anfrage an den Server gesendet wird.

Der Preconnect- Hinweis geht jedoch noch einen Schritt weiter. Während es DNS-Lookups durchführt, umfasst es auch TLS-Verhandlungen und TCP-Handshakes. Dies wiederum eliminiert die Roundtrip-Latenz und spart noch mehr Zeit.

Aber hier kommt die Frage:

Wenn preconnect alles tut, was dns-prefetch tut, und darüber hinaus, warum sollte ich dann dns-prefetch überhaupt verwenden?

In den meisten Fällen ist Preconnect die bevorzugte Option gegenüber dns-prefetch , aber das Problem ist, dass Preconnect von einigen Browsern nicht unterstützt wird:

Quelle: caniuse.com

Das Gute ist, dass Sie sie zusammen verwenden können, um das Beste aus ihnen herauszuholen. Sie können von Preconnect in Browsern profitieren, die dies mit einem Fallback auf dns-prefetch unterstützen:

Laut Google:

Bereits im Jahr 2019 gelang es Chrome, seine Time To Interactive um fast 1 Sekunde zu verbessern, indem es sich mit wichtigen Ursprüngen vorab verbunden hat.

Vorladen

Bevor wir erklären, wie die Preload- Direktive funktioniert, müssen wir etwas klarstellen.

Obwohl das Vorladen regelmäßig als „Ressourcenhinweis“ erwähnt wird, ist dies nicht der Fall. Preload ist ein deklarativer Abruf und für die Browser obligatorisch , wodurch es eher ein Befehl als ein Hinweis ist.

Das Vorladen wird jedoch verwendet, um den Browser zu zwingen, eine Ressource früher herunterzuladen, als der Browser sie entdecken würde, da dies für die Seite von entscheidender Bedeutung ist.

Die Preload- Direktive funktioniert am besten bei Ressourcen, die Teil des kritischen Renderpfads sind, aber vom Browser nicht leicht erkannt werden. Zum Beispiel Schriftarten, CSS oder kritisches JavaScript.

Ein weiterer Unterschied zu den dns-prefetch- und preconnect -Hinweisen besteht darin, dass sie zwar nur die rel- und href -Attribute benötigen, das Vorabladen jedoch komplizierter ist. Sie müssen das as -Attribut hinzufügen, das den Inhaltstyp der Ressource angibt, die Sie vorab laden möchten.

Laut Addy Osmani, Engineering Manager bei Google, ist die Bereitstellung eines as -Attributs beim Vorladen obligatorisch:

Hier ist eine vollständige Liste der as -Werte, die Sie angeben können:

Das Einschließen des as -Attributs hilft dem Browser, die Priorität der vorab abgerufenen Ressource gemäß ihrem Typ festzulegen und festzustellen, ob die Ressource bereits im Cache vorhanden ist.

Sehen Sie sich das Dokument Prioritäten und Planung von Chrome-Ressourcen an, um mehr darüber zu erfahren, wie die verschiedenen Ressourcentypen priorisiert werden.

Bei einigen Ressourcen, wie z. B. Schriftarten, müssen Sie auch das crossorigin- Attribut einschließen.

Das crossorigin- Attribut legt den Modus der Anfrage auf eine HTTP-CORS-Anfrage fest. CORS (Cross-Origin Resource Sharing) ist ein Mechanismus, der es einem Server ermöglicht, andere Ursprünge als seinen eigenen anzugeben, von denen ein Browser das Laden von Ressourcen zulassen sollte. Wir werden nicht näher darauf eingehen, da dies nicht der Schwerpunkt dieses Artikels ist, aber Sie können hier weitere Informationen finden.

Und ähnlich wie beim as -Attribut wird das Vorladen von Schriftarten ohne Crossorigin doppelt abgerufen. Hier noch ein Auszug aus dem Artikel von Addy Osmani zum Thema:

Mehr Ressourcenhinweise, mehr Probleme

Wenn Sie alles bisher gelesen haben, könnten Sie denken, dass die Verwendung so vieler Ressourcenhinweise wie möglich nur dazu führen würde, dass die Browser Ihre Seiten blitzschnell laden.

Leider ist dies nicht der Fall.

Hier sind einige der Rückschläge, die Sie bei der Integration der Ressourcenhinweise berücksichtigen sollten:

1. Prefetch kann den Datenverbrauch erhöhen

Obwohl Prefetch eine niedrige Download-Priorität festlegt, bedeutet das nicht, dass es harmlos ist. Seine Verwendung kann den Datenverbrauch auf Ihrer Website erhöhen, was sowohl für Sie (erhöhter Datenverkehr auf Ihrem Server) als auch für Ihre Benutzer (unnötiger übermäßiger Ressourcenverbrauch) zu Problemen führen kann. Außerdem können Sie am Ende zusätzliche Bytes laden, die möglicherweise nicht verwendet werden. Denken Sie also zweimal nach, bevor Sie es integrieren.

2. Prerender kann Bandbreitenverschwendung verursachen

Das Glücksspiel mit Prerender ist sogar noch größer als mit Prefetch , da Sie ganze Seiten im Voraus herunterladen. Dies macht den Hinweis ressourcenintensiv und kann zu Bandbreitenverschwendung führen, insbesondere auf Mobilgeräten. Und das Schlimmste daran ist, dass Benutzer möglicherweise nicht einmal die Auswirkung des Hinweises sehen, wenn sie die Seite nicht anfordern.

3. Preconnect kann zu zusätzlicher CPU-Auslastung führen

Obwohl Preconnect ein Hinweis mit niedriger Priorität ist, kann es dennoch die Leistung Ihrer Website beeinträchtigen. Wenn eine hergestellte Verbindung nicht schnell verwendet wird (innerhalb von 10 Sekunden bei Chrome), fügt die Preconnect- Anweisung nur zusätzliche CPU-Auslastung hinzu und sie wird automatisch vom Browser geschlossen. Darüber hinaus sollten Sie die Vorverbindung sparsam verwenden, da die Größe der Verschlüsselungszertifikate etwa 3 KB beträgt, was mit der Bandbreite um andere wichtige Ressourcen konkurrieren würde.

4. Preload überschreibt die vom Analysetool des Browsers festgelegten Prioritäten

preload ist eine leistungsstarke Anweisung, da Sie damit den Browser veranlassen können, eine Ressource sofort herunterzuladen. Moderne Webbrowser sind jedoch ziemlich gut darin, Ressourcen zu priorisieren, sodass die übermäßige Verwendung von Preload zu negativen Ergebnissen führen kann. Wenn Sie beispielsweise eine Preload -Direktive hinzufügen, die mit einer asynchronen Ressourcen-URL übereinstimmt, ruft der Browser sie schneller ab, sodass er sie schneller parst, wodurch die Wirkung Ihres async-Attributs aufgehoben wird, indem der Haupt-Thread sehr früh beim Laden der Seite unterbrochen wird.

Rekapitulieren

Wir haben in diesem Artikel viel behandelt, also fassen wir die wichtigsten Punkte kurz zusammen:

• dns-prefetch und preconnect werden verwendet, um Domänennamen zu priorisieren (z. B. https://example.com).
• Prefetch und Preload werden verwendet, um das Laden von Ressourcen zu priorisieren. Während Prefetch zur Verbesserung der Ladezeit nachfolgender Seiten verwendet wird, funktioniert Preload am besten bei kritischen Ressourcen für die aktuelle Seite.
• prerender verweist auf eine ganze Seite (z. B. blog.html).
• prefetch , prerender und preconnect sind Ressourcenhinweise und werden so ausgeführt, wie der Browser es für richtig hält. Die Preload- Direktive ist ein Befehl, der für die Browser obligatorisch ist.
• Vergessen Sie bei der Verwendung von preload nicht, die as - und crossorigin -Attribute anzugeben, um doppeltes Abrufen zu vermeiden.
• Obwohl es sich bei den Ressourcenhinweisen um Anweisungen mit niedriger Priorität handelt, stellen sie dennoch eine Bedrohung für die Leistung Ihrer Website dar. Verwenden Sie sie in Maßen und nur bei Bedarf.
• preload ist eine mächtige Anweisung, die die Prioritäten des Analyseprogramms des Browsers außer Kraft setzen kann. Vergessen Sie nicht, dass moderne Browser ziemlich gut darin sind, Ressourcen zu priorisieren, also gehen Sie sparsam mit dem Preload- „Hinweis“ um.

Nutzen Sie das neu erworbene Wissen über die Ressourcenhinweise, um die Bereitstellung von Inhalten und Assets zu beschleunigen und die Gesamtleistung Ihrer Website zu verbessern. Und vergessen Sie nicht, Ihre Website bei jeder Änderung in der realen Welt zu testen (Fokus auf Felddaten).