Er is vele manieren om de webprestaties te verbeteren. Een daarvan is het vooraf laden van inhoud die later nodig zal zijn. CSS-voorverwerking, pre-rendering van volledige pagina of resolutie van domeinnamen. Wij doen alles vooraf en laten dan direct het resultaat zien! Klinkt goed.

Wat nog cooler is, is dat het heel eenvoudig is geïmplementeerd. Vijf labels geef de browser een opdracht om voorbereidende acties uit te voeren:

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

Laten we kort uitleggen wat ze doen en wanneer u ze kunt gebruiken.

ерейти : preload · prefetch · vooraf verbinden · dns-prefetch · pre-renderen

preload

<link rel= "preload"> vertelt de browser dat hij een bron (zoals een script of stylesheet) zo snel mogelijk moet laden en in de cache moet opslaan. Dit is handig als er een paar seconden nadat de pagina is geladen een bron nodig is en u het proces wilt versnellen.

De browser doet niets met de bron na het laden. Scripts worden niet uitgevoerd en stylesheets worden niet toegepast. De bron wordt eenvoudigweg in de cache opgeslagen en op verzoek onmiddellijk beschikbaar gesteld.

syntaxis

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

href verwijst naar de bron die u wilt downloaden.

as kan alles zijn dat in de browser kan worden gedownload:

style voor stijlbladen,
script voor scripts,
font voor lettertypen,
fetch voor bronnen die zijn geladen met fetch() of XMLHttpRequest,
zie volledige lijst op MDN.

Het is belangrijk om het attribuut te specificeren as – dit helpt de browser om downloads correct te prioriteren en te plannen.

Wanneer gebruiken

Gebruik vooraf laden wanneer de bron in de zeer nabije toekomst nodig is. Bijvoorbeeld:

Niet-standaard lettertypen uit een extern bestand:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Bij verstek comic-sans.woff2 begint pas te laden na het downloaden en parseren index.css. Om te voorkomen dat u zo lang hoeft te wachten, kunt u het lettertype eerder downloaden met behulp van <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

Als u uw stijlen scheidt volgens de aanpak Kritieke CSS in twee delen, kritisch (voor onmiddellijke weergave) en niet-kritisch:

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

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

Met deze aanpak worden niet-kritieke stijlen pas geladen wanneer JavaScript wordt uitgevoerd, wat een paar seconden na het renderen kan gebeuren. In plaats van te wachten gebruik je JS <link rel= "preload">om eerder te beginnen met downloaden:

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

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

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

Maak niet te veel gebruik van voorladen. Als u alles achter elkaar laadt, wordt de site niet op magische wijze sneller; integendeel, het verhindert dat de browser zijn werk correct plant.

Niet te verwarren met prefetchen. Gebruik niet <link rel= "preload">, als u de bron niet onmiddellijk nodig heeft nadat de pagina is geladen. Als je het later nodig hebt, bijvoorbeeld voor de volgende pagina, gebruik dan <link rel= "prefetch">.

gegevens

Dit is een verplichte tag moet worden uitgevoerd door de browser (als deze dit ondersteunt), in tegenstelling tot alle andere tags gerelateerd aan voorladen. De browser moet de bron downloaden die is opgegeven in <link rel="preload">. In andere gevallen kan het vooraf laden worden genegeerd, bijvoorbeeld als het op een langzame verbinding draait.

prioriteiten. Browsers kennen doorgaans verschillende prioriteiten toe aan verschillende bronnen (stijlen, scripts, lettertypen, enz.) om de belangrijkste bronnen als eerste te laden. In dit geval bepaalt de browser de prioriteit per attribuut as. Voor de Chrome-browser kun je kijken naar volledige prioriteitentabel.

prefetch

<link rel= "prefetch"> vraagt de browser om een bron (zoals een script of stylesheet) op de achtergrond te downloaden en in de cache op te slaan. Het laden vindt plaats met een lage prioriteit, zodat belangrijkere bronnen niet worden verstoord. Dit is handig als de bron op de volgende pagina nodig is en u deze vooraf in de cache wilt opslaan.

Ook hier doet de browser na het laden niets met de bron. Scripts worden niet uitgevoerd en stylesheets worden niet toegepast. De bron wordt eenvoudigweg in de cache opgeslagen en op verzoek onmiddellijk beschikbaar gesteld.

syntaxis

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

href verwijst naar de bron die u wilt downloaden.

as kan alles zijn dat in de browser kan worden gedownload:

style voor stijlbladen,
script voor scripts,
font voor lettertypen,
fetch voor bronnen die zijn geladen met fetch() of XMLHttpRequest,
zie volledige lijst op MDN.

Het is belangrijk om het attribuut te specificeren as - dit helpt de browser om downloads correct te prioriteren en te plannen.

Wanneer gebruiken

Om bronnen van andere pagina's te laden, als u een bron van een andere pagina nodig heeft en deze vooraf wilt laden om de weergave van die pagina te versnellen. Bijvoorbeeld:

U heeft een online winkel en 40% van de gebruikers verlaat de startpagina en gaat naar de productpagina. Gebruik <link rel= "prefetch">, CSS- en JS-bestanden laden om productpagina's weer te geven.
U hebt een applicatie met één pagina en verschillende pagina's laden verschillende pakketten. Wanneer een gebruiker een pagina bezoekt, kunnen pakketten voor alle pagina's waarnaar deze linkt, vooraf worden geladen.

Het is waarschijnlijk dat deze tag in welke mate dan ook veilig kan worden gebruikt.. Browsers plannen prefetch meestal met de laagste prioriteit, zodat niemand er last van heeft. Houd er rekening mee dat het gebruikersverkeer verbruikt, wat geld kan kosten.

Niet voor dringende verzoeken. Gebruik niet <link rel= "prefetch">, wanneer de bron binnen enkele seconden nodig is. Gebruik in dit geval <link rel= "preload">.

gegevens

Optioneel label. De browser hoeft deze instructie niet te volgen; hij kan deze bijvoorbeeld negeren bij een langzame verbinding.

Prioriteit in Chrome. In Chroom <link rel= "prefetch"> meestal uitgevoerd met minimale prioriteit (zie volledige prioriteitentabel), dat wil zeggen, na het laden van al het andere.

vooraf verbinden

<link rel= "preconnect"> vraagt de browser om vooraf verbinding te maken met het domein als u de verbindingsconfiguratie in de toekomst wilt versnellen.

De browser moet een verbinding tot stand brengen als deze bronnen ophaalt van een nieuw domein van derden. Als het bijvoorbeeld Google Fonts, React-lettertypen van een CDN laadt of een JSON-antwoord van een API-server aanvraagt.

Het tot stand brengen van een nieuwe verbinding duurt doorgaans een paar honderd milliseconden. Het is een keer gedaan, maar het kost nog steeds tijd. Als u vooraf een verbinding tot stand heeft gebracht, bespaart u tijd en downloadt u sneller bronnen van dit domein.

syntaxis

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

href geeft de domeinnaam aan waarvan u het IP-adres wilt bepalen. Kan worden opgegeven met een voorvoegsel (https://domain.com) of zonder (//domain.com).

Wanneer gebruiken

Gebruik voor domeinen die binnenkort nodig zijn om daar een belangrijke stijl, script of afbeelding te downloaden, maar u kent de bron-URL nog niet. Bijvoorbeeld:

Uw applicatie wordt gehost op my-app.com en doet AJAX-verzoeken aan api.my-app.com: Je kent de specifieke queries niet vooraf omdat ze dynamisch vanuit JS worden gemaakt. Hier is het heel toepasselijk om een tag te gebruiken om vooraf verbinding te maken met het domein.
Uw applicatie wordt gehost op my-app.com en maakt gebruik van Google Fonts. Ze worden in twee stappen gedownload: eerst wordt het CSS-bestand gedownload van het domein fonts.googleapis.com, dan vraagt dit bestand om lettertypen met fonts.gstatic.com. U kunt niet weten welke specifieke lettertypebestanden afkomstig zijn fonts.gstatic.com je hebt nodig totdat je het CSS-bestand laadt, dus we kunnen vooraf alleen een voorlopige verbinding maken.

Gebruik deze tag om een script of stijl van derden een beetje te versnellen vanwege een vooraf tot stand gebrachte verbinding.

Gebruik niet te veel. Het tot stand brengen en onderhouden van een verbinding is een kostbare operatie voor zowel de client als de server. Gebruik deze tag voor maximaal 4-6 domeinen.

gegevens

Optioneel label. De browser hoeft deze instructie niet te volgen en kan deze negeren, bijvoorbeeld als er al veel verbindingen tot stand zijn gebracht of in een ander geval.

Wat houdt het aansluitproces in?. Om verbinding te maken met elke site moet de browser het volgende doen:

DNS-resolutie. Zoek het IP-adres van de server (216.58.215.78) voor de opgegeven domeinnaam (google.com).
TCP-handshake. Wissel pakketten uit (client → server → client) om een TCP-verbinding met de server te initiëren.
TLS-handshake (alleen HTTPS-sites). Twee rondes van pakketuitwisseling (client → server → client → server → client) om een beveiligde TLS-sessie te starten.

Opmerking: HTTP/3 zal het handshake-mechanisme verbeteren en versnellen, maar het is nog ver weg.

dns-prefetch

<link rel= "dns-prefetch"> vraagt de browser om vooraf een DNS-resolutie voor het domein uit te voeren als u er binnenkort verbinding mee gaat maken en de eerste verbinding wilt versnellen.

De browser moet het IP-adres van het domein bepalen als hij bronnen van een nieuw domein van derden kan ophalen. Bijvoorbeeld het laden van Google Fonts, React-lettertypen van een CDN of het aanvragen van een JSON-antwoord van een API-server.

Voor elk nieuw domein duurt de resolutie van DNS-records doorgaans ongeveer 20-120 ms. Dit heeft alleen invloed op het laden van de eerste bron uit een bepaald domein, maar introduceert nog steeds een vertraging. Als we DNS-resolutie vooraf uitvoeren, besparen we tijd en laden we de bron sneller.

syntaxis

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

href geeft de domeinnaam aan waarvoor u het IP-adres wilt instellen. Kan worden opgegeven met een voorvoegsel (https://domain.com) of zonder (//domain.com).

Wanneer gebruiken

Gebruik voor domeinen die binnenkort nodig zijn om daar bronnen te downloaden waarvan de browser niet van tevoren op de hoogte is. Bijvoorbeeld:

Uw applicatie wordt gehost op my-app.com en doet AJAX-verzoeken aan api.my-app.com: Je kent de specifieke queries niet vooraf omdat ze dynamisch vanuit JS worden gemaakt. Hier is het heel toepasselijk om een tag te gebruiken om vooraf verbinding te maken met het domein.
Uw applicatie wordt gehost op my-app.comen maakt gebruik van Google Fonts. Ze worden in twee stappen gedownload: eerst wordt het CSS-bestand gedownload van het domein fonts.googleapis.com, dan vraagt dit bestand om lettertypen met fonts.gstatic.com. U kunt niet weten welke specifieke lettertypebestanden afkomstig zijn fonts.gstatic.com je hebt het nodig totdat je het CSS-bestand laadt, dus we kunnen alleen vooraf een voorlopige verbinding maken.

Gebruik deze tag om een script of stijl van derden een beetje te versnellen vanwege een vooraf tot stand gebrachte verbinding.

Let op vergelijkbare kenmerken als <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Het heeft meestal geen zin om ze samen voor één domein te gebruiken: <link rel= "preconnect"> omvat al <link rel= "dns-prefetch"/> en nog veel meer. Dit kan in twee gevallen gerechtvaardigd zijn:

Wilt u oudere browsers ondersteunen?. <link rel= "dns-prefetch" /> ondersteund door sinds IE10 en Safari 5. <link rel= "preconnect"> werd een tijdje ondersteund in Chrome en Firefox, maar werd pas in 11.1 en XNUMX aan Safari toegevoegd nog steeds niet ondersteund in IE/Edge. Als u deze browsers wilt ondersteunen, gebruikt u <link rel= "dns-prefetch" /> als back-upoptie voor <link rel= "preconnect">.

U wilt de verbindingen met meer dan 4-6 domeinen versnellen. Label <link rel= "preconnect"> Het wordt niet aanbevolen om het te gebruiken met meer dan 4-6 domeinen, omdat het tot stand brengen en onderhouden van een verbinding een dure operatie is. <link rel= "dns-prefetch" /> verbruikt minder hulpbronnen, dus gebruik het indien nodig.

gegevens

Optioneel label. De browser hoeft deze instructie niet te volgen en voert dus mogelijk geen DNS-resolutie uit, bijvoorbeeld als er veel van dergelijke tags op de pagina staan of in een ander geval.

Wat is DNS. Elke server op internet heeft een uniek IP-adres, dat er zo uitziet 216.58.215.78. De naam van de site wordt meestal in de adresbalk van de browser ingevoerd (bijvoorbeeld google.com), en DNS-servers (Domain Name System) matchen dit met het IP-adres van de server (216.58.215.78).

Om een IP-adres te bepalen, moet de browser de DNS-server opvragen. Het duurt 20-120 ms wanneer verbinding wordt gemaakt met een nieuw domein van derden.

DNS wordt in de cache opgeslagen, hoewel niet erg betrouwbaar. Sommige besturingssystemen en browsers slaan DNS-query's op in de cache: dit bespaart tijd bij herhaalde query's, maar er kan niet op caching worden vertrouwd. Onder Linux werkt het meestal helemaal niet. Chrome heeft een DNS-cache, maar deze duurt maar een minuut. Windows bewaart DNS-antwoorden gedurende vijf dagen in de cache.

pre-renderen

<link rel= "prerender"> vraagt de browser om de URL te downloaden en op een onzichtbaar tabblad weer te geven. Wanneer de gebruiker op de link klikt, moet de pagina onmiddellijk worden weergegeven. Dit is handig als u zeker weet dat de gebruiker een bepaalde pagina zal bezoeken en de weergave ervan wilt versnellen.

Ondanks (of dankzij) de uitzonderlijke effectiviteit van deze tag in 2019 <link rel= "prerender"> slecht ondersteund in de belangrijkste browsers. Zie meer details. beneden.

syntaxis

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

href verwijst naar de URL die u op de achtergrond wilt weergeven.

Wanneer gebruiken

Wanneer je echt zeker weet dat de gebruiker naar een bepaalde pagina gaat. Als je een “tunnel” hebt waardoor 70% van de bezoekers van pagina A naar pagina B gaat, dan <link rel= "prerender"> op pagina A zal helpen om pagina B zeer snel weer te geven.

Gebruik niet te veel. Pre-rendering is extreem duur in termen van bandbreedte en geheugen. Gebruik niet <link rel= "prerender"> voor meer dan één pagina.

gegevens

Optioneel label. De browser hoeft deze instructie niet te volgen en kan deze bijvoorbeeld negeren bij een langzame verbinding of als er onvoldoende vrij geheugen is.

Om geheugen te besparen Chrome doet geen volledige weergaveEn laad alleen NoState vooraf. Dit betekent dat Chrome de pagina en alle bijbehorende bronnen laadt, maar JavaScript niet weergeeft of uitvoert.

Firefox en Safari ondersteunen deze tag helemaal niet. Dit is niet in strijd met de specificatie, aangezien browsers deze instructie niet hoeven te volgen; maar toch verdrietig. Implementatiefout Firefox bestaat al zeven jaar. Er zijn berichten dat Safari ondersteunt deze tag ook niet.

Beknopt

Gebruik:

<link rel= "preload"> - wanneer u binnen een paar seconden een hulpbron nodig heeft
<link rel= "prefetch"> - wanneer u de bron op de volgende pagina nodig heeft
<link rel= "preconnect"> - wanneer u weet dat u binnenkort een hulpmiddel nodig heeft, maar de volledige URL nog niet kent
<link rel= "dns-prefetch"> - op dezelfde manier, wanneer u weet dat u binnenkort een bron nodig heeft, maar u de volledige URL nog niet kent (voor oudere browsers)
<link rel= "prerender"> — wanneer u zeker weet dat gebruikers naar een bepaalde pagina gaan en u de weergave ervan wilt versnellen

Bron: www.habr.com

Preload, prefetch en andere tags

preload

syntaxis

Wanneer gebruiken

gegevens

prefetch

syntaxis

Wanneer gebruiken

gegevens

vooraf verbinden

syntaxis

Wanneer gebruiken

gegevens

dns-prefetch

syntaxis

Wanneer gebruiken

gegevens

pre-renderen

syntaxis

Wanneer gebruiken

gegevens

Beknopt

Voeg een reactie Reactie annuleren