Det finns Många sätt att förbättra webbprestanda. Ett av dem är att förladda innehåll som kommer att behövas senare. Pre-fetching av CSS, förrendering av hela sidan eller domännamnsupplösning. Vi gör allt i förväg och visar sedan resultatet omedelbart! Låter fantastiskt.

Ännu bättre är att detta är väldigt enkelt att implementera. Fem <link rel>-taggar ger webbläsaren order om förhandsåtgärder:

<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" />

Kortfattat ska vi förklara vad de gör och när de ska användas.

Gå till: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> berättar webbläsaren att så tidigt som möjligt ladda och cacha resurser (såsom skript eller stilmallar). Detta är användbart när resursen kommer att behövas några sekunder efter att sidan har laddats - och du vill snabba upp processen.

Webbläsaren gör ingenting med resursen efter att den har laddats. Skripten körs inte, stilmallarna appliceras inte. Resursen cacheras bara och tillhandahålls omedelbart på begäran.

Syntax

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

href pekar på resursen som du vill ladda ner.

som kan vara vad som helst som går att ladda ner i webbläsaren:

• style för stilmallar,
• script för skript,
• font för typsnitt,
• fetch för resurser som laddas med fetch() eller XMLHttpRequest,
• fullständig lista se. på MDN.

Det är viktigt att ange attributet som – det hjälper webbläsaren att korrekt prioritera och planera laddningen.

När använda

Använd preload när resursen kommer att behövas inom kort. Till exempel:

• Ovanliga typsnitt från en extern fil:

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

  Som standard comic-sans.woff2 börjar ladda först efter att den har laddats och analyserats. index.cssFör att inte behöva vänta så länge kan du ladda typsnittet tidigare med <link rel="preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• Om du delar dina stilar enligt metoden Critical CSS i två delar, kritisk (för omedelbar rendering) och icke-kritisk:

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

  Med den här metoden kommer icke-kritiska stilar att börja laddas först när JavaScript har körts, vilket kan ske efter några sekunder efter rendering. Använd istället <link rel="preload">, för att påbörja inladdningen tidigare:

  /* Inbakade kritiska stilar */

Överdriv inte med förladdning. Om du laddar allt på en gång kommer sidan inte att bli snabbare magiskt, tvärtom kan det förhindra att webbläsaren planerar arbetet på ett effektivt sätt.

Förväxla inte med prefetching. Använd inte <link rel="preload">, om du inte behöver resursen omedelbart efter att sidan har laddats. Om den behövs senare, till exempel på nästa sida, använd <link rel= "prefetch">.

Detaljer

Detta är en obligatorisk tagg för webbläsaren (om den stöder den), till skillnad från alla andra -taggar relaterade till förladdning. Webbläsaren måste ladda resursen som anges i <link rel="preload">. I andra fall kan den ignorera förladdningen, till exempel om den arbetar på en långsam anslutning.

Prioriteringar. Olika resurser (stilar, skript, teckensnitt osv.) får vanligtvis olika prioriteter av webbläsare för att först ladda de viktigaste resurserna. I det här fallet bestämmer webbläsaren prioriteten baserat på attributet som. För Chrome-webbläsaren kan du se den fullständiga prioritetslistan.

prefetch

<link rel= "prefetch"> ber om att webbläsaren ska ladda och cacha resursen (till exempel ett skript eller en stil) i bakgrunden. Laddningen sker med låg prioritet, så det stör inte mer viktiga resurser. Detta är användbart om resursen behövs på nästa sida och du vill cacha den i förväg.

Här gör webbläsaren inget med resursen efter att den har laddats. Skript körs inte, stilar tillämpas inte. Resursen cachas bara och görs omedelbart tillgänglig på begäran.

Syntax

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

href pekar på resursen som du vill ladda ner.

som kan vara vad som helst som går att ladda ner i webbläsaren:

• style för stilmallar,
• script för skript,
• font för typsnitt,
• fetch för resurser som laddas med fetch() eller XMLHttpRequest,
• fullständig lista se. på MDN.

Det är viktigt att ange attributet som – det hjälper webbläsaren att prioritera och planera laddningen på rätt sätt.

När använda

För att ladda resurser från andra sidor, om resursen från en annan sida behövs och du vill förladda den för att sedan påskynda rendering av den sidan. Till exempel:

• Du har en webbshop, och 40% av användarna lämnar startsidan för produktens sida. Använd <link rel= "prefetch">, genom att ladda CSS- och JS-filer för att rendera sidor med produkten.
• Du har en enkel-sidapp, och olika sidor laddar olika paket. När en användare besöker en sida kan du förhandsladda paketen för alla sidor som den länkar till.

Denna tagg kan troligen användas säkert i valfri mängd. Webbläsare planerar vanligtvis prefetch med lägsta prioritet, så det stör ingen. Tänk bara på att det förbrukar användarens trafik, vilket kan kosta pengar.

