Kuvat ovat suurin osa sivun painosta

Tyypillisellä sivustolla kuvat ovat suurin yksittäinen erä siitä, mitä käyttäjän laite joutuu lataamaan.

Se näkyy erityisesti mobiiliverkossa, jossa yhteys on hitaampi ja epävakaampi, ja jossa suurin osa kävijöistä on.

Hyvä uutinen on, että tämä on helpoin osa nopeutta korjata. Kuvien käsittely ei vaadi sivuston uudistamista eikä koodin muuttamista.

Oikea koko on tärkein yksittäinen asia

Yleisin virhe on ladata kuva sellaisenaan kamerasta tai puhelimesta.

Nykyaikainen puhelinkuva on tuhansia pikseleitä leveä ja useita megatavuja. Sivulla se näytetään ehkä kahdeksansadan pikselin levyisenä.

Selain lataa koko kuvan ja pienentää sen näytettäväksi. Kaikki ylimääräinen on siirrettyä dataa, joka heitetään pois.

Kuva kannattaa siis skaalata siihen kokoon, jossa se näytetään, ennen kuin se viedään sivustolle. Se yksin voi pudottaa tiedostokoon murto-osaan.

Pakkaus: laatu ei katoa yhtä nopeasti kuin luulet

Valokuvien pakkaus on häviöllistä, ja se on hyvä asia.

Käytännössä valokuvan voi pakata melko voimakkaasti ennen kuin silmä huomaa eroa ruudulla. Ero tiedostokoossa on merkittävä, ero ulkonäössä ei.

Työkaluja tähän on ilmaiseksi sekä selaimessa että työpöydällä. Prosessi on: skaalaa oikeaan kokoon, pakkaa, vertaa alkuperäiseen ruudulla.

Grafiikassa ja logoissa tilanne on toinen. Niissä terävät reunat kärsivät pakkauksesta, ja niille sopii eri tallennusmuoto.

Oikea tiedostomuoto oikeaan tarkoitukseen

Valokuvat kuuluvat häviölliseen muotoon, joka on tehty valokuville.

Logot, kuvakkeet ja grafiikka, joissa on läpinäkyvyyttä tai teräviä reunoja, kuuluvat muotoon joka säilyttää ne.

Vektorigrafiikka on logoille paras, koska se on terävä joka koossa ja se on tyypillisesti hyvin kevyt.

Uudemmat kuvamuodot pakkaavat valokuvat pienemmiksi samalla laadulla, ja niitä tukevat nykyään käytännössä kaikki selaimet. Niiden käyttö on yksi helpoimmista parannuksista.

Lataa vasta kun kuva tulee näkyviin

Sivun alaosassa olevia kuvia ei tarvitse ladata ennen kuin käyttäjä vierittää sinne.

Tämä on nykyään yhden määritteen asia selaimessa, eikä se vaadi mitään erillistä.

Poikkeus on sivun ylin kuva. Se kannattaa ladata heti, koska se on ensimmäinen asia jonka käyttäjä näkee, ja sen viivästyttäminen hidastaa juuri sitä hetkeä jota mitataan.

Varaa kuvalle tila etukäteen

Kun kuvalle ei ole varattu tilaa, sivu hyppää sitä mukaa kun kuvat latautuvat.

Se on ärsyttävää ja se johtaa vääriin klikkauksiin, kun painike siirtyy juuri kun käyttäjä osuu siihen.

Korjaus on kertoa kuvan mitat, jolloin selain varaa tilan ennen kuin kuva on ladattu.

Tämä on myös yksi niistä asioista, joita hakukone mittaa käyttökokemuksena.

Eri kuva eri näytölle

Puhelimen näytöllä ei tarvita samaa kuvaa kuin isolla tietokoneruudulla.

Selaimelle voi tarjota useita kokoja samasta kuvasta ja antaa sen valita sopivin. Silloin puhelin lataa pienen version ja iso näyttö ison.

Tämä on hieman enemmän työtä kuin muut kohdat, ja se kannattaa ainakin niille kuville, jotka näkyvät joka sivulla.

Montako kuvaa sivulla oikeasti tarvitaan

Nopein kuva on se, jota ei ladata.

Moni sivusto on täynnä koristekuvia, jotka eivät kerro mitään: kuvapankin kädenpuristuksia, taustakuvia tekstin takana ja kuvakaruselleja, joita kukaan ei katso loppuun.

Ne maksavat latausaikaa ja ne eivät tuota mitään. Niiden poistaminen on nopein tapa keventää sivua.

Karusellit ovat tästä pahin tapaus: ne lataavat useita kuvia, joista käyttäjä näkee yhden.

Tekstivastine kuuluu jokaiseen kuvaan

Tekstivastine on saavutettavuutta, ja se on myös se, minkä hakukone lukee.

Sisältöä välittävälle kuvalle kirjoitetaan lyhyt kuvaus siitä, mitä kuva kertoo. Koristekuvalle jätetään tyhjä vastine, jolloin ruudunlukija ohittaa sen.

Tiedoston nimi kannattaa myös olla kuvaava. Nimi, jossa lukee mitä kuvassa on, auttaa kuvahaussa.

Tekstiä ei laiteta kuvaan

Hinnasto kuvana, aukioloajat kuvana ja palvelulista kuvana ovat yleisiä ja ne ovat aina virhe.

Hakukone ei lue kuvaa, ruudunlukija ei lue sitä, tekstiä ei voi kopioida eikä sitä voi suurentaa ilman että se sumenee.

Ja sen päivittäminen vaatii kuvankäsittelyohjelman, minkä takia se jää päivittämättä.

Teksti kuuluu tekstiksi. Aina.

Omat kuvat voittavat kuvapankin

Tämä ei liity nopeuteen mutta se liittyy siihen, kannattaako kuva ylipäätään olla.

Kuvapankin kuva tunnistetaan, ja se herättää epäilyn siitä, mikä muu sivustolla ei ole aitoa.

Oma kuva omasta työstä, omista tiloista ja omista ihmisistä vakuuttaa enemmän, vaikka se olisi teknisesti heikompi.

Puhelin riittää, kun valo on hyvä ja tausta siisti.

Video on painavampi kuin kuva

Kaikki kuvista sanottu pätee videoon moninkertaisesti, koska video on kertaluokkaa raskaampi.

Taustavideo etusivulla on yleinen ja se on kallis. Se latautuu ennen kuin käyttäjä näkee mitään, se kuluttaa mobiilidataa ja se harvoin kertoo mitään, mitä hyvä valokuva ei kertoisi.

Jos video on tarpeen, se kannattaa pitää lyhyenä, äänettömänä ja sellaisena ettei se käynnisty itsestään mobiiliverkossa.

Upotettu video ulkopuolisesta palvelusta tuo mukanaan myös seurantaa. Se vaikuttaa evästekäytäntöön, ja moni upotus lataa paljon koodia jo ennen kuin videota on katsottu.

Kevyt ratkaisu on näyttää ensin pelkkä kansikuva ja ladata varsinainen soitin vasta kun käyttäjä painaa toistoa. Se säästää sekä latausaikaa että seurantaa.

Tarkistuslista

  • Onko kuva skaalattu siihen kokoon, jossa se näytetään.
  • Onko se pakattu.
  • Onko muoto oikea sisällölle.
  • Ladataanko alaosan kuvat vasta tarvittaessa.
  • Onko mitat kerrottu, ettei sivu hyppää.
  • Onko jokaisella kuvalla tekstivastine.
  • Onko sivulla kuvia, joita ei tarvita.

Nämä seitsemän käydään läpi iltapäivässä, ja ne ovat useimmilla sivustoilla suurin yksittäinen nopeusparannus, joka on saatavilla.