Geekly articles weekly

Preload, Prefetch und andere Tags

Es gibt viele Möglichkeiten, die Webleistung zu verbessern . Eine davon ist das Vorladen von Inhalten, die später benötigt werden. CSS-Prefetching, Rendering der gesamten Seitenvorschau oder Auflösung von Domainnamen. Wir machen alles im Voraus und zeigen dann sofort das Ergebnis an! Das klingt cool.

Noch cooler ist, dass es sehr einfach zu implementieren ist. Fünf <link rel> -Tags geben dem Browser einen Befehl für vorbereitende Aktionen:

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/style.css" as="style" /> <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> <link rel="prerender" href="https://example.com/about.html" />

Beschreiben Sie kurz, was sie tun und wann sie sie verwenden sollen.

Springe zu: Preload · Prefetch · Preconnect · DNS -Prefetch · Prerender

Vorspannung


<link rel= "preload"> weist den Browser an, die Ressource (z. B. ein Skript oder ein <link rel= "preload"> ) so schnell wie möglich zu laden und zwischenzuspeichern. Dies ist nützlich, wenn Sie einige Sekunden nach dem Laden der Seite eine Ressource benötigen - und den Vorgang beschleunigen möchten.

Der Browser macht nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgeführt, Stylesheets werden nicht angewendet. Die Ressource wird einfach zwischengespeichert und ist auf Anfrage sofort verfügbar.

Syntax


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

href verweist auf die Ressource, die Sie herunterladen möchten.

as kann alles sein, was Sie in einem Browser herunterladen können:

  • style für Stylesheets,
  • script für Skripte,
  • font für Schriftarten,
  • fetch für Ressourcen, die mit fetch() oder XMLHttpRequest geladen wurden,
  • Siehe die vollständige Liste auf MDN .

Es ist wichtig, das Attribut as anzugeben. Dies hilft dem Browser, Downloads korrekt zu priorisieren und zu planen.

Wann zu verwenden


Verwenden Sie Preload, wenn die Ressource in naher Zukunft benötigt wird. Zum Beispiel:

  • Benutzerdefinierte Schriftarten aus einer externen Datei:

     <!-- index.html --> <link rel="stylesheet" href="index.css" /> /* index.css */ @font-face { src: url('comic-sans.woff2') format('woff2'); }

    Standardmäßig wird comic-sans.woff2 erst nach dem Laden und Parsen von index.css . Um nicht so lange zu warten, können Sie die Schriftart früher mit <link rel= "preload"> herunterladen:

     <link rel="preload" href="comic-sans.woff2" as="font" />
  • Wenn Sie Ihre Stile gemäß dem Critical CSS- Ansatz in zwei Teile aufteilen: kritisch (für sofortiges Rendern) und unkritisch:

     <style> /* Inlined critical styles */ </style> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script>

    Bei diesem Ansatz werden unkritische Stile erst geladen, wenn JavaScript gestartet wird. Dies kann einige Sekunden nach dem Rendern geschehen. Anstatt auf JS zu warten, starten Sie den Download mit <link rel= "preload"> früher:

     <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script>

Missbrauche die Vorspannung nicht . Wenn Sie alles hintereinander herunterladen, wird die Site nicht auf magische Weise beschleunigt, sondern verhindert im Gegenteil, dass der Browser die Arbeit ordnungsgemäß plant.

Nicht mit Prefetching verwechseln . Verwenden Sie <link rel= "preload"> wenn Sie unmittelbar nach dem Laden der Seite eine Ressource benötigen. Wenn Sie es beispielsweise später für die nächste Seite benötigen, verwenden Sie <link rel= "prefetch"> .

Details


Dies ist ein erforderliches Tag für die Ausführung durch den Browser (sofern dies unterstützt wird), im Gegensatz zu allen anderen <link> -Tags, die mit dem Vorladen verbunden sind. Der Browser muss die unter <link rel="preload"> angegebene Ressource herunterladen. In anderen Fällen wird das Vorladen möglicherweise ignoriert, wenn beispielsweise eine langsame Verbindung ausgeführt wird.

