Optimera bilder för Core Web Vitals

Hur kan bilder påverka Core Web Vitals?

Bilder spelar en viktig roll för att förbättra det visuella intrycket av en webbplats, men de kan också ha en betydande inverkan på dess laddningshastighet. Core Web Vitals är en uppsättning mätvärden som Google använder för att mäta user experience på en webbplats, och bildoptimering är en avgörande faktor för att uppnå bra resultat. I den här artikeln kommer vi att diskutera hur man optimerar bilder för Core Web Vitals och förbättrar din webbplats laddningshastighet.

Vilka Core Web Vitals kan bilder påverka?

Du kanske blir förvånad över att bilder kan påverka alla Core Web Vitals. Bilder, om de ställs i kö för nedladdning sent under renderingsprocessen eller om de helt enkelt är för stora, resulterar vanligtvis i ett högt LCP-värde. Om bilddimensioner inte är angivna eller ändras under laddningsfasen kan bilder också påverka CLS-värdet. Och slutligen, om bildavkodning tar upp för mycket arbete på huvudtråden, kan de till och med påverka INP. Låt oss ta en närmare titt:

Largest Contentful Paint

Ett av Core Web Vitals är Largest Contentful Paint (LCP), som mäter hur lång tid det tar för det största elementet på sidan (som en bild eller video) att bli synligt för användaren. Om en bild ställs i kö för sent eller tar för lång tid att ladda kan det avsevärt försämra sidans LCP-värde.

Cumulative Layout Shift

Ett annat Core Web Vital är Cumulative Layout Shift (CLS), som mäter hur mycket innehållet på en sida flyttar sig när det laddas. Bilder kan orsaka layoutförskjutningar om de inte är korrekt dimensionerade eller om de infogas på sidan efter att den redan har laddats, vilket gör att andra element flyttas runt.

First Input Delay och INP

Slutligen kan bilder också påverka det tredje Core Web Vital, INP, som mäter tiden det tar för en sida att visuellt svara efter att en användare interagerar med sidan. Om det finns för många stora bilder som behöver avkodas kan sidan ta längre tid att svara på användarinteraktioner, vilket leder till ett dåligt INP-värde.

Steg 1: Optimera HTML-bildelementet för hastighet

Src-attribut

Anger URL:en för bilden. Den här egenskapen är viktig, eftersom den talar om för webbläsaren var bilden finns.

Width- och height-attribut

Anger bildens bredd och höjd i pixlar. Dessa egenskaper är viktiga för att rendera bilden korrekt på sidan, eftersom de definierar storleken på bildcontainern och hur bilden passar inuti den.

Alt-attribut

Anger alternativ text för bilden om den inte kan visas. Detta är viktigt för tillgängligheten, eftersom det hjälper synskadade användare att förstå vad bilden handlar om. Det är också viktigt för sökmotoroptimering (SEO), eftersom sökmotorer använder alt-texten för att förstå bildens innehåll.

Loading-attribut (lazy loading)

Anger hur webbläsaren ska ladda bilden (lazy, eager eller auto). Den här egenskapen är viktig för att förbättra sidans prestanda, eftersom den gör det möjligt för bilder att laddas asynkront och bara när de behövs.

Srcset-attribut

Sizes-attribut

Decoding-attribut

Fetchpriority-attribut

Fetchpriority-attributet anger prioriteten för en resurs hämtning i förhållande till andra resurser på sidan. Prioritetsattributet kan ha ett av tre värden: "high", "medium" eller "low". En resurs med hög prioritet laddas före resurser med medel eller låg prioritet. En resurs med medel prioritet laddas före resurser med låg prioritet. Resurser med samma prioritet laddas i den ordning de förekommer i HTML-koden.

Steg 2: Se till att bilden ställs i kö för nedladdning så tidigt som möjligt

Det andra att göra, efter att du har optimerat HTML-koden, är att titta på bildschemaläggning. I många fall är den största flaskhalsen, när det gäller bildernas påverkan på LCP-mätvärdet, sen schemaläggning. Om en webbläsare har möjlighet att ladda ner LCP-elementet tidigt under renderingsprocessen kommer bilden att vara tillgänglig för webbläsaren så tidigt som möjligt och webbläsaren kan börja måla det elementet tidigt i renderingsprocessen.

Låter enkelt eller hur? Nåväl, hur säkerställer vi att bilden ställs i kö för nedladdning så tidigt som möjligt.

Förladda LCP-elementet

Det mest effektiva sättet att säkerställa en tidig nedladdning är att förladda bilden. Förladdning av bilden görs med en enkel tagg i början av <head>-elementet. Till exempel:

<link rel="preload" as="image" href="image.jpg">

Denna enkla tagg talar om för webbläsaren att vi kommer att behöva "image.jpg" snart och webbläsaren kommer att börja ladda ner filen omedelbart.

Eager-ladda LCP-elementet

Använd hög fetchpriority

Om du av någon anledning inte kan förladda LCP-elementet, se åtminstone till att elementet har fetchpriority-attributet satt till high. Detta hintar till webbläsaren att bilden är viktig för sidan och webbläsaren kommer att ladda ner den med hög prioritet. Observera att fetchpriority="high" vanligtvis inte är lika effektivt som att förladda en bild!

Undvik JavaScript-baserad lazy loading

