Det finns många sätt att förbättra webbprestanda. En av dem är förladdning av innehåll som kommer att behövas senare. CSS-förbearbetning, förrendering av helsidor eller upplösning av domännamn. Vi gör allt i förväg och visar sedan resultatet direkt! Låter coolt.

Vad som är ännu coolare är att det är väldigt enkelt implementerat. Fem taggar ge webbläsaren ett kommando för att utföra preliminära åtgärder:

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

Låt oss kort förklara vad de gör och när de ska användas.

Se hur: förbelastning · prefetch · föranslut · dns-prefetch · förlängning

förbelastning

<link rel= "preload"> ber webbläsaren att ladda och cachelagra en resurs (som ett skript eller en stilmall) så snart som möjligt. Detta är användbart när en resurs behövs några sekunder efter att sidan har laddats - och du vill påskynda processen.

Webbläsaren gör ingenting med resursen efter laddning. Skript körs inte, stilmallar tillämpas inte. Resursen cachelagras och görs omedelbart tillgänglig på begäran.

syntax

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

href pekar på resursen du vill ladda ner.

as kan vara vad som helst som kan laddas ner i webbläsaren:

• style för stilmallar,
• script för manus,
• font för typsnitt,
• fetch för resurser som laddas med fetch() eller XMLHttpRequest,
• se hela listan på MDN.

Det är viktigt att specificera attributet as – detta hjälper webbläsaren att korrekt prioritera och schemalägga nedladdningar.

När du ska använda den

Använd förladdning när resursen behövs inom en mycket nära framtid. Till exempel:

• Icke-standardtypsnitt 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 kommer att börja laddas först efter nedladdning och analys index.css. För att undvika att vänta så länge kan du ladda ner typsnittet tidigare med <link rel= "preload">:

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

• Om du separerar dina stilar enligt tillvägagångssättet Kritisk CSS i två delar, kritiska (för omedelbar rendering) och icke-kritiska:

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

  Med detta tillvägagångssätt kommer icke-kritiska stilar bara att börja laddas när JavaScript körs, vilket kan hända några sekunder efter renderingen. Istället för att vänta använder JS <link rel= "preload">för att börja ladda ner tidigare:

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

Överanvänd inte förladdning. Om du laddar allt i rad kommer sajten inte att på magiskt sätt snabba upp, tvärtom kommer den att hindra webbläsaren från att planera sitt arbete korrekt.

Ej att förväxla med förhämtning. Använd inte <link rel= "preload">, om du inte behöver resursen direkt efter att sidan har laddats. Om du behöver det senare, till exempel för nästa sida, använd då <link rel= "prefetch">.

detaljer

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

Prioriteringar. Webbläsare tilldelar vanligtvis olika prioriteringar till olika resurser (stilar, skript, typsnitt, etc.) för att ladda de viktigaste resurserna först. I det här fallet bestämmer webbläsaren prioritet efter attribut as. För webbläsaren Chrome kan du titta på full prioritetstabell.

prefetch

<link rel= "prefetch"> ber webbläsaren att ladda ner och cachelagra en resurs (som ett skript eller en stilmall) i bakgrunden. Inläsning sker med låg prioritet så att det inte stör viktigare resurser. Detta är användbart om resursen behövs på nästa sida och du vill cache den i förväg.

Även här gör webbläsaren ingenting med resursen efter att ha laddats. Skript körs inte, stilmallar tillämpas inte. Resursen cachelagras och görs omedelbart tillgänglig på begäran.

syntax

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

href pekar på resursen du vill ladda ner.

as kan vara vad som helst som kan laddas ner i webbläsaren:

• style för stilmallar,
• script för manus,
• font för typsnitt,
• fetch för resurser som laddas med fetch() eller XMLHttpRequest,
• se hela listan på MDN.

Det är viktigt att specificera attributet as - detta hjälper webbläsaren att korrekt prioritera och schemalägga nedladdningar.

När du ska använda den

För att ladda resurser från andra sidor, om du behöver en resurs från en annan sida och du vill förladda den för att sedan snabba upp renderingen av den sidan. Till exempel:

• Du har en webbutik och 40 % av användarna lämnar startsidan för produktsidan. Använda sig av <link rel= "prefetch">, laddar CSS- och JS-filer för att rendera produktsidor.
• Du har en ensidig applikation och olika sidor laddar olika paket. När en användare besöker en sida kan paket för alla sidor den länkar till laddas i förväg.

