Öka webbplatsens hastighet med resurshjälpmedel: Preload, Prefetch och Preconnect

I dagens snabbrörliga digitala värld är webbplatsens hastighet avgörande. Användare förväntar sig att webbplatser laddas snabbt och svarar omedelbart. Långsamma laddningstider kan leda till en dålig användarupplevelse, högre avvisningsfrekvens och i slutändan förlorade affärer. Resurshjälpmedel är kraftfulla verktyg som kan hjälpa utvecklare att optimera webbplatsens laddningstider genom att berätta för webbläsaren vilka resurser som är viktiga och hur de ska prioriteras. Den här artikeln utforskar tre viktiga resurshjälpmedel: preload, prefetch och preconnect, och ger praktiska exempel för implementering.

Förstå resurshjälpmedel

Resurshjälpmedel är direktiv som instruerar webbläsaren om vilka resurser en webbsida kommer att behöva i framtiden. De låter utvecklare proaktivt informera webbläsaren om kritiska resurser, vilket gör att den kan hämta eller ansluta till dem tidigare än den annars skulle. Detta kan avsevärt minska laddningstider och förbättra den upplevda prestandan.

De tre primära resurshjälpmedlen är:

Preload: Hämtar kritiska resurser som behövs för den initiala sidladdningen.
Prefetch: Hämtar resurser som sannolikt kommer att behövas för framtida navigeringar eller interaktioner.
Preconnect: Upprättar tidiga anslutningar till viktiga tredjepartsservrar.

Preload: Prioritera kritiska resurser

Vad är Preload?

Preload är en deklarativ hämtning som låter dig tala om för webbläsaren att hämta en resurs som behövs för den nuvarande navigeringen så tidigt som möjligt. Detta är särskilt användbart för resurser som upptäcks sent av webbläsaren, såsom bilder, typsnitt, skript eller stilmallar som laddas via CSS eller JavaScript. Genom att förladda dessa resurser kan du förhindra att de blockerar renderingen och förbättra den upplevda laddningshastigheten för din webbplats.

När ska man använda Preload

Använd preload för:

Typsnitt: Att ladda anpassade typsnitt tidigt kan förhindra "flash of unstyled text" (FOUT) eller "flash of invisible text" (FOIT).
Bilder: Att prioritera bilder ovanför "vecket" (above-the-fold) säkerställer att de laddas snabbt, vilket förbättrar den initiala användarupplevelsen.
Skript och stilmallar: Att ladda kritiska CSS- eller JavaScript-filer tidigt förhindrar render-blockering.
Moduler och webbarbetare: Att förladda moduler eller webbarbetare kan förbättra responsiviteten hos din applikation.

Hur man implementerar Preload

Du kan implementera preload med hjälp av <link>-taggen i <head>-sektionen av ditt HTML-dokument:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Förklaring:

rel="preload": Anger att webbläsaren ska förladda resursen.
href="/path/to/resource": URL:en till resursen som ska förladdas.
as="type": Anger typen av resurs som förladdas (t.ex. font, style, script, image). Attributet `as` är obligatoriskt och avgörande för att webbläsaren korrekt ska prioritera och hantera resursen. Att använda rätt `as`-värde säkerställer att webbläsaren tillämpar korrekt Content Security Policy (CSP) och skickar rätt Accept-huvud.
type="mime/type": (Valfritt men rekommenderas) Anger MIME-typen för resursen. Detta hjälper webbläsaren att välja rätt resursformat, särskilt för typsnitt.
crossorigin="anonymous": (Krävs för typsnitt som laddas från en annan ursprungskälla) Anger CORS-läget för begäran. Om du laddar typsnitt från en CDN behöver du troligen detta attribut.

Exempel: Förladdning av ett typsnitt

Föreställ dig att du har ett anpassat typsnitt som heter 'OpenSans' som används på din webbplats. Utan preload upptäcker webbläsaren detta typsnitt först efter att ha parsats CSS-filen. Detta kan orsaka en fördröjning i renderingen av texten med rätt typsnitt. Genom att förladda typsnittet kan du eliminera denna fördröjning.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Exempel: Förladdning av en kritisk CSS-fil

Om din webbplats har en kritisk CSS-fil som är avgörande för att rendera den initiala vyn, kan förladdning av den avsevärt förbättra den upplevda prestandan.

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

Bästa praxis för Preload

Prioritera kritiska resurser: Förladda endast resurser som är avgörande för den initiala sidladdningen. Överanvändning av preload kan negativt påverka prestandan.
Använd korrekt as-attribut: Ange alltid rätt as-attribut för att säkerställa att webbläsaren hanterar resursen korrekt.
Inkludera type-attribut: Inkludera type-attributet för att hjälpa webbläsaren att välja rätt resursformat.
Använd crossorigin för typsnitt från annan ursprungskälla: När du laddar typsnitt från en annan ursprungskälla, se till att inkludera crossorigin-attributet.
Testa prestanda: Testa alltid preloadens inverkan på prestandan för att säkerställa att det faktiskt förbättrar laddningstiderna. Använd verktyg som Google PageSpeed Insights eller WebPageTest för att mäta effekten.

