Optimer billeder til Core Web Vitals

Hvordan kan billeder påvirke Core Web Vitals?

Billeder spiller en vigtig rolle i at forbedre det visuelle udtryk af en hjemmeside, men de kan også have en betydelig indvirkning på dens indlæsningshastighed. Core Web Vitals er et sæt af målinger, som Google bruger til at måle user experience på en hjemmeside, og billedoptimering er en afgørende faktor for at opnå gode resultater. I denne artikel vil vi diskutere, hvordan du optimerer billeder til Core Web Vitals og forbedrer din hjemmesides indlæsningshastighed.

Hvilke Core Web Vitals kan billeder påvirke?

Det overrasker måske dig at høre, at billeder kan påvirke alle Core Web Vitals. Billeder, hvis de er sat i kø til download sent i renderingsprocessen, eller hvis de simpelthen er for store, vil normalt resultere i en høj LCP score. Hvis billeddimensioner ikke er sat, eller ændrer sig under indlæsningsfasen, kan billeder også påvirke CLS scoren. Og endelig, hvis billedafkodning optager for meget arbejde på hovedtråden, kan de endda påvirke INP. Lad os se nærmere på det:

Largest Contentful Paint

En af Core Web Vitals er Largest Contentful Paint (LCP), som måler, hvor lang tid det tager for det største element på siden (såsom et billede eller en video) at blive synligt for brugeren. Hvis et billede sættes i kø for sent eller tager for lang tid at indlæse, kan det markant forsinke sidens LCP score.

Cumulative Layout Shift

En anden Core Web Vital er Cumulative Layout Shift (CLS), som måler, hvor meget indholdet på en side forskyder sig, mens det indlæses. Billeder kan forårsage layoutforskydninger, hvis de ikke er korrekt dimensioneret, eller hvis de indsættes på siden, efter den allerede er indlæst, hvilket får andre elementer til at flytte sig.

First Input Delay og INP

Endelig kan billeder også påvirke den tredje Core Web Vital, INP, som måler den tid, det tager for en side at reagere visuelt, efter en bruger interagerer med en side. Hvis der er for mange store billeder, der skal afkodes, kan siden tage længere tid om at reagere på brugerinteraktioner, hvilket fører til en dårlig INP score.

Trin 1: Optimer HTML billedelementet for hastighed

Src-attribut

Angiver URL'en til billedet. Denne egenskab er essentiel, da den fortæller browseren, hvor billedet kan findes.

Width- og height-attribut

Angiver bredden og højden af billedet i pixels. Disse egenskaber er vigtige for at rendere billedet korrekt på siden, da de definerer størrelsen af billedcontaineren og hvordan billedet passer ind i den.

Alt-attribut

Angiver alternativ tekst til billedet, hvis det ikke kan vises. Dette er vigtigt for tilgængelighed, da det hjælper synshæmmede brugere med at forstå, hvad billedet handler om. Det er også vigtigt for søgemaskineoptimering (SEO), da søgemaskiner bruger alt-teksten til at forstå indholdet af billedet.

Loading-attribut (lazy loading)

Angiver, hvordan browseren skal indlæse billedet (lazy, eager eller auto). Denne egenskab er vigtig for at forbedre sidens ydeevne, da den gør det muligt at indlæse billeder asynkront og kun når de er nødvendige.

Srcset-attribut

Sizes-attribut

Decoding-attribut

Fetchpriority-attribut

Fetchpriority-attributten angiver prioriteten af en ressources hentning i forhold til andre ressourcer på siden. Prioritetsattributten kan have en af tre værdier: "high", "medium" eller "low". En ressource med høj prioritet indlæses før ressourcer med medium eller lav prioritet. En ressource med medium prioritet indlæses før ressourcer med lav prioritet. Ressourcer med samme prioritet indlæses i den rækkefølge, de optræder i HTML'en.

Trin 2: Sørg for, at billedet sættes i kø til download så tidligt som muligt

Det andet, du skal gøre, efter du har optimeret HTML'en, er at se på billedplanlægning. I mange tilfælde er den største flaskehals, når det handler om billeder, der påvirker LCP-metrikken, sen planlægning. Hvis en browser har mulighed for at downloade LCP-elementet tidligt i renderingsprocessen, vil billedet være tilgængeligt for browseren så tidligt som muligt, og browseren kan begynde at male det element tidligt i renderingsprocessen.

Lyder simpelt, ikke? Nå, hvordan sikrer vi, at billedet sættes i kø til download så tidligt som muligt.

Preload LCP-elementet

Den mest effektive måde at sikre en tidlig download på er at preloade billedet. Preloading af billedet gøres med et simpelt tag i starten af <head>-elementet. For eksempel:

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

Dette simple tag fortæller browseren, at vi snart får brug for "image.jpg", og browseren vil begynde at downloade denne fil med det samme.

Eager load LCP-elementet

Brug høj fetchpriority

Hvis du af en eller anden grund ikke kan preloade LCP-elementet, sørg i det mindste for, at elementet har fetchpriority-attributten sat til high. Dette vil give browseren et hint om, at billedet er vigtigt for siden, og browseren vil downloade det med høj prioritet. Bemærk venligst, at brug af fetchpriority="high" normalt ikke er lige så effektivt som at preloade et billede!

Undgå JavaScript-baseret lazy loading

Trin 3: Sørg for, at billedet downloades så hurtigt som muligt

Det tredje, du skal gøre, er at sikre, at du ikke spilder dyrebare netværksressourcer på billeder, der er større, end de burde være. Du kan gøre dette ved at bruge responsive billeder, bruge komprimering og bruge nye og hurtigere billedformater

Responsive billeder

Billedkomprimering

Nye og hurtigere billedformater

Billeder er ofte en af de største ressourcer på en webside, og de kan markant forsinke indlæsningshastigheden af en side, hvis de ikke er optimeret. Nyere og hurtigere billedformater, såsom WebP- og AVIF-formaterne, kan hjælpe med at reducere filstørrelsen af billeder uden at gå på kompromis med deres kvalitet. Det betyder, at de kan indlæses hurtigere, hvilket kan forbedre sidens indlæsningshastighed.

Trin 4: Eliminer layoutforskydning!

Billeder, der ændrer størrelse, mens de indlæses, vil forårsage en layoutforskydning. Det er så simpelt som det. Der er 3 hovedårsager til, at billeder forårsager en layoutforskydning (der er faktisk mange flere, men disse 3 er de mest almindelige)

1. Manglende billeddimensioner

2. Stylingproblemer

Normalt forhindres billeder i at vokse større end viewporten med et simpelt CSS-trick

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

Dette er et godt trick, og du bør bruge det. Desværre ser jeg regelmæssigt varianter af dette trick, der forårsager en layoutforskydning. For eksempel ved at tilføje width:auto:

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

Dette vil få ethvert billede til at rendere med en automatisk bredde og højde. Det betyder normalt, at browseren vil rendere billedet på 0x0px, før billedet er downloadet

3. Pladsholdere

Nogle JavaScript-baserede lazy loading scripts bruger pladsholdere. Hvis du bruger en form for CSS-trick som det ovennævnte max-width:100% og height:auto, vil autohøjden af den firkantede pladsholder ikke matche height-attributten af billedet. Grundlæggende vil billedet først rendere med den firkantede pladsholder på 720x720, og når det endelige billede er downloadet, vil det rendere på 720*180

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

Trin 5: Beskyt hovedtråden

Det næste, du skal sikre, er, at ikke for mange billeder afkodes på hovedtråden samtidig. Normalt vil dette ikke være et problem, men jeg har set det ske mange gange på produktlistesider (hvor nogle gange hele 500 billeder konkurrerer om ressourcer!).

Tricket er at tilføje decoding="async" til alle billeder for at sikre, at disse billeder kan afkodes på en separat tråd. Prøv også at undgå, at så mange billeder afkodes på én gang ved at tilføje loading="lazy" til alle billeder under folden og skjulte billeder.

Trin 6: Vælg den rigtige strategi for hvert billede!

Billedstrategier for LCP-elementet

LCP-elementet er normalt det vigtigste visuelle element. Så vi skal virkelig prioritere dette."

1. Preload billedet tidligt i head af siden med denne kode: <link rel="preload" as="image" href="path-to-img.png">
2. Fortæl browseren, at dette billede ikke skal lazy loades ved at sætte loading="eager" eller ved at udelade loading-attributten
3. Giv browseren et hint om, at dette billede skal downloades med høj prioritet ved at bruge fetchpriority="high" (hvis du preloader billedet, kan du springe denne del over)
4. Sæt decoding="sync" da dette element er så vigtigt, at vi vil afkode det på hovedtråden

Billedstrategi for logoer og andre synlige (ikke-LCP) billeder

Synlige billeder bør indlæses ret hurtigt under sideindlæsning, men helst efter LCP-elementet. Vi kan opnå dette ved at preloade LCP-elementet. Det vil give disse synlige billeder deres naturlige, korrekte downloadrækkefølge.

1. Fortæl browseren, at dette billede ikke skal lazy loades ved at sætte loading="eager" eller ved at udelade loading-attributten
   
2. Sæt decoding="async" da dette element trygt kan afkodes uden for hovedtråden!

Billedstrategi for billeder under folden

Alle billeder under folden bør lazy loades. Det er så simpelt! Der er ingen undtagelser!

1. Fortæl browseren, at dette billede skal lazy loades ved at sætte loading="lazy"
   
2. Sæt decoding="async" da dette element trygt kan afkodes uden for hovedtråden!

Undgå baggrundsbilleder

Hvis du bruger baggrundsbilleder, skal du genoverveje. Baggrundsbilleder kan ikke lazy loades, og du kan ikke styre decoding-egenskaben, og du kan ikke sætte fetchpriority. Baggrundsbilleder er normalt ikke responsive, hvilket sandsynligvis koster dig en masse båndbredde. Men vigtigst af alt opdages baggrundsbilleder normalt først efter, at browseren har downloadet CSS-filerne. Dette er næsten aldrig det rigtige tidspunkt at udløse en billeddownload!

Du kan bruge normale billedtags i kombination med CSS object-fit:cover for at få normale billeder til at opføre sig som baggrundsbilleder!