Det är troligt att denna tagg kan användas säkert i vilken utsträckning som helst.. Webbläsare schemalägger vanligtvis förhämtning med lägst prioritet, så det stör ingen. Tänk bara på att det förbrukar användartrafik, 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. Använd i det här fallet <link rel= "preload">.

detaljer

Valfri tagg. Webbläsaren behöver inte följa denna instruktion, den kan ignorera den, till exempel vid en långsam anslutning.

Prioritet i Chrome. I Chrome <link rel= "prefetch"> körs vanligtvis med minsta prioritet (se full prioritetstabell), det vill säga efter att ha laddat allt annat.

föranslut

<link rel= "preconnect"> ber webbläsaren att ansluta till domänen i förväg när du vill påskynda anslutningsinstallationen i framtiden.

Webbläsaren måste upprätta en anslutning om den hämtar några resurser från en ny tredjepartsdomän. Till exempel, om den laddar Google Fonts, React-fonter från ett CDN eller begär ett JSON-svar från en API-server.

Att etablera en ny anslutning tar vanligtvis några hundra millisekunder. Det görs en gång, men tar ändå tid. Om du har upprättat en anslutning i förväg kommer du att spara tid och ladda ner resurser från denna domän snabbare.

syntax

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

href anger det domännamn som du vill bestämma IP-adressen för. Kan anges med ett prefix (https://domain.com) eller utan det (//domain.com).

När du ska använda den

Använd för domäner som kommer att behövas snart för att ladda ner en viktig stil, ett skript eller en bild därifrån, men du känner inte till resursens URL än. Till exempel:

• Din applikation är värd på my-app.com och gör AJAX-förfrågningar till api.my-app.com: Du känner inte till de specifika frågorna i förväg eftersom de görs dynamiskt från JS. Här är det ganska lämpligt att använda en tagg för att föransluta till domänen.
• Din applikation är värd på my-app.com och använder Google Fonts. De laddas ner i två steg: först laddas CSS-filen ner från domänen fonts.googleapis.com, då begär den här filen typsnitt med fonts.gstatic.com. Du kan inte veta vilka specifika teckensnittsfiler kommer från fonts.gstatic.com du behöver tills du laddar CSS-filen, så vi kan bara göra en preliminär anslutning i förväg.

Använd den här taggen för att snabba upp något tredjepartsskript eller stil lite på grund av förutbestämd anslutning.

Överanvänd inte. Att upprätta och underhålla en anslutning är en dyr operation för både klienten och servern. Använd denna tagg för maximalt 4-6 domäner.

detaljer

Valfri tagg. Webbläsaren behöver inte följa denna instruktion och kan ignorera den, till exempel om många anslutningar redan har upprättats eller i något annat fall.

Vad omfattar anslutningsprocessen?. För att ansluta till varje webbplats måste webbläsaren göra följande:

• DNS-upplösning. Hitta serverns IP-adress (216.58.215.78) för det angivna domännamnet (google.com).
• TCP-handslag. Byt paket (klient → server → klient) för att initiera en TCP-anslutning med servern.
• TLS-handslag (endast HTTPS-webbplatser). Två omgångar av paketutbyte (klient → server → klient → server → klient) för att initiera en säker TLS-session.

Notera: HTTP/3 kommer att förbättra och påskynda handskakningsmekanismen, men det är fortfarande långt kvar.

dns-prefetch

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

Webbläsaren måste fastställa domänens IP-adress om den kommer att hämta några resurser från en ny tredjepartsdomän. Till exempel laddar Google Fonts, React-fonter från ett CDN eller begär ett JSON-svar från en API-server.

För varje ny domän tar DNS-postupplösningen vanligtvis cirka 20-120 ms. Detta påverkar bara laddningen av den första resursen från en given domän, men introducerar fortfarande en fördröjning. Om vi ​​utför DNS-upplösning i förväg kommer vi att spara tid och ladda resursen snabbare.

syntax

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

href anger det domännamn som du vill ställa in IP-adressen för. Kan anges med ett prefix (https://domain.com) eller utan det (//domain.com).

När du ska använda den

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

• Din applikation är värd på my-app.com och gör AJAX-förfrågningar till api.my-app.com: Du känner inte till de specifika frågorna i förväg eftersom de görs dynamiskt från JS. Här är det ganska lämpligt att använda en tagg för att föransluta till domänen.
• Din applikation är värd på my-app.com, och använder Google Fonts. De laddas ner i två steg: först laddas CSS-filen ner från domänen fonts.googleapis.com, då begär den här filen typsnitt med fonts.gstatic.com. Du kan inte veta vilka specifika teckensnittsfiler kommer från fonts.gstatic.com du kommer att behöva den tills du laddar CSS-filen, så vi kan bara göra en preliminär anslutning i förväg.

Använd den här taggen för att snabba upp något tredjepartsskript eller stil lite på grund av förutbestämd anslutning.

Observera liknande egenskaper som <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Det brukar inte vara meningsfullt att använda dem tillsammans för en domän: <link rel= "preconnect"> inkluderar redan <link rel= "dns-prefetch"/> och mycket mer. Detta kan motiveras i två fall:

• Vill du stödja äldre webbläsare?. <link rel= "dns-prefetch" /> stöds av sedan IE10 och Safari 5. <link rel= "preconnect"> stöddes ett tag i Chrome och Firefox, men lades bara till i Safari 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 reservalternativ för <link rel= "preconnect">.
• Du vill påskynda anslutningar till fler än 4-6 domäner. Märka <link rel= "preconnect"> Det rekommenderas inte att använda med fler än 4-6 domäner, eftersom att upprätta och underhålla en anslutning är en dyr operation. <link rel= "dns-prefetch" /> förbrukar mindre resurser, så använd den vid behov.

detaljer

Valfri tagg. Webbläsaren behöver inte följa denna instruktion, så den kanske inte utför 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 har en unik IP-adress, som ser ut 216.58.215.78. Namnet på webbplatsen skrivs vanligtvis in i webbläsarens adressfält (t.ex. google.com), och DNS-servrar (Domain Name System) matchar det med serverns IP-adress (216.58.215.78).

För att fastställa en IP-adress måste webbläsaren fråga DNS-servern. Det tar 20−120 ms när du ansluter till en ny tredjepartsdomän.

DNS cachelagras, även om det inte är särskilt tillförlitligt. Vissa operativsystem och webbläsare cachelagrar DNS-förfrågningar: detta sparar tid på upprepade frågor, men det går inte att lita på cachelagring. På Linux fungerar det vanligtvis inte alls. Chrome har en DNS-cache, men den varar bara i en minut. Windows cachar DNS-svar i fem dagar.

förlängning

<link rel= "prerender"> ber webbläsaren att ladda ner URL:en och visa den på en osynlig flik. När användaren klickar på länken ska 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 påskynda visningen av den.

Trots (eller på grund av) den exceptionella effektiviteten av denna tagg, 2019 <link rel= "prerender"> dåligt stöd i större webbläsare. Se mer information. nedan.

syntax

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

href pekar på webbadressen som du vill börja rendera i bakgrunden.

När du ska använda den

När du är riktigt säker på att användaren kommer att gå till en viss sida. Om du har en "tunnel" genom vilken 70 % av besökarna på sida A går till sida B, då <link rel= "prerender"> på sida A hjälper till att visa sida B mycket snabbt.

Överanvänd inte. Förrendering är extremt dyrt vad gäller bandbredd och minne. Använd inte <link rel= "prerender"> för mer än en sida.

detaljer

Valfri tagg. Webbläsaren behöver inte följa denna instruktion och kan ignorera den, till exempel vid en långsam anslutning eller när det inte finns tillräckligt med ledigt minne.

För att spara minne Chrome gör inte full renderingOch endast förladda NoState. Det betyder att Chrome läser in sidan och alla dess resurser, men inte renderar eller kör JavaScript.

Firefox och Safari stöder inte den här taggen alls. Detta bryter inte mot specifikationen, eftersom webbläsare inte behöver följa denna instruktion; men fortfarande ledsen. Implementeringsbugg Firefox har varit öppet i sju år. Det finns rapporter om att Safari stöder inte den här taggen heller.

Sammanfattning

Använda sig av:

• <link rel= "preload"> - när du behöver en resurs på 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 kommer att behöva en resurs snart, men du vet ännu inte dess fullständiga URL
• <link rel= "dns-prefetch"> - på samma sätt, när du vet att du kommer att behöva en resurs snart, men du ännu inte känner till dess fullständiga URL (för äldre webbläsare)
• <link rel= "prerender"> — när du är säker på att användare kommer att gå till en viss sida och du vill snabba upp dess visning

Källa: will.com