Näin saat kuvat latautumaan nopeammin verkkosivustolla
Viisi muutosta, jotka keventävät kuvia millä tahansa sivustolla, vaikutuksen mukaisessa järjestyksessä.
Useimmilla verkkosivustoilla kuvat muodostavat suurimman osan siitä, mitä kävijä lataa. Yksi optimoimaton puhelinkuva voi painaa enemmän kuin koko muu sivu yhteensä. Kuvien korjaaminen on yleensä suurin ja halvin saatavilla oleva nopeusparannus, ja nopeammat sivut sijoittuvat paremmin hakutuloksissa, pitävät kävijät pidempään ja tuovat enemmän kauppaa.
1. Lähetä kuvat palvelimelle siinä koossa, jossa ne näytetään
Suoraan puhelimesta tuleva kuva on vähintään 4000 pikseliä leveä. Verkkosivun sisältöpalsta on harvoin yli 1200 pikseliä leveä, ja kortti tai pikkukuva on paljon kapeampi. Selain lataa jokaisen ylimääräisen pikselin ja heittää sen sitten pois. Muuta koko ennen kuin lähetät kuvan palvelimelle: noin 2000 pikseliä leveäksi koko leveyden bannereissa (jotta ne pysyvät terävinä tarkoilla näytöillä), 1200-1600 sisältökuvissa ja 600-800 korteissa. Koonmuutostyökalu käsittelee kokonaisen kansion kerralla.
2. Pakkaa
Kun mitat ovat oikeat, pakkaus hoitaa loput. Laadulla 80 tallennettu kuva näyttää verkkosivulla täsmälleen samalta kuin laadulla 100 tallennettu, ja se on usein kolmanneksen kokoinen. Kuvien pakkaustyökalu käsittelee tiedostoja erissä ja näyttää säästön jokaisesta tiedostosta.
3. Käytä WebP-muotoa
Kaikki ajantasaiset selaimet tukevat WebP-muotoa, ja se on tyypillisesti 25-35 % pienempi kuin JPG samalla näkyvällä laadulla. Lisäksi sen läpinäkyvyystuki tekee siitä korvaajan myös monille PNG-kuville. Muunna JPG WebP:ksi tai PNG WebP:ksi -työkalulla. AVIF on vielä pienempi, mutta sen koodaus on hitaampaa eivätkä lähetysjärjestelmät tue sitä yhtä yleisesti, joten WebP on käytännöllinen oletusvalinta.
4. Valitse sisällölle oikea muoto
| Sisältö | Paras muoto |
|---|---|
| Valokuvat | WebP, tai JPG, jos WebP ei kelpaa |
| Logot ja kuvakkeet | SVG, jos sellainen on, muuten PNG tai WebP |
| Kuvakaappaukset, joissa on tekstiä | PNG tai häviötön WebP |
| Yksinkertaiset animaatiot | Lyhyt video GIF:n sijaan |
5. Auta selainta lataamaan kuvat järkevästi
- Laiska lataus. Ensimmäisen näkymän alapuolella olevat kuvat pitäisi ladata vasta, kun kävijä vierittää niiden lähelle. Useimmat alustat tekevät tämän automaattisesti. Pelkässä HTML:ssä lisää loading="lazy" niihin img-tageihin, jotka eivät näy heti.
- Mitat. Anna jokaiselle kuvalle leveys ja korkeus, jotta sivu ei hypi kuvien latautuessa. Asettelun siirtymä on yksi Googlen Core Web Vitals -mittareista.
- Pääkuva ensin. Sivun yläosan suurta kuvaa, joka yleensä lasketaan Largest Contentful Paint -elementiksi, ei pidä koskaan ladata laiskasti. Sen pitää latautua mahdollisimman aikaisin.
Kuinka suuri ero sillä on
Tyypillinen sivu, jolla on kymmenen kuvaa suoraan puhelimesta, voi painaa 30 MB. Kun kuvat muutetaan järkevän levyisiksi ja pakataan, sama sivu on yleensä noin 2 MB. WebP-muotoon muunnettuna se on lähempänä 1,4 MB:tä. Mobiiliyhteydellä se on ero sivun, joka ilmestyy sekunnissa, ja sivun, jonka moni kävijä hylkää, välillä.
Tulosten tarkistaminen
Googlen PageSpeed Insights ja Chromen kehittäjätyökalujen Lighthouse-paneeli listaavat molemmat liian suuret kuvat, kuvat, joiden pitäisi olla WebP-muodossa, sekä Largest Contentful Paint -elementin. Aja ne ennen ja jälkeen muutosten ja keskity ensin sivuihin, joilla on eniten kävijöitä.