Så fixar du PageSpeed-resultat med srcset

Om ditt PageSpeed-resultat sjunker när du lägger till en hero-bild, är problemet oftast enkelt att lösa.

Vad som faktiskt händer

PageSpeed straffar sidor som serverar för stora bilder till små skärmar. Om din hero-bild är 1200px bred och en mobilanvändare ändå laddar ner den, är det bortkastad bandbredd, och det syns i ditt resultat.

Lösningen är srcset. Det talar om för webbläsaren vilken version av en bild som ska laddas baserat på enhetens viewport.

Så implementerar du det

Generera först flera storlekar av din bild:

• 300w, för mobil
• 768w, för surfplattor
• 1200w eller 1536w, för desktop

Referera sedan till alla tre i din HTML:

<img
  srcset="/assets/img/hero.webp 1200w, 
          /assets/img/hero-768px.webp 768w,
          /assets/img/hero-300px.webp 300w"
  src="/assets/img/hero.webp"
  alt="Beskrivning av bilden">

Webbläsaren väljer rätt version. Du behöver varken en CDN eller en bildtjänst.

Några praktiska tips

Använd den faktiska bredden på din originalbild som den största storleken i srcset. Om din bild är 1536px bred, sätt det som max.

För att automatisera bildgenerering är sharp ett pålitligt Node.js-verktyg. Det passar in i vilken build pipeline som helst och hanterar storleksändringen utan externa tjänster.

Den här ändringen tar de flesta sajter från ett underkänt bildresultat till ett godkänt. Det är inte komplicerat, bara inte uppenbart om du inte stött på det tidigare.

Hör av dig om du vill ha hjälp med web-prestanda.