Prioritäten Für verschiedene Ressourcen (Stile, Skripte, Schriftarten usw.) weisen Browser normalerweise unterschiedliche Prioritäten zu, um zuerst die wichtigsten Ressourcen zu laden. In diesem Fall priorisiert der Browser das as-Attribut. Für den Chrome-Browser wird die vollständige Prioritätsübersicht angezeigt.



Prefetch


<link rel= "prefetch"> fordert den Browser auf, die Ressource (z. B. ein Skript oder ein <link rel= "prefetch"> ) im Hintergrund herunterzuladen und zwischenzuspeichern. Das Herunterladen erfolgt mit niedriger Priorität, sodass wichtigere Ressourcen nicht beeinträchtigt werden. Dies ist nützlich, wenn Sie die Ressource auf der nächsten Seite benötigen und sie im Voraus zwischenspeichern möchten.

Auch hier macht der Browser nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgeführt, Stylesheets werden nicht angewendet. Die Ressource wird einfach zwischengespeichert und ist auf Anfrage sofort verfügbar.

Syntax


 <link rel="prefetch" href="/style.css" as="style" />

href verweist auf die Ressource, die Sie herunterladen möchten.

as kann alles sein, was Sie in einem Browser herunterladen können:

  • style für Stylesheets,
  • script für Skripte,
  • font für Schriftarten,
  • fetch für Ressourcen, die mit fetch() oder XMLHttpRequest geladen wurden,
  • Siehe die vollständige Liste auf MDN .

Es ist wichtig, das Attribut as anzugeben. Dies hilft dem Browser, Downloads korrekt zu priorisieren und zu planen.

Wann zu verwenden


Zum Herunterladen von Ressourcen von anderen Seiten , wenn Sie eine Ressource von einer anderen Seite benötigen und diese vorab laden möchten, um das Rendern dieser Seite später zu beschleunigen. Zum Beispiel:

  • Sie haben einen Online-Shop und 40% der Benutzer wechseln von der Hauptseite zur Produktseite. Verwenden Sie <link rel= "prefetch"> beim Laden von CSS- und JS-Dateien, um Produktseiten zu rendern.
  • Sie haben eine einseitige Anwendung und verschiedene Seiten laden verschiedene Pakete. Wenn ein Benutzer eine Seite besucht, können Sie Pakete für alle Seiten vorladen, auf die er verweist.

Wahrscheinlich kann dieses Tag sicher in jedem Volume verwendet werden . Browser planen normalerweise den Prefetch mit der niedrigsten Priorität, sodass niemand gestört wird. Denken Sie daran, dass es Benutzerverkehr verbraucht, der Geld kosten kann.

Nicht für dringende Anfragen . Verwenden Sie <link rel= "prefetch"> wenn die Ressource in wenigen Sekunden benötigt wird. Verwenden Sie in diesem Fall <link rel= "preload"> .

Details


Optionales Tag . Der Browser muss diese Anweisung nicht befolgen, er kann sie beispielsweise bei einer langsamen Verbindung ignorieren.

Priorität in Chrome . In Chrome wird <link rel= "prefetch"> normalerweise mit einer Mindestpriorität ausgeführt (siehe Tabelle mit der vollständigen Priorität ), dh nachdem alles andere heruntergeladen wurde.

vorverbinden


<link rel= "preconnect"> fordert den Browser auf, eine Vorverbindung zur Domain herzustellen, wenn Sie die Verbindung in Zukunft beschleunigen möchten.

Der Browser muss eine Verbindung herstellen, wenn er einige Ressourcen aus einer neuen Domäne eines Drittanbieters abruft. Wenn Sie beispielsweise Google Fonts herunterladen, Schriftarten von einem CDN reagieren oder eine JSON-Antwort von einem API-Server anfordern.