Prefetch: Förutse framtida behov

Vad är Prefetch?

Prefetch är ett resurshjälpmedel som talar om för webbläsaren att hämta resurser som sannolikt kommer att behövas för framtida navigeringar eller interaktioner. Till skillnad från preload, som fokuserar på resurser som behövs för den aktuella sidan, förutser prefetch användarens nästa drag. Detta är särskilt användbart för att förbättra laddningshastigheten för efterföljande sidor eller komponenter.

När ska man använda Prefetch

Använd prefetch för:

Resurser för nästa sida: Om du vet att användaren sannolikt kommer att navigera till en specifik sida härnäst, förhämta dess resurser.
Resurser för användarinteraktioner: Om en användarinteraktion utlöser laddningen av specifika resurser (t.ex. ett modalfönster, ett formulär), förhämta dessa resurser.
Bilder och tillgångar på andra sidor: Förhämta bilder eller tillgångar som används på andra sidor som användaren sannolikt kommer att besöka.

Hur man implementerar Prefetch

Du kan implementera prefetch med hjälp av <link>-taggen i <head>-sektionen av ditt HTML-dokument:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Förklaring:

rel="prefetch": Anger att webbläsaren ska förhämta resursen.
href="/path/to/resource": URL:en till resursen som ska förhämtas.

Exempel: Förhämta resurser för nästa sida

Om din webbplats har ett tydligt användarflöde, som ett flerstegsformulär, kan du förhämta resurserna för nästa steg när användaren är på det nuvarande steget.

<link rel="prefetch" href="/form/step2.html">

Exempel: Förhämta resurser för ett modalfönster

Om din webbplats använder ett modalfönster som laddar ytterligare resurser när det öppnas, kan du förhämta dessa resurser för att säkerställa en smidig användarupplevelse.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Bästa praxis för Prefetch

Använd sparsamt: Prefetch bör användas sparsamt eftersom det kan förbruka bandbredd och resurser även om användaren inte behöver de förhämtade resurserna.
Prioritera sannolika navigeringar: Förhämta resurser för sidor eller interaktioner som är mest sannolika att inträffa.
Beakta nätverksförhållanden: Prefetch lämpar sig bäst för användare med stabila och snabba internetanslutningar. Undvik att förhämta stora resurser för användare med långsamma eller avgiftsbelagda anslutningar. Du kan använda Network Information API för att upptäcka användarens anslutningstyp och justera förhämtningen därefter.
Övervaka prestanda: Övervaka prefetch-funktionens inverkan på din webbplats prestanda för att säkerställa att den ger en nettonytta.
Använd dynamisk förhämtning: Implementera förhämtning dynamiskt baserat på användarbeteende och analysdata. Förhämta till exempel resurser för sidor som ofta besöks av användare som för närvarande är på den aktuella sidan.

Preconnect: Upprätta tidiga anslutningar

Vad är Preconnect?

Preconnect är ett resurshjälpmedel som låter dig upprätta tidiga anslutningar till viktiga tredjepartsservrar. Att upprätta en anslutning innebär flera steg, inklusive DNS-uppslagning, TCP-handskakning och TLS-förhandling. Dessa steg kan lägga till betydande latens vid laddning av resurser från dessa servrar. Preconnect låter dig initiera dessa steg i bakgrunden, så att när webbläsaren behöver hämta en resurs från servern är anslutningen redan upprättad.

När ska man använda Preconnect

Använd preconnect för:

Tredjepartsservrar: Servrar som hostar typsnitt, CDN:er, API:er eller andra resurser som din webbplats är beroende av.
Ofta använda servrar: Servrar som ofta nås av din webbplats.

Hur man implementerar Preconnect

Du kan implementera preconnect med hjälp av <link>-taggen i <head>-sektionen av ditt HTML-dokument:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

Förklaring:

rel="preconnect": Anger att webbläsaren ska föransluta till servern.
href="https://example.com": URL:en till servern att föransluta till.
crossorigin: (Valfritt, men krävs för resurser som laddas med CORS) Anger att anslutningen kräver CORS.

Exempel: Föranslutning till Google Fonts

Om din webbplats använder Google Fonts kan föranslutning till https://fonts.gstatic.com avsevärt minska latensen vid typsnittsladdning.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Attributet `crossorigin` är avgörande här eftersom Google Fonts använder CORS för att leverera typsnitten.

Exempel: Föranslutning till en CDN

Om din webbplats använder en CDN för att leverera statiska tillgångar kan föranslutning till CDN:ens värdnamn minska latensen vid laddning av dessa tillgångar.

<link rel="preconnect" href="https://cdn.example.com">

Bästa praxis för Preconnect

Använd med omdöme: Att föransluta till för många servrar kan faktiskt försämra prestandan, eftersom webbläsaren har begränsade resurser för att upprätta anslutningar.
Prioritera viktiga servrar: Föranslut till de servrar som är mest kritiska för din webbplats prestanda.
Överväg DNS-Prefetch: För servrar som du inte behöver fullständigt föransluta till, men ändå vill lösa DNS tidigt, överväg att använda <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch utför endast DNS-uppslagningen, vilket är mindre resurskrävande än en fullständig föranslutning.
Testa prestanda: Testa alltid preconnect-funktionens inverkan på prestandan för att säkerställa att den ger en nettonytta.
Kombinera med andra resurshjälpmedel: Använd preconnect i kombination med preload och prefetch för att uppnå optimal prestanda. Föranslut till exempel till servern som hostar dina typsnitt och förladda sedan typsnittsfilerna.

Kombinera resurshjälpmedel för optimal prestanda

Den verkliga kraften hos resurshjälpmedel ligger i att strategiskt kombinera dem. Här är ett praktiskt exempel:

Föreställ dig en webbplats som använder ett anpassat typsnitt som hostas på en CDN och laddar en kritisk JavaScript-fil.

Föranslut till CDN:en: Upprätta en tidig anslutning till CDN:en som hostar typsnittet och JavaScript-filen.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Förladda typsnittet: Prioritera laddning av typsnittet för att förhindra FOUT.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Förladda JavaScript-filen: Prioritera laddning av JavaScript-filen för att säkerställa att den är tillgänglig när den behövs.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Verktyg för att analysera resurshjälpmedel

Flera verktyg kan hjälpa dig att analysera effektiviteten av dina resurshjälpmedel:

Google PageSpeed Insights: Ger rekommendationer för att optimera din webbplats prestanda, inklusive användningen av resurshjälpmedel.
WebPageTest: Låter dig testa din webbplats prestanda från olika platser och nätverksförhållanden.
Chrome DevTools: Nätverkspanelen i Chrome DevTools visar tidsåtgången för resursladdning och kan hjälpa dig att identifiera optimeringsmöjligheter.
Lighthouse: Ett automatiserat verktyg för att förbättra kvaliteten på webbsidor. Det har revisioner för prestanda, tillgänglighet, progressiva webbappar, SEO och mer.

Vanliga fallgropar och hur man undviker dem

Överanvändning av resurshjälpmedel: Att använda för många resurshjälpmedel kan negativt påverka prestandan. Fokusera på de mest kritiska resurserna.
Felaktigt as-attribut: Att använda fel as-attribut för preload kan förhindra att resursen laddas korrekt.
Ignorera CORS: Att misslyckas med att inkludera crossorigin-attributet vid laddning av resurser från en annan ursprungskälla kan orsaka laddningsfel.
Inte testa prestanda: Testa alltid resurshjälpmedlens inverkan på prestandan för att säkerställa att de ger en nettonytta.
Felaktiga sökvägar: Dubbelkolla och se till att alla filvägar och URL:er som anges för resurshjälpmedlen är korrekta, annars kommer det att leda till ett fel.

Framtiden för resurshjälpmedel

Resurshjälpmedel utvecklas ständigt, med nya funktioner och förbättringar som läggs till i webbläsarspecifikationerna. Att hålla sig uppdaterad med de senaste utvecklingarna inom resurshjälpmedel kan hjälpa dig att ytterligare optimera din webbplats prestanda. Till exempel är modulepreload ett nyare resurshjälpmedel som är specifikt utformat för förladdning av JavaScript-moduler. Dessutom tillåter `priority`-attributet för resurshjälpmedel dig att ange prioriteten för en resurs i förhållande till andra resurser. Webbläsarstödet för dessa funktioner utvecklas fortfarande, så kontrollera kompatibiliteten innan du implementerar dem.

Slutsats

Resurshjälpmedel är kraftfulla verktyg för att optimera webbplatsens laddningstider och förbättra användarupplevelsen. Genom att strategiskt använda preload, prefetch och preconnect kan du proaktivt informera webbläsaren om kritiska resurser, minska latensen och förbättra den upplevda prestandan för din webbplats. Kom ihåg att prioritera kritiska resurser, använda resurshjälpmedel med omdöme och alltid testa prestandapåverkan av dina ändringar. Genom att följa de bästa praxis som beskrivs i den här artikeln kan du avsevärt förbättra din webbplats prestanda och ge en bättre upplevelse för dina användare runt om i världen.