Optimaliser bilder for Core Web Vitals

Hvordan kan bilder påvirke Core Web Vitals?

Bilder spiller en viktig rolle i å forbedre det visuelle uttrykket til et nettsted, men de kan også ha en betydelig innvirkning på lastehastigheten. Core Web Vitals er et sett med metrikker som Google bruker for å måle brukeropplevelsen på et nettsted, og bildeoptimalisering er en kritisk faktor for å oppnå gode resultater. I denne artikkelen vil vi diskutere hvordan du optimaliserer bilder for Core Web Vitals og forbedrer nettstedets lastehastighet.

Hvilke Core Web Vitals kan bilder påvirke?

Du blir kanskje overrasket over å høre at bilder kan påvirke alle Core Web Vitals. Bilder, hvis de settes i kø for nedlasting sent under renderingsprosessen eller hvis de rett og slett er for store, vil vanligvis resultere i en høy LCP- score. Hvis bildedimensjoner ikke er satt eller endres under lastefasen, kan bilder også påvirke CLS-scoren. Og til slutt, hvis bildedekoding tar opp for mye hovedtrådsarbeid, kan de til og med påvirke INP. La oss se nærmere på dette:

Largest Contentful Paint

En av Core Web Vitals er Largest Contentful Paint (LCP), som måler hvor lang tid det tar før det største elementet på siden (som et bilde eller en video) blir synlig for brukeren. Hvis et bilde settes i kø for sent eller tar for lang tid å laste, kan det betydelig redusere sidens LCP-score.

Cumulative Layout Shift

En annen Core Web Vital er Cumulative Layout Shift (CLS), som måler hvor mye innholdet på en side forskyver seg mens den laster. Bilder kan forårsake layoutforskyvninger hvis de ikke er riktig dimensjonert eller hvis de settes inn på siden etter at den allerede har lastet, noe som får andre elementer til å flytte seg.

First Input Delay og INP

Til slutt kan bilder også påvirke den tredje Core Web Vital, INP, som måler tiden det tar for en side å visuelt respondere etter at brukere interagerer med en side. Hvis det er for mange store bilder som må dekodes, kan det ta lengre tid for siden å respondere på brukerinteraksjoner, noe som fører til en dårlig INP-score.

Steg 1: Optimaliser HTML-bildeelementet for hastighet

Src-attributt

Angir URL-en til bildet. Denne egenskapen er essensiell, da den forteller nettleseren hvor bildet finnes.

Width- og height-attributt

Angir bredden og høyden til bildet i piksler. Disse egenskapene er viktige for å gjengi bildet korrekt på siden, da de definerer størrelsen på bildebeholderen og hvordan bildet passer inn i den.

Alt-attributt

Angir alternativ tekst for bildet hvis det ikke kan vises. Dette er viktig for tilgjengelighet, da det hjelper synshemmede brukere med å forstå hva bildet handler om. Det er også viktig for søkemotoroptimalisering (SEO), da søkemotorer bruker alt-teksten til å forstå innholdet i bildet.

Loading-attributt (lazy loading)

Angir hvordan nettleseren skal laste bildet (lazy, eager eller auto). Denne egenskapen er viktig for å forbedre sideytelsen, da den lar bilder lastes asynkront og bare når de trengs.

Srcset-attributt

Sizes-attributt

Decoding-attributt

Fetchpriority-attributt

Fetchpriority-attributten angir prioriteten til en ressurs sin henting i forhold til andre ressurser på siden. Prioritetsattributten kan ha en av tre verdier: "high", "medium" eller "low". En ressurs med høy prioritet lastes før ressurser med medium eller lav prioritet. En ressurs med medium prioritet lastes før ressurser med lav prioritet. Ressurser med samme prioritet lastes i den rekkefølgen de vises i HTML-en.

Steg 2: Sørg for at bildet settes i kø for nedlasting så tidlig som mulig

Det andre du bør gjøre, etter at du har optimalisert HTML-en, er å se på bildeplanlegging. I mange tilfeller er den største flaskehalsen når det gjelder bilder som påvirker LCP-metrikken, sen planlegging. Hvis en nettleser har mulighet til å laste ned LCP-elementet tidlig under renderingsprosessen, vil bildet være tilgjengelig for nettleseren så tidlig som mulig, og nettleseren kan begynne å male det elementet tidlig i renderingsprosessen.

Høres enkelt ut, ikke sant? Vel, hvordan sørger vi for at bildet settes i kø for nedlasting så tidlig som mulig.

Forhåndslast LCP-elementet

Den mest effektive måten å sikre en tidlig nedlasting på er å forhåndslaste bildet. Forhåndslasting av bildet gjøres med en enkel tagg i starten av <head>-elementet. For eksempel:

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

Denne enkle taggen vil fortelle nettleseren at vi vil trenge "image.jpg" ganske snart, og nettleseren vil starte nedlastingen av denne filen umiddelbart.

Eager-last LCP-elementet

Bruk høy fetchpriority

Hvis du av en eller annen grunn ikke kan forhåndslaste LCP-elementet, sørg i det minste for at elementet har fetchpriority-attributten satt til high. Dette vil antyde for nettleseren at bildet er viktig for siden, og nettleseren vil laste det ned med høy prioritet. Vær oppmerksom på at bruk av fetchpriority="high" vanligvis ikke er like effektivt som å forhåndslaste et bilde!

Unngå JavaScript-basert lazy loading

Steg 3: Sørg for at bildet lastes ned så raskt som mulig

Det tredje du bør gjøre er å sørge for at du ikke kaster bort verdifulle nettverksressurser på bilder som er større enn de burde være. Du kan gjøre dette ved å bruke responsive bilder, bruke komprimering og bruke nye og raskere bilde- formater

Responsive bilder

Bildekomprimering

Nye og raskere bildeformater

Bilder er ofte en av de største ressursene på en nettside, og de kan betydelig redusere lastehastigheten til en side hvis de ikke er optimalisert. Nyere og raskere bildeformater, som WebP- og AVIF-formatene, kan bidra til å redusere filstørrelsen på bilder uten å ofre kvaliteten. Dette betyr at de kan lastes raskere, noe som kan forbedre lastehastigheten til siden.

Steg 4: Eliminer layoutforskyvning!

Bilder som endrer størrelse mens de laster, vil forårsake en layoutforskyvning. Så enkelt er det. Det er 3 hovedårsaker til at bilder forårsaker en layoutforskyvning (det finnes mange flere, men disse 3 er de vanligste)

1. Manglende bildedimensjoner

2. Stilproblemer

Vanligvis hindres bilder fra å bli større enn visningsporten med et enkelt CSS-triks

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

Dette er et flott triks og du bør bruke det. Dessverre ser jeg jevnlig varianter av dette trikset som forårsaker en layoutforskyvning. For eksempel ved å legge til width:auto:

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

Dette vil gjøre at ethvert bilde gjengis med automatisk bredde og høyde. Dette betyr vanligvis at nettleseren vil gjengi bildet på 0x0px før bildet er lastet ned

3. Plassholdere

Noen JavaScript-baserte lazy loading-skript bruker plassholdere. Hvis du bruker en CSS-teknikk som den ovenfor nevnte max-width:100% og height:auto, vil autohøyden til den firkantede plassholderen ikke samsvare med height- attributten til bildet. I praksis vil bildet først gjengis med den firkantede plassholderen på 720x720, og når det endelige bildet er lastet ned, vil det gjengis på 720*180

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

Steg 5: Beskytt hovedtråden

Det neste du må sørge for er at ikke for mange bilder dekodes på hovedtråden samtidig. Vanligvis vil dette ikke være et problem, men jeg har sett det skje mange ganger på produktlistesider (der noen ganger hele 500 bilder konkurrerer om ressurser!).

Trikset er å legge til decoding="async" på alle bilder for å sørge for at disse bildene kan dekodes på en separat tråd. Prøv også å unngå at så mange bilder dekodes på én gang ved å legge til loading="lazy" på alle bilder under folden og skjulte bilder.

Steg 6: Velg riktig strategi for hvert bilde!

Bildestrategier for LCP-elementet

LCP-elementet er vanligvis det viktigste visuelle elementet. Så vi må virkelig prioritere dette."

1. Forhåndslast bildet tidlig i head-seksjonen av siden med denne koden: <link rel="preload" as="image" href="path-to-img.png">
2. Fortell nettleseren at dette bildet ikke skal lazy-lastes ved å sette loading="eager" eller ved å utelate loading-attributten
3. Antyd for nettleseren at dette bildet bør lastes ned med høy prioritet ved å bruke fetchpriority="high" (hvis du forhåndslaster bildet, kan du hoppe over denne delen)
4. Sett decoding="sync" siden dette elementet er så viktig at vi ønsker å dekode det på hovedtråden

Bildestrategi for logoer og andre synlige (ikke-LCP) bilder

Synlige bilder bør lastes ganske snart under sidelasting, men helst etter LCP-elementet. Vi kan oppnå dette ved å forhåndslaste LCP-elementet. Det vil gi disse synlige bildene deres naturlige, korrekte nedlastingsrekkefølge.

1. Fortell nettleseren at dette bildet ikke skal lazy-lastes ved å sette loading="eager" eller ved å utelate loading-attributten
   
2. Sett decoding="async" siden dette elementet trygt kan dekodes utenfor hovedtråden!

Bildestrategi for bilder under folden

Alle bilder under folden bør lazy-lastes. Så enkelt er det! Det finnes ingen unntak!

1. Fortell nettleseren at dette bildet skal lazy-lastes ved å sette loading="lazy"
   
2. Sett decoding="async" siden dette elementet trygt kan dekodes utenfor hovedtråden!

Unngå bakgrunnsbilder

Hvis du bruker bakgrunnsbilder, må du vurdere dette på nytt. Bakgrunnsbilder kan ikke lazy-lastes, og du kan ikke kontrollere decoding-egenskapen, og du kan ikke sette fetchpriority. Bakgrunnsbilder er vanligvis ikke responsive, noe som sannsynligvis koster deg mye båndbredde. Men viktigst av alt oppdages bakgrunnsbilder vanligvis etter at nettleseren har lastet ned CSS-filene. Dette er nesten aldri riktig tidspunkt å utløse en bildenedlasting!

Du kan bruke vanlige bildetagger i kombinasjon med CSS object-fit:cover for å få vanlige bilder til å oppføre seg som bakgrunnsbilder!