ProHoster > Blog > Administratioun > Preload, Prefetch an aner Tags

Preload, Prefetch an aner Tags

et ginn vill Weeër fir d'Webleistung ze verbesseren. Ee vun hinnen ass d'Virlaaschtung vum Inhalt dee spéider gebraucht gëtt. CSS Pre-Veraarbechtung, Voll Säit Pre-Rendering oder Domain Numm Resolutioun. Mir maachen alles am Viraus, a weisen dann direkt d'Resultat! Kléngt cool.

Wat nach méi cool ass, ass datt et ganz einfach ëmgesat ass. Fënnef Tags gitt dem Browser e Kommando fir virleefeg Aktiounen auszeféieren:

<link rel="prefetch" href="/lb/style.css" as="style" />
<link rel="preload" href="/lb/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" />


Loosst eis kuerz erkläre wat se maachen a wéini se se benotzen.

Gitt op: virlueden · prefetch · preconnect · dns-prefetch · prerender

virlueden

<link rel= "preload"> seet dem Browser eng Ressource (wéi e Skript oder Stylesheet) sou séier wéi méiglech ze lueden an ze cache. Dëst ass nëtzlech wann eng Ressource e puer Sekonnen gebraucht gëtt nodeems d'Säit lued - an Dir wëllt de Prozess beschleunegen.

De Browser mécht näischt mat der Ressource nom Luede. Scripte ginn net ausgefouert, Stilblieder ginn net ugewannt. D'Ressource gëtt einfach cache an direkt op Ufro zur Verfügung gestallt.

Siwebiergen

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

href weist op d'Ressource déi Dir wëllt eroflueden.

as kann alles sinn wat am Browser erofgeluede ka ginn:

  • style fir Stilblieder,
  • script fir Scripten,
  • font fir Schrëften,
  • fetch fir Ressourcen gelueden benotzt fetch() oder XMLHttpRequest,
  • gesinn voll Lëscht op MDN.

Et ass wichteg den Attribut ze spezifizéieren as - dëst hëlleft dem Browser richteg ze prioritären an Downloads ze plangen.

Wéini ze benotzen

Benotzt Preloading wann d'Ressource an der nächster Zukunft gebraucht gëtt. Zum Beispill:

  • Net-Standard Schrëften aus enger externer Datei: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Par défaut comic-sans.woff2 fänkt un ze lueden nëmmen nom Download a Parsing index.css. Fir ze vermeiden sou laang ze waarden, kënnt Dir d'Schrëft fréier eroflueden <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Wann Dir Är Stiler no der Approche trennt Kritesch CSS an zwee Deeler, kritesch (fir direkt Rendering) an net kritesch: 
    <style>
/* Inlined critical styles */
</style>

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

    Mat dëser Approche fänken net-kritesch Stiler nëmmen un ze lueden wann JavaScript leeft, wat e puer Sekonnen nom Rendering ka geschéien. Amplaz vun waarden JS benotzen <link rel= "preload">fir fréi erofzelueden:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/lb/app/non-critical.css" as="style" />

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

Iwwerbenotzt d'Preloading net. Wann Dir alles an enger Zeil lued, wäert de Site net magesch beschleunegen, am Géigendeel, et verhënnert datt de Browser seng Aarbecht richteg plangt.

Net ze verwiessele mat Prefetching. Net benotzen <link rel= "preload">, wann Dir d'Ressource net braucht direkt nodeems d'Säit lued. Wann Dir et spéider braucht, zum Beispill fir déi nächst Säit, da benotzt <link rel= "prefetch">.

Méi Detailer

Dëst ass e erfuerderlechen Tag vum Browser ausgefouert ze ginn (wann et et ënnerstëtzt), am Géigesaz zu all aner Tags Zesummenhang mat Preloading. De Browser muss d'Ressource eroflueden, déi an <link rel="preload">. An anere Fäll kann et d'Preloading ignoréieren, zum Beispill wann et op enger lueser Verbindung leeft.

Prioritéite sinn. Browser ginn normalerweis verschidde Prioritéite fir verschidde Ressourcen (Stiler, Scripten, Schrëften, asw.), fir déi wichtegst Ressourcen als éischt ze lueden. An dësem Fall bestëmmt de Browser Prioritéit no Attributer as. Fir Chrome Browser kënnt Dir kucken voll Prioritéit Dësch.

Preload, Prefetch an aner Tags

prefetch

<link rel= "prefetch"> freet de Browser fir eng Ressource (wéi e Skript oder Stilblatt) am Hannergrond erofzelueden an ze cache. D'Luede geschitt mat niddereger Prioritéit sou datt et net méi wichteg Ressourcen stéiert. Dëst ass nëtzlech wann d'Ressource op der nächster Säit gebraucht gëtt an Dir wëllt et am Viraus cache loossen.

Och hei mécht de Browser näischt mat der Ressource nom Luede. Scripte ginn net ausgefouert, Stilblieder ginn net ugewannt. D'Ressource gëtt einfach cache an direkt op Ufro zur Verfügung gestallt.

Siwebiergen

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

href weist op d'Ressource déi Dir wëllt eroflueden.

as kann alles sinn wat am Browser erofgeluede ka ginn:

  • style fir Stilblieder,
  • script fir Scripten,
  • font fir Schrëften,
  • fetch fir Ressourcen gelueden benotzt fetch() oder XMLHttpRequest,
  • gesinn voll Lëscht op MDN.

Et ass wichteg den Attribut ze spezifizéieren as - dëst hëlleft dem Browser korrekt Prioritéit ze setzen an Downloads ze plangen.

Wéini ze benotzen

Fir Ressourcen vun anere Säiten ze lueden, wann Dir eng Ressource vun enger anerer Säit braucht, an Dir wëllt se virluede fir dann d'Rendering vun där Säit ze beschleunegen. Zum Beispill:

  • Dir hutt en Online Store, an 40% vun de Benotzer verloossen d'Homepage fir d'Produkt Säit. Benotzt <link rel= "prefetch">, Luede CSS- a JS-Dateien fir Produktsäiten ze maachen.
  • Dir hutt eng eenzeg Säit Applikatioun, a verschidde Säite lueden verschidde Packagen. Wann e Benotzer eng Säit besicht, kënnen Packagen fir all d'Säiten op déi se verlinkt ass virgeluede ginn.

Et ass méiglech datt dësen Tag sécher a jidde Fall benotzt ka ginn.. Browser plangen normalerweis Prefetch mat der niddregster Prioritéit, sou datt et kee stéiert. Denkt just drun datt et de Benotzerverkéier verbraucht, wat Sue ka kaschten.

Net fir dréngend Ufroen. Net benotzen <link rel= "prefetch">, wann d'Ressource an e puer Sekonnen gebraucht gëtt. An dësem Fall, benotzen <link rel= "preload">.

Méi Detailer

Optional Tag. De Browser ass net erfuerderlech dës Instruktioun ze verfollegen; et kann se ignoréieren, zum Beispill op enger lueser Verbindung.

Prioritéit am Chrome. Am Chrome <link rel= "prefetch"> normalerweis mat minimaler Prioritéit ausgefouert (kuckt voll Prioritéit Dësch), dat heescht, nodeems Dir alles anescht gelueden hutt.

preconnect

<link rel= "preconnect"> freet de Browser fir am Viraus un d'Domain ze verbannen wann Dir d'Verbindungskonfiguratioun an Zukunft wëllt beschleunegen.

De Browser muss eng Verbindung opbauen wann et Ressourcen aus engem neien Drëtt-Partei-Domain recuperéiert. Zum Beispill, wann et Google Fonts lued, reagéiert Schrëften vun engem CDN, oder freet eng JSON Äntwert vun engem API Server.

Eng nei Verbindung opzebauen dauert normalerweis e puer honnert Millisekonnen. Et gëtt eemol gemaach, awer dauert ëmmer nach Zäit. Wann Dir eng Verbindung am Viraus etabléiert hutt, spuert Dir Zäit a luet Ressourcen vun dësem Domain méi séier erof.

Siwebiergen

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

href weist den Domain Numm un fir deen Dir d'IP Adress bestëmmen wëllt. Kann mat engem Präfix spezifizéiert ginn (https://domain.com) oder ouni et (//domain.com).

Wéini ze benotzen

Benotzt fir Domainen déi geschwënn gebraucht ginn fir e wichtege Stil, Skript oder Bild vun do erofzelueden, awer Dir wësst nach net d'Ressource URL. Zum Beispill:

  • Är Applikatioun ass gehost op my-app.com a mécht AJAX Demanden ze api.my-app.com: Dir kennt déi spezifesch Ufroen am Viraus net well se dynamesch aus JS gemaach ginn. Hei ass et zimmlech ubruecht en Tag ze benotzen fir mat dem Domain vir ze verbannen.
  • Är Applikatioun ass gehost op my-app.com a benotzt Google Schrëften. Si ginn an zwee Schrëtt erofgelueden: als éischt gëtt d'CSS-Datei vum Domain erofgelueden fonts.googleapis.com, da freet dëse Fichier Schrëften mat fonts.gstatic.com. Dir kënnt net wëssen, wéi eng spezifesch Schrëftdateien aus sinn fonts.gstatic.com Dir braucht bis Dir d'CSS-Datei lued, also kënne mir nëmmen eng virleefeg Verbindung virdru maachen.