Inte för brådskande förfrågningar. Använd inte <link rel= "prefetch">, när resursen behövs inom några sekunder. I det här fallet, använd <link rel="preload">.

Detaljer

Valfri tagg. Webbläsaren är inte skyldig att följa denna instruktion, den kan ignorera den, till exempel på en långsam anslutning.

Prioritet i Chrome. I Chrome <link rel= "prefetch"> utförs vanligtvis med minimal prioritet (se den fullständiga prioritetslistan), det vill säga efter att allt annat har laddats.

preconnect

<link rel= "preconnect"> ber webbläsaren att ansluta till domänen i förväg när du vill snabba upp anslutningen i framtiden.

Webbläsaren bör etablera en anslutning om den hämtar resurser från en ny extern domän. Till exempel, om den laddar typsnitt från Google Fonts, React från CDN, eller gör en begäran om JSON-svar från API-servern.

Det tar vanligtvis flera hundra millisekunder att upprätta en ny anslutning. Den görs en gång, men den tar ändå tid. Om du har upprättat en anslutning i förväg, sparar du tid och laddar resurser snabbare från denna domän.

Syntax

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

href anger domännamnet för vilket IP-adressen ska upprättas. Det kan anges med ett prefix (https://domain.com) eller utan (//domain.com).

När använda

Använd för domäner som snart behövs för att ladda viktiga stilar, skript eller bilder därifrån, men du vet fortfarande inte URL:en för resursen. Till exempel:

• Din applikation är hostad på my-app.com och gör AJAX-förfrågningar till api.my-app.com: du vet inte på förhand vilka specifika förfrågningar som görs, eftersom de görs dynamiskt från JS. Här är det helt i sin ordning att använda taggen för förhandsanslutning till domänen.
• Din applikation är hostad på my-app.com och använder typsnitt från Google Fonts. De laddas i två steg: först laddas CSS-filen från domänen fonts.googleapis.com, därefter begär den filen typsnitt från fonts.gstatic.com.Du kan inte veta vilka specifika typsnittsfiler som fonts.gstatic.com. Du kommer att behöva, tills du har laddat upp CSS-filen, så vi kan i förväg bara upprätta en preliminär anslutning.

Använd denna tagg för att lite snabba upp ett tredjepartsskript eller -stil genom att förbereda anslutningen.

Missbruk inte. Att upprätta och underhålla en anslutning är en kostsam operation både för klienten och servern. Använd denna tagg högst för 4-6 domäner.

Detaljer

Valfri tagg. Webbläsaren är inte skyldig att följa denna instruktion och kan ignorera den, till exempel om det redan finns många anslutningar eller i något annat fall.

Vad ingår i anslutningsprocessen. För att ansluta till varje webbplats måste webbläsaren utföra följande åtgärder:

• DNS-upplösning. Hitta IP-adressen till servern (216.58.215.78) för det angivna domännamnet (google.com).
• TCP-handshake. Utbyte av paket (klient → server → klient) för att initiera TCP-anslutningen till servern.
• TLS-handshake (endast för HTTPS-webbplatser). Två omgångar av paketutbyte (klient → server → klient → server → klient) för att initiera en säker TLS-session.

Observera: HTTP/3 kommer att förbättra och snabba upp handskakningsmekanismen, men det är fortfarande långt borta.

dns-prefetch

<link rel= "dns-prefetch"> ber webbläsaren att i förväg utföra DNS-upplösning för domänen om du snart kommer att ansluta till den och vill snabba upp den initiala anslutningen.

Webbläsaren måste avgöra IP-adressen för domänen om den ska hämta några resurser från en ny tredjepartsdomän. Till exempel ladda Google Fonts, React från CDN eller begära JSON-svar från API-servern.

För varje ny domän tar det vanligtvis cirka 20–120 ms att lösa DNS-poster. Detta påverkar endast inläsningen av den första resursen från denna domän, men representerar ändå en fördröjning. Om DNS-upplösning görs i förväg så sparar vi tid och laddar resursen snabbare.

Syntax

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

href angiver domännamnet för vilket IP-adressen ska upprättas. Kan anges med prefix (https://domain.com) eller utan (//domain.com).

När använda

Använd för domäner som snart behövs för att ladda resurser därifrån som webbläsaren inte känner till i förväg. Till exempel:

• Din applikation är hostad på my-app.com och gör AJAX-förfrågningar till api.my-app.com: du vet inte på förhand vilka specifika förfrågningar som görs, eftersom de görs dynamiskt från JS. Här är det helt i sin ordning att använda taggen för förhandsanslutning till domänen.
• Din applikation är hostad på my-app.com, och använder Google Fonts. De laddas i två steg: först laddas CSS-filen från domänen fonts.googleapis.com, därefter begär den filen typsnitt från fonts.gstatic.com.Du kan inte veta vilka specifika typsnittsfiler som fonts.gstatic.com. du kommer att behöva, tills du har laddat upp CSS-filen, så vi kan i förväg bara upprätta en preliminär anslutning.

Använd denna tagg för att lite snabba upp ett tredjepartsskript eller -stil genom att förbereda anslutningen.

Observera liknande egenskaper på <link rel= "dns-prefetch"/> och <link rel= "preconnect">. Att använda dem tillsammans för en domän är vanligtvis meningslöst: <link rel= "preconnect"> inkluderar redan <link rel= "dns-prefetch"/> och mycket mer. Detta kan rättfärdigas i två fall:

• Du vill stödja gamla webbläsare. <link rel= "dns-prefetch" /> endast manuellt via läget «about:debugging» och kräver tillämpning av en patch. från och med IE10 och Safari 5. <link rel= "preconnect"> har ett tag stödts i Chrome och Firefox, men lades till i Safari först i 11.1 och stöds fortfarande inte i IE/Edge. Om du behöver stödja dessa webbläsare, använd <link rel= "dns-prefetch" /> som en reservlösning för <link rel= "preconnect">.
• Du vill snabba upp anslutningar till mer än 4–6 domäner. Taggen <link rel= "preconnect"> rekommenderas inte att använda med mer än 4–6 domäner, eftersom installation och underhåll av anslutningen är en kostsam operation. <link rel= "dns-prefetch" /> förbrukar mindre resurser, så använd det om det behövs.

Detaljer

Valfri tagg. Webbläsaren är inte skyldig att följa denna instruktion, och kan därför välja att inte göra DNS-upplösning, till exempel om det finns många sådana taggar på sidan eller i något annat fall.

Vad är DNS. Varje server på internet motsvaras av en unik IP-adress, som ser ut som 216.58.215.78. I webbläsarens adressrad anges vanligtvis webbplatsens namn (till exempel, google.com), och DNS-servrar (Domain Name System) kopplar det till serverns IP-adress (216.58.215.78).

För att bestämma IP-adressen måste webbläsaren utföra en begäran till DNS-servern. Detta tar 20–120 ms att ansluta till en ny tredje part-domän.

DNS cachelagras, om än inte särskilt pålitligt. Vissa operativsystem och webbläsare cachelagrar DNS-förfrågningar: detta sparar tid vid upprepade förfrågningar, men man kan inte lita på cachelagring. I Linux fungerar det vanligtvis inte alls. Chrome har en DNS-cache, men den lever bara i en minut. Windows cachelagrar DNS-svar i fem dagar.

prerender

<link rel= "prerender"> ber webbläsaren att ladda URL:en och visa den på en osynlig flik. När användaren klickar på länken bör sidan visas omedelbart. Detta är användbart om du är säker på att användaren kommer att besöka en viss sida och vill snabba upp dess visning.

Trots den exceptionella effektiviteten hos denna tagg (eller på grund av den) stödjs den dåligt av de flesta webbläsare 2019. Mer information finns i. <link rel= "prerender"> плохо поддерживается основными браузерах. Подробнее см. nedan.

Syntax

anger URL:en för vilken du vill aktivera rendering i bakgrunden.

href När du verkligen är säker på att användaren kommer att gå till en viss sida

När använda

Когда вы действительно уверены, что пользователь перейдёт на определённую страницу. Om du har en "tunnel" där 70% av besökarna på sidan A går vidare till sidan B, så <link rel= "prerender"> kan sidan A snabbt hjälpa till att visa sidan B.

Missbruk inte. Förhandsrendering är extremt kostsamt i termer av trafik och minne. Använd inte <link rel= "prerender"> för mer än en sida.

Detaljer

Valfri tagg. Webbläsaren är inte skyldig att följa denna instruktion och kan ignorera den, till exempel vid långsamma anslutningar eller om det finns otillräckligt med ledigt minne.

För att spara minne utför Chrome inte fullständig rendering, och som bara förladdning NoState. Det innebär att Chrome laddar sidan och alla dess resurser, men gör ingen rendering och kör ingen JavaScript.

Firefox och Safari stöder överhuvudtaget inte denna tagg. Detta bryter inte mot specifikationen, eftersom webbläsare inte är skyldiga att följa denna instruktion; men det är fortfarande tråkigt. Implementeringsbuggen i Firefox har varit öppen i sju år. Det finns rapporter om att Safari inte heller stödjer denna tagg.

Sammanfattning

Använd:

• <link rel="preload"> — när du behöver resursen inom några sekunder
• <link rel= "prefetch"> — när du behöver resursen på nästa sida
• <link rel= "preconnect"> — när du vet att du snart kommer att behöva resursen, men du vet ännu inte dess fullständiga URL
• <link rel= "dns-prefetch"> — på samma sätt, när du vet att du snart kommer att behöva resursen, men du vet ännu inte dess fullständiga URL (för äldre webbläsare)
• <link rel= "prerender"> — när du är säker på att användarna kommer att gå till en viss sida och vill snabba på dess visning

Källa: habr.com