Das Herstellen einer neuen Verbindung dauert normalerweise mehrere hundert Millisekunden. Es wird einmal gemacht, aber es braucht noch Zeit. Wenn Sie im Voraus eine Verbindung hergestellt haben, sparen Sie Zeit und laden Sie Ressourcen von dieser Domain schneller herunter.

Syntax


 <link rel= "preconnect" href="https://api.my-app.com" />

href gibt den Domainnamen an, für den Sie die IP-Adresse ermitteln möchten. Sie können mit einem Präfix ( https://domain.com ) oder ohne Präfix ( //domain.com ) //domain.com .

Wann zu verwenden


Verwenden Sie diese Option für Domains, die Sie bald benötigen , um einen wichtigen Stil, ein Skript oder ein Bild von dort herunterzuladen, aber Sie kennen die Ressourcen-URL noch nicht. Zum Beispiel:

  • Ihre Anwendung wird auf my-app.com gehostet und my-app.com AJAX-Anfragen an api.my-app.com : Sie kennen bestimmte Anfragen nicht im Voraus, da sie dynamisch von JS aus erstellt werden. Hier ist es durchaus angebracht, ein Tag für die vorläufige Verbindung zu einer Domain zu verwenden.
  • Ihre Anwendung wird auf my-app.com gehostet und verwendet Google Fonts. Sie werden in zwei Schritten heruntergeladen: Zuerst wird die CSS-Datei von der Domain fonts.googleapis.com , dann fordert diese Datei Schriftarten von fonts.gstatic.com . Sie können nicht wissen, welche spezifischen Schriftdateien von fonts.gstatic.com Sie benötigen, bis Sie die CSS-Datei herunterladen. fonts.gstatic.com können wir nur im Voraus eine vorläufige Verbindung herstellen.

Verwenden Sie dieses Tag, um ein Skript oder einen Stil eines Drittanbieters zu beschleunigen, indem Sie die Verbindung voreinstellen.

Nicht missbrauchen . Das Herstellen und Aufrechterhalten einer Verbindung ist sowohl für den Client als auch für den Server ein teurer Vorgang. Verwenden Sie dieses Tag für maximal 4-6 Domains.

Details


Optionales Tag . Der Browser muss diese Anweisung nicht befolgen und kann sie beispielsweise ignorieren, wenn bereits viele Verbindungen hergestellt wurden oder in einem anderen Fall.

Welches beinhaltet den Verbindungsprozess . Um eine Verbindung zu jeder Site herzustellen, muss der Browser die folgenden Schritte ausführen:

  • DNS-Auflösung . Suchen Sie die IP-Adresse des Servers ( 216.58.215.78 ) für den angegebenen Domainnamen ( google.com ).
  • Handshake TCP . Paketaustausch (Client → Server → Client), um eine TCP-Verbindung zum Server herzustellen.
  • TLS-Handshake (nur HTTPS-Sites) . Zwei Runden des Paketaustauschs (Client → Server → Client → Server → Client), um eine sichere TLS-Sitzung zu initiieren.

Hinweis: HTTP / 3 verbessert und beschleunigt den Handshake-Mechanismus, ist aber noch weit entfernt.

DNS-Prefetch


<link rel= "dns-prefetch"> fordert den Browser auf, das DNS für die Domain im Voraus vorzulösen, wenn Sie bald eine Verbindung zu dieser Domain herstellen und die anfängliche Verbindung beschleunigen möchten.

Der Browser muss die IP-Adresse der Domäne ermitteln, wenn er Ressourcen aus der neuen Domäne eines Drittanbieters abrufen möchte. Laden Sie beispielsweise Google Fonts herunter, React Fonts von einem CDN oder fordern Sie eine JSON-Antwort von einem API-Server an.

Für jede neue Domäne dauert die DNS-Auflösung normalerweise etwa 20 bis 120 ms. Dies wirkt sich nur auf das Laden der ersten Ressource aus einer bestimmten Domäne aus, stellt jedoch immer noch eine Verzögerung dar. Wenn Sie die DNS-Auflösung im Voraus implementieren, sparen wir Zeit und laden die Ressource schneller.

Syntax


 <link rel= "dns-prefetch" href="https://api.my-app.com" />

href gibt den Domänennamen an, für den eine IP-Adresse festgelegt werden soll. Sie können mit einem Präfix ( https://domain.com ) oder ohne Präfix ( //domain.com ) //domain.com .

Wann zu verwenden


Verwenden Sie diese Option für Domains, die in Kürze benötigt werden , um Ressourcen von dort herunterzuladen, von denen der Browser im Voraus nichts weiß. Zum Beispiel:

  • Ihre Anwendung wird auf my-app.com gehostet und my-app.com AJAX-Anfragen an api.my-app.com : Sie kennen bestimmte Anfragen nicht im Voraus, da sie dynamisch von JS aus erstellt werden. Hier ist es durchaus angebracht, ein Tag für die vorläufige Verbindung zu einer Domain zu verwenden.
  • Ihre Anwendung wird auf my-app.com gehostet und verwendet Google Fonts. Sie werden in zwei Schritten heruntergeladen: Zuerst wird die CSS-Datei von der Domain fonts.googleapis.com , dann fordert diese Datei Schriftarten von fonts.gstatic.com . Sie können nicht wissen, welche spezifischen Schriftdateien von fonts.gstatic.com Sie benötigen, bis Sie die CSS-Datei herunterladen. fonts.gstatic.com können wir nur im Voraus eine vorläufige Verbindung herstellen.

Verwenden Sie dieses Tag, um ein Skript oder einen Stil eines Drittanbieters zu beschleunigen, indem Sie die Verbindung voreinstellen.

Beachten Sie die ähnlichen Spezifikationen für <link rel= "dns-prefetch"/> und <link rel= "preconnect"> . Die gemeinsame Verwendung für dieselbe Domain ist normalerweise nicht sinnvoll: <link rel= "preconnect"> bereits <link rel= "dns-prefetch"/> und vieles mehr. Dies kann in zwei Fällen gerechtfertigt sein:

  • Sie möchten ältere Browser unterstützen . <link rel= "dns-prefetch" /> wird seit IE10 und Safari 5 unterstützt . <link rel= "preconnect"> wurde einige Zeit in Chrome und Firefox unterstützt, wurde jedoch erst in 11.1 zu Safari hinzugefügt und wird in IE / Edge immer noch nicht unterstützt . Wenn Sie diese Browser unterstützen müssen, verwenden Sie <link rel= "dns-prefetch" /> als <link rel= "preconnect"> für <link rel= "preconnect"> .
  • Sie möchten Ihre Verbindung zu mehr als 4-6 Domains beschleunigen . Das <link rel= "preconnect"> für die Verwendung mit mehr als 4-6 Domänen nicht empfohlen, da das Herstellen und Aufrechterhalten einer Verbindung eine teure Operation ist. <link rel= "dns-prefetch" /> verbraucht weniger Ressourcen. Verwenden Sie es daher bei Bedarf.

Details


Optionales Tag . Der Browser muss diese Anweisung nicht befolgen. Daher führt er möglicherweise keine DNS-Auflösung durch, z. B. wenn auf der Seite viele solcher Tags vorhanden sind oder in einem anderen Fall.

Was ist DNS? Jeder Server im Internet hat eine eindeutige IP-Adresse, die wie 216.58.215.78 aussieht: 216.58.215.78 . Der Name der Site (z. B. google.com ) wird normalerweise in die Adressleiste des Browsers eingegeben, und DNS-Server (Domain Name System) 216.58.215.78 ihn der IP-Adresse des Servers zu ( 216.58.215.78 ).

Um die IP-Adresse zu ermitteln, muss der Browser den DNS-Server abfragen. Das Herstellen einer Verbindung zu einer neuen Domäne eines Drittanbieters dauert 20 bis 120 ms.

DNS wird zwischengespeichert, obwohl es nicht sehr zuverlässig ist . Einige Betriebssysteme und Browser zwischenspeichern DNS-Abfragen: Dies spart Zeit bei wiederholten Abfragen, Sie können sich jedoch nicht auf das Caching verlassen. Unter Linux funktioniert es normalerweise überhaupt nicht. Chrome verfügt über einen DNS-Cache, der jedoch nur eine Minute dauert. Windows speichert DNS-Antworten fünf Tage lang zwischen.

Prerender


<link rel= "prerender"> fordert den Browser auf, die URL herunterzuladen und auf einer unsichtbaren Registerkarte anzuzeigen. Wenn der Benutzer auf den Link klickt, sollte die Seite sofort angezeigt werden. Dies ist nützlich, wenn Sie sicher sind, dass der Benutzer eine bestimmte Seite besucht und deren Anzeige beschleunigen möchte.

Trotz der außergewöhnlichen Wirksamkeit dieses Tags (oder aufgrund dessen) wird <link rel= "prerender"> 2019 von den wichtigsten Browsern <link rel= "prerender"> unzureichend unterstützt. Siehe unten für weitere Details.

Syntax


 <link rel="prerender" href="https://my-app.com/pricing" />

href verweist auf die URL, für die Sie das Rendern im Hintergrund ausführen möchten.

Wann zu verwenden


Wenn Sie wirklich sicher sind, dass der Benutzer zu einer bestimmten Seite wechselt . Wenn Sie einen „Tunnel“ haben, durch den 70% der Besucher von Seite A zu Seite B gehen, <link rel= "prerender"> auf Seite A, Seite B sehr schnell anzuzeigen.

Nicht missbrauchen . Pre-Rendering ist in Bezug auf Datenverkehr und Speicher extrem teuer. Verwenden Sie <link rel= "prerender"> mehr als eine Seite.

Details


Optionales Tag . Der Browser muss diese Anweisung nicht befolgen und kann sie beispielsweise bei einer langsamen Verbindung oder wenn nicht genügend freier Speicher vorhanden ist, ignorieren.

Um Speicherplatz zu sparen, führt Chrome kein vollständiges Rendern durch , sondern lädt nur NoState vor . Dies bedeutet, dass Chrome die Seite und alle ihre Ressourcen lädt, jedoch kein JavaScript rendert und nicht ausführt.

Firefox und Safari unterstützen dieses Tag überhaupt nicht. Dies verstößt nicht gegen die Spezifikation, da Browser diese Anweisung nicht befolgen müssen. aber trotzdem traurig. Der Implementierungsfehler in Firefox ist seit sieben Jahren offen. Es gibt Berichte, dass Safari dieses Tag ebenfalls nicht unterstützt .

Zusammenfassung


Verwendung:

  • <link rel= "preload"> - wenn Sie in wenigen Sekunden eine Ressource benötigen
  • <link rel= "prefetch"> - wenn Sie auf der nächsten Seite eine Ressource benötigen
  • <link rel= "preconnect"> - wenn Sie wissen, dass Sie bald eine Ressource benötigen, die vollständige URL jedoch noch nicht kennen
  • <link rel= "dns-prefetch"> - ähnlich, wenn Sie wissen, dass Sie bald eine Ressource benötigen, die vollständige URL jedoch noch nicht bekannt sind (für alte Browser)
  • <link rel= "prerender"> - wenn Sie sicher sind, dass Benutzer zu einer bestimmten Seite gehen und deren Anzeige beschleunigen möchten

Source: https://habr.com/ru/post/de445264/

More articles:


All Articles