Benotzt dësen Tag fir e puer Drëtt Partei Skript ze beschleunegen oder e bëssen ze stiléieren wéinst pre-etabléiert Verbindung.

Net iwwerbenotzen. Eng Verbindung opzebauen an erhalen ass eng deier Operatioun fir souwuel de Client wéi och fir de Server. Benotzt dësen Tag fir maximal 4-6 Domainen.

Méi Detailer

Optional Tag. De Browser ass net erfuerderlech dës Instruktioun ze verfollegen a kann se ignoréieren, zum Beispill wa vill Verbindunge scho etabléiert sinn oder an engem anere Fall.

Wat enthält de Verbindungsprozess?. Fir mat all Site ze verbannen, muss de Browser déi folgend maachen:

  • DNS Resolutioun. Fannt Server IP Adress (216.58.215.78) fir de spezifizéierte Domain Numm (google.com).
  • TCP Handschlag. Exchange Pakete (Client → Server → Client) fir eng TCP Verbindung mam Server ze initiéieren.
  • TLS Handshake (nëmmen HTTPS Siten). Zwee Ronne vu Paketaustausch (Client → Server → Client → Server → Client) fir eng sécher TLS Sessioun ze initiéieren.

Notiz: HTTP/3 wäert den Handshakemechanismus verbesseren an beschleunegen, awer et ass nach ëmmer wäit ewech.

dns-prefetch

<link rel= "dns-prefetch"> freet de Browser d'DNS-Resolutioun fir d'Domain am Viraus auszeféieren, wann Dir geschwënn domat verbënnt an déi initial Verbindung wëllt beschleunegen.

De Browser muss d'IP Adress vun der Domain bestëmmen ob et Ressourcen vun engem neien Drëtt-Partei-Domain recuperéiert. Zum Beispill lued Google Fonts, React Schrëften vun engem CDN, oder froen eng JSON Äntwert vun engem API Server.

Fir all neit Domain dauert d'DNS-Rekordresolutioun normalerweis ongeféier 20-120 ms. Dëst beaflosst nëmmen d'Luede vun der éischter Ressource vun engem bestëmmten Domain, awer féiert nach ëmmer eng Verspéidung. Wa mir DNS-Resolutioun am Viraus ausféieren, spuere mir Zäit an lued d'Ressource méi séier.

Siwebiergen

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

href weist den Domain Numm un fir deen Dir d'IP Adress setzen wëllt. Kann mat engem Präfix spezifizéiert ginn (https://domain.com) oder ouni et (//domain.com).

Wéini ze benotzen

Benotzt fir Domainen déi geschwënn gebraucht ginn fir vun do Ressourcen erofzelueden, déi de Browser net am Viraus weess. Zum Beispill:

  • Är Applikatioun ass gehost op my-app.com a mécht AJAX Demanden ze api.my-app.com: Dir kennt déi spezifesch Ufroen am Viraus net well se dynamesch aus JS gemaach ginn. Hei ass et zimmlech ubruecht en Tag ze benotzen fir mat dem Domain vir ze verbannen.
  • Är Applikatioun ass gehost op my-app.com, a benotzt Google Schrëften. Si ginn an zwee Schrëtt erofgelueden: als éischt gëtt d'CSS-Datei vum Domain erofgelueden fonts.googleapis.com, da freet dëse Fichier Schrëften mat fonts.gstatic.com. Dir kënnt net wëssen, wéi eng spezifesch Schrëftdateien aus sinn fonts.gstatic.com Dir braucht et bis Dir d'CSS-Datei lued, also kënne mir nëmmen eng virleefeg Verbindung am Viraus maachen.

Benotzt dësen Tag fir e puer Drëtt Partei Skript ze beschleunegen oder e bëssen ze stiléieren wéinst pre-etabléiert Verbindung.

Notéiert w.e.g. ähnlech Charakteristiken <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Et mécht normalerweis kee Sënn fir se zesummen fir een Domain ze benotzen: <link rel= "preconnect"> schonn enthält <link rel= "dns-prefetch"/> a vill méi. Dëst kann an zwee Fäll gerechtfäerdegt ginn:

  • Wëllt Dir eeler Browser ënnerstëtzen?. <link rel= "dns-prefetch" /> ënnerstëtzt vun zënter IE10 a Safari 5. <link rel= "preconnect"> gouf fir eng Zäit an Chrome an Firefox ënnerstëtzt, mee war nëmmen dobäi Safari an 11.1 an nach ëmmer net am IE / Edge ënnerstëtzt. Wann Dir dës Browser ënnerstëtzen musst, benotzt <link rel= "dns-prefetch" /> als Backupsatellit Optioun fir <link rel= "preconnect">.
  • Dir wëllt Verbindunge mat méi wéi 4-6 Domainen beschleunegen. Tag <link rel= "preconnect"> Et ass net recommandéiert mat méi wéi 4-6 Domainen ze benotzen, well d'Erstelle an d'Erhalen vun enger Verbindung eng deier Operatioun ass. <link rel= "dns-prefetch" /> verbraucht manner Ressourcen, also benotzt se wann néideg.

Méi Detailer

Optional Tag. De Browser ass net erfuerderlech dës Instruktioun ze verfollegen, sou datt et vläicht keng DNS-Resolutioun ausféiert, zum Beispill, wann et vill esou Tags op der Säit sinn oder an engem anere Fall.

Wat ass DNS. All Server um Internet huet eng eenzegaarteg IP Adress, déi ausgesäit 216.58.215.78. Den Numm vum Site gëtt normalerweis an der Adressbar vum Browser aginn (zum Beispill, google.com), an DNS (Domain Name System) Servere passen et mat der IP Adress vum Server (216.58.215.78).

Fir eng IP Adress ze bestëmmen, muss de Browser den DNS-Server ufroen. Et dauert 20-120 ms wann Dir mat engem neien Drëtt-Partei Domain verbënnt.

DNS ass cache, obwuel net ganz zouverlässeg. E puer OSen a Browser Cache DNS Ufroen: dëst spuert Zäit op widderholl Ufroen, awer de Cache kann net vertrauen. Op Linux funktionnéiert et normalerweis guer net. Chrome huet en DNS Cache, awer et dauert nëmmen eng Minutt. Windows cache DNS Äntwerte fir fënnef Deeg.

prerender

<link rel= "prerender"> freet de Browser d'URL erofzelueden an se an enger onsichtbarer Tab ze weisen. Wann de Benotzer op de Link klickt, soll d'Säit direkt ugewise ginn. Dëst ass nëtzlech wann Dir sécher sidd datt de Benotzer eng bestëmmte Säit besicht a wëllt seng Display beschleunegen.

Trotz (oder wéinst) der aussergewéinlecher Effektivitéit vun dësem Tag, am Joer 2019 <link rel= "prerender"> schlecht ënnerstëtzt a grousse Browser. Gesinn méi Detailer. drënner.

Siwebiergen

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

href weist op d'URL déi Dir wëllt ufänken am Hannergrond ze Rendering.

Wéini ze benotzen

Wann Dir wierklech sécher sidd datt de Benotzer op eng bestëmmte Säit geet. Wann Dir en "Tunnel" hutt, duerch deen 70% vun de Besucher op Säit A op Säit B goen, dann <link rel= "prerender"> op der Säit A hëlleft der Säit B ganz séier ze weisen.

Net iwwerbenotzen. Pre-Rendering ass extrem deier wat Bandbreedung an Erënnerung ugeet. Net benotzen <link rel= "prerender"> fir méi wéi eng Säit.

Méi Detailer

Optional Tag. De Browser ass net erfuerderlech dës Instruktioun ze verfollegen a kann se ignoréieren, zum Beispill op enger lueser Verbindung oder wann et net genuch fräi Erënnerung ass.

Erënnerung ze retten Chrome mécht net voll Renderingan nëmmen Preload NoState. Dëst bedeit datt Chrome d'Säit an all seng Ressourcen lued, awer JavaScript net rendert oder ausféiert.

Firefox a Safari ënnerstëtzen dëst Tag guer net. Dëst verletzt net d'Spezifikatioun, well d'Browser net erfuerderlech sinn dës Instruktioun ze verfollegen; awer trotzdem traureg. Ëmsetzung Feeler Firefox ass fir siwe Joer op. Et gi Berichter datt Safari ënnerstëtzt dësen Tag och net.

Summary

Benotzt:

  • <link rel= "preload"> - wann Dir braucht eng Ressource an e puer Sekonnen
  • <link rel= "prefetch"> - wann Dir d'Ressource op der nächster Säit braucht
  • <link rel= "preconnect"> - wann Dir wësst datt Dir séier eng Ressource braucht, awer Dir wësst nach net seng voll URL
  • <link rel= "dns-prefetch"> - ähnlech, wann Dir wësst datt Dir séier eng Ressource braucht, awer Dir wësst nach net seng voll URL (fir eeler Browser)
  • <link rel= "prerender"> - wann Dir sécher sidd datt d'Benotzer op eng bestëmmte Säit goen, an Dir wëllt seng Display beschleunegen

Source: will.com

Setzt e Commentaire