Steg 3: Se till att bilden laddas ner så snabbt som möjligt

Det tredje att göra är att se till att du inte slösar värdefulla nätverksresurser på bilder som är större än de borde vara. Du kan göra detta genom att använda responsiva bilder, komprimering och nya snabbare bildformat

Responsiva bilder

Bildkomprimering

Nya och snabbare bildformat

Bilder är ofta en av de största resurserna på en webbsida, och de kan avsevärt sakta ner laddningshastigheten på en sida om de inte är optimerade. Nyare och snabbare bildformat, som WebP och AVIF, kan hjälpa till att minska filstorleken på bilder utan att offra deras kvalitet. Det innebär att de kan laddas snabbare, vilket kan förbättra sidans laddningshastighet.

Steg 4: Eliminera layoutförskjutningar!

Bilder som ändrar storlek medan de laddas kommer att orsaka en layoutförskjutning. Så enkelt är det. Det finns tre huvudorsaker till att bilder orsakar layoutförskjutningar (det finns faktiskt många fler, men dessa tre är de vanligaste)

1. Saknade bilddimensioner

2. Stilproblem

Vanligtvis hindras bilder från att bli större än vyportens bredd med ett enkelt CSS-trick

img{
   max-width:100%;   height:auto;
}

Detta är ett bra trick och du bör använda det. Tyvärr ser jag regelbundet varianter av detta trick som orsakar layoutförskjutningar. Till exempel genom att lägga till width:auto:

img{
   max-width:100%;   height:auto;
   width:auto;
}

Detta gör att alla bilder renderas med automatisk bredd och höjd. Det innebär vanligtvis att webbläsaren renderar bilden med 0x0px innan bilden har laddats ner

3. Platshållare

Vissa JavaScript-baserade lazy loading-skript använder platshållare. Om du använder någon form av CSS-trick som det ovan nämnda max-width:100% och height:auto så kommer auto-höjden på den kvadratiska platshållaren inte att matcha height-attributet på bilden. I princip kommer bilden först att renderas med den kvadratiska platshållaren på 720x720 och när den slutliga bilden har laddats ner kommer den att renderas på 720x180

<img 
  src="1x1placeholder.png" 
  data-src="hero.png" 
  width="720" 
  height="180"
  style="height:auto;max-width:100%"
>

Steg 5: Skydda huvudtråden

Nästa sak att se till är att inte för många bilder avkodas på huvudtråden samtidigt. Vanligtvis kommer detta inte att vara ett problem, men jag har sett det hända många gånger på produktlistsidor (där ibland så många som 500 bilder konkurrerar om resurser!).

Tricket är att lägga till decoding="async" på alla bilder för att säkerställa att dessa bilder kan avkodas på en separat tråd. Försök också att undvika att så många bilder avkodas samtidigt genom att lägga till loading="lazy" på alla bilder under förstaviken och dolda bilder.

Steg 6: Välj rätt strategi för varje bild!

Bildstrategier för LCP-elementet

LCP-elementet är vanligtvis det viktigaste visuella elementet. Så vi måste verkligen prioritera detta."

1. Förladda bilden tidigt i head-sektionen av sidan med denna kod: <link rel="preload" as="image" href="path-to-img.png">
2. Tala om för webbläsaren att denna bild inte ska lazy-laddas genom att sätta loading="eager" eller genom att utelämna loading-attributet
3. Hinta till webbläsaren att denna bild bör laddas ner med hög prioritet genom att använda fetchpriority="high" (om du förladdar bilden kan du hoppa över denna del)
4. Sätt decoding="sync" eftersom detta element är så viktigt att vi vill avkoda det på huvudtråden

Bildstrategi för logotyper och andra synliga (icke-LCP) bilder

Synliga bilder bör laddas ganska snart under sidladdningen men helst efter LCP-elementet. Vi kan uppnå detta genom att förladda LCP-elementet. Det ger dessa synliga bilder deras naturliga, korrekta nedladdningsordning.

1. Tala om för webbläsaren att denna bild inte ska lazy-laddas genom att sätta loading="eager" eller genom att utelämna loading-attributet
   
2. Sätt decoding="async" eftersom detta element säkert kan avkodas utanför huvudtråden!

Bildstrategi för bilder under förstaviken

Alla bilder under förstaviken bör lazy-laddas. Så enkelt är det! Det finns inga undantag!

1. Tala om för webbläsaren att denna bild ska lazy-laddas genom att sätta loading="lazy"
   
2. Sätt decoding="async" eftersom detta element säkert kan avkodas utanför huvudtråden!

Undvik bakgrundsbilder

Om du använder bakgrundsbilder bör du tänka om. Bakgrundsbilder kan inte lazy-laddas och du kan inte styra decoding-egenskapen och du kan inte sätta fetchpriority. Bakgrundsbilder är vanligtvis inte responsiva vilket förmodligen kostar dig mycket bandbredd. Men viktigast av allt, bakgrundsbilder upptäcks vanligtvis först efter att webbläsaren har laddat ner CSS-filerna. Detta är nästan aldrig rätt tidpunkt att trigga en bildnedladdning!

Du kan använda vanliga bildtaggar i kombination med CSS object-fit:cover för att få vanliga bilder att bete sig som bakgrundsbilder!