Bilderna är nästan alltid orsaken till att sidan känns långsam

När en sida känns seg är det lätt att misstänka servern, temat eller alla tillägg. Oftast är svaret enklare: bilderna. På en typisk företagssida står bilderna för den största delen av allt som laddas, och de är också det som är enklast att göra något åt.

Tre justeringar ger mest tillbaka: rätt format, rätt storlek och att bara ladda det som syns.

1. Rätt format

Ett foto som sparas direkt från kameran eller ett bildprogram är ofta betydligt större än det behöver vara.

• WebP ger i regel samma upplevda kvalitet som JPEG till en klart mindre fil, och stöds av alla moderna webbläsare. WordPress kan hantera WebP sedan version 5.8.
• AVIF komprimerar ännu hårdare och stöds av WordPress sedan version 6.5. Det tar längre tid att skapa, så det passar bäst när bilderna konverteras automatiskt.
• SVG för logotyper och ikoner. Det är vektorgrafik, blir skarp i alla storlekar och väger ofta bara några kilobyte.
• PNG bara när bilden behöver genomskinlighet och inte kan vara en SVG. För foton blir PNG nästan alltid onödigt stort.

Ett exempel från den här sidan: en av bilderna på våra tjänstesidor levererades som en PNG på drygt 5 MB. Samma bild som WebP, i samma upplösning, blev under 200 kB — utan någon synlig skillnad.

2. Rätt storlek

Det vanligaste misstaget är att ladda upp en bild som är 4 000 pixlar bred och visa den i en ruta som är 400 pixlar. Webbläsaren skalar ned den, men besökaren har redan hämtat hela filen.

Lösningen är att ha bilden i flera storlekar och låta webbläsaren välja. Det görs med attributen srcset och sizes:

<img
  src="bild-800.webp"
  srcset="bild-400.webp 400w, bild-800.webp 800w, bild-1600.webp 1600w"
  sizes="(min-width: 900px) 50vw, 100vw"
  width="1600"
  height="900"
  alt="Beskrivning av bilden"
/>

srcset talar om vilka storlekar som finns. sizes talar om hur bred bilden blir på sidan. Med de två uppgifterna väljer webbläsaren den minsta fil som räcker — på en mobil är det ofta en bråkdel av originalet.

WordPress skapar flera storlekar och skriver srcset automatiskt för bilder som läggs in via mediebiblioteket. Det som ofta brister är sizes, som WordPress inte alltid kan gissa rätt. Ett tema som anger rätt värde för sina bildrutor kan spara mycket på mobilen.

Ange också alltid width och height. Då vet webbläsaren bildens proportioner innan den har laddats, och texten hoppar inte ned när bilden dyker upp.

3. Ladda bara det som syns

En sida med tjugo bilder behöver inte hämta alla direkt. Bilder längre ned kan vänta tills besökaren scrollar dit:

<img src="bild.webp" loading="lazy" alt="…" />

Men det finns ett viktigt undantag: bilden högst upp ska inte lazy-laddas. Den stora bilden som syns direkt är ofta det webbläsaren mäter som sidans största element, och att vänta med den gör att sidan upplevs som långsammare. Den bilden får i stället gärna högre prioritet:

<img src="hero.webp" fetchpriority="high" alt="…" />

WordPress lägger till loading="lazy" automatiskt, och sedan version 6.3 försöker det undvika att göra det på den första bilden. Det är ändå värt att kontrollera på sidor med ovanlig uppbyggnad.

Hur vet man om det hjälpt?

Kör sidan genom Lighthouse, som finns inbyggt i Chrome och Edge under utvecklarverktygen. Välj mobil — det är där skillnaden syns mest. Titta särskilt på:

• Largest Contentful Paint, hur lång tid det tar innan det största elementet syns. Under 2,5 sekunder räknas som bra.
• Cumulative Layout Shift, hur mycket innehållet hoppar när sidan laddas. Saknade width och height på bilder är en vanlig orsak.
• Förslagen om bildformat och bildstorlekar, som visar hur mycket som går att spara.

Sammanfattning

1. Spara foton som WebP eller AVIF, logotyper som SVG.
2. Ha bilderna i flera storlekar och ange sizes.
3. Sätt alltid width och height.
4. Lazy-ladda allt utom bilden högst upp.

Det är sällan mer än några timmars jobb, och det är ofta den enskilt största förbättringen en befintlig sida kan få.