Varför hastighet spelar roll
Hälften av alla människor stänger en webbplats som tar längre än 3 sekunder att ladda. Dina besökare har inte alla en ny telefon på snabbt Wi-Fi – vissa har en äldre telefon på ett tåg. En projektchef tänker på dem också.
Goda nyheter: den största hastighetsvinsten får du från bara en sak – bilder. Ett foto direkt från en telefon kan lätt vara 5 MB; en webbplats behöver bara en tiondel av det.
Jag visar: mät med Lighthouse
Lighthouse är ett mätverktyg inbyggt i Chrome:
- Öppna din webbplats (live-versionen, inte localhost).
- F12 → fliken Lighthouse → Analyze page load.
- Du får ett resultat 0–100 för prestanda, tillgänglighet, SEO – och viktigast, en lista med specifika tips på vad du kan förbättra.
De vanligaste tipsen och vad du gör åt dem:
| Lighthouse-tips | Vad du gör |
|---|---|
| Properly size images | krymp dina bilder (se nedan) |
| Serve images in next-gen formats | spara dem som WebP |
| Image elements do not have width/height | lägg till width och height-attribut |
| Links do not have descriptive text | i stället för “click here”, säg vart länken går |
Krymp dina bilder
- Dimensioner: en webbplats behöver bara cirka 1200px bredd (ett hero-foto) eller cirka 600px (ett vanligt foto). Du kan ändra storlek i vilken editor som helst, till och med online (t.ex. squoosh.app).
- Format: WebP är ungefär en tredjedel mindre än JPG i samma kvalitet.
- Lazy loading: bilder under fold laddas bara när besökaren scrollar ner till dem:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Nu är det din tur 💪
- Mät din webbplats med Lighthouse och skriv ner ditt prestandaresultat – det är din startlinje.
- Hitta de 3 största bilderna på din webbplats (F12 → fliken Network → sortera efter Size).
- Krymp dem (dimensioner + WebP) och lägg till
loading="lazy"på allt utom den första bilden upptill. - Mät igen och jämför resultat. Skriv i
LAUNCH.md: före → efter. - Bonus: testa din webbplats på telefonen med Wi-Fi avstängt. Hur är det?
Förvänta dig inte 100 poäng. Även stora webbplatser får 70–90. Det som spelar roll är framsteg: att gå från 60 till 85 är en vinst som besökare faktiskt märker.
Kolla: Du känner till ditt Lighthouse-resultat före och efter. Dina bilder är omstorleksändrade, i WebP och använder lazy loading. Din webbplats laddar märkbart snabbare på mobil.
Det här tar du med dig från lektionen
- Hastighet = besökare stannar. 3 sekunder är gränsen.
- Lighthouse berättar exakt vad du ska förbättra.
- Den största hävstången: mindre bilder (dimensioner, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning