Miksi nopeus merkitsee
Puolet ihmisistä sulkee verkkosivun, joka latautuu yli 3 sekuntia. Vierailijasi eivät kaikki ole uudella puhelimella nopealla Wi-Fi:llä – joillakin on vanhempi puhelin junassa. Projektipomo ajattelee heitäkin.
Hyvä uutinen: suurimman nopeusboostin saat yhdestä asiasta – kuvista. Suoraan puhelimesta otettu valokuva voi helposti olla 5 MB; verkkosivu tarvitsee vain kymmenesosan siitä.
Näytän sinulle: mittaa Lighthouseilla
Lighthouse on mittaustyökalu suoraan Chromessa:
- Avaa verkkosivusi (live-versio, ei localhost).
- F12 → Lighthouse-välilehti → Analyze page load.
- Saat pistemäärän 0–100 suorituskyvystä, saavutettavuudesta, SEO:sta – ja tärkeintä, listan tarkoista vihjeistä mitä parantaa.
Yleisimmät vihjeet ja mitä tehdä:
| Lighthouse-vihje | Mitä tehdä |
|---|---|
| Properly size images | pienennä kuvasi (katso alla) |
| Serve images in next-gen formats | tallenna WebP-muodossa |
| Image elements do not have width/height | lisää width- ja height-attribuutit |
| Links do not have descriptive text | sen sijaan että “click here”, kerro minne linkki vie |
Pienennä kuvasi
- Mitat: verkkosivu tarvitsee vain noin 1200px leveyttä (hero-kuva) tai noin 600px (tavallinen kuva). Voit muuttaa kokoa missä tahansa editorissa, jopa verkossa (esim. squoosh.app).
- Muoto: WebP on noin kolmasosan pienempi kuin JPG samalla laadulla.
- Lazy loading: kuvat alapuolella latautuvat vasta kun vierailija scrollaa niihin:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Nyt sinun vuorosi 💪
- Mittaa verkkosivusi Lighthouseilla ja kirjoita suorituskykypistemääräsi – se on lähtöviivasi.
- Etsi 3 suurinta kuvaa verkkosivullasi (F12 → Network-välilehti → lajittele Size).
- Pienennä ne (mitat + WebP) ja lisää
loading="lazy"kaikkeen paitsi ensimmäiseen yläreunan kuvaan. - Mittaa uudelleen ja vertaa pisteitä. Kirjoita
LAUNCH.md:ään: ennen → jälkeen. - Bonus: testaa verkkosivusi puhelimella Wi-Fi pois päältä. Miltä se tuntuu?
Älä odota 100 pistettä. Jopa isot verkkosivut saavat 70–90. Tärkeintä on edistys: 60:sta 85:een on voitto, jonka vierailijat oikeasti huomaavat.
Tarkista: Tiedät Lighthouse-pistemääräsi ennen ja jälkeen. Kuvasi on muutettu kokoa, WebP-muodossa ja käyttävät lazy loadingia. Verkkosivusi latautuu selvästi nopeammin mobiilissa.
Mitä opit tästä oppitunnista
- Nopeus = vierailijat jäävät. 3 sekuntia on raja.
- Lighthouse kertoo tarkalleen mitä parantaa.
- Suurin vipu: pienemmät kuvat (mitat, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot