Nopeat nettisivut
Nettisivujen nopeuttaa voidaan parantaa kuvia pakkaamalla, koodia optimoimalla ja palvelimen valinnalla. Myös käyttöliittymän pitää olla selkeä ja sisällön helposti saavutettavissa. Ero hitaiden ja nopeiden nettisivujen välillä mitataan rahassa.
BBC huomasi, että he menettivät 10% kävijöistä jokaista sekuntia kohden, jonka lisäsivät sivujen latausaikaan. Ihmiset ovat siis kärsimättömiä ja häipyvät nopeasti toiselle sivustolle, jos sivut eivät avaudu tai toimi tarpeeksi nopeasti. Sisällön on myös oltava helposti ymmärrettävää.
Hitaat nettisivut ovat asiakkaalle epämiellyttävä käyttökokemus, mutta hakukoneet myös tunnistavat hitauden. Sivujen nopeus on yksi keskeinen kriteeri hakutulosten järjestyksessä.
Nopeat nettisivut eivät vain lataudu nopeasti, mutta myös toimivat ja tuntuvat nopeilta. Niiden käyttöliittymä on selkeä ja sitä on helppo käyttää, sivujen rakenne on mietitty loogiseksi ja tärkein sisältö avautuu ensimmäisenä.
Sivujen nopeutta voidaan mitata eri työkaluilla. Hyviä työkaluja ovat esimerkiksi Googlen PageSpeed Insights ja GTmetrix. Nämä työkalut osaavat antaa varsin hyviä neuvoja teknisestä näkökulmasta mikä sivuja hidastaa ja suositella parannuksia.
Koodin siivous
Joka kerta kun käyttäjä vierailee sivuilla, tekee sivusto pyyntöjä palvelimelta eri HTML-, CSS- ja JavaScript-tiedostoihin. Nämä tiedostot ladataan ensimmäisenä ja estävät sivujen esittämisen kunnes lataus on valmis. On tärkeää miettiä, mitä resursseja sivuilla tarvitaan, voidaanko niitä optimoida ja mahdollisesti poistaa kokonaan.
Monissa valmiissa sivupohjissa ja frameworkeissa on paljon ylimääräistä koodia mukana. Ne ovat luonteeltaan tarkoitettu muokattavaksi ja laajaan käyttötarkoitukseen. Kaikki ominaisuudet jotka eivät ole käytössä, tulisi poistaa ja jättää jäljelle vain tarpeellinen ja käytössä oleva koodi.
Samaa ajatusmallia tulisi käyttää kaikkien käytössä olevien resurssien kanssa. Ladataanko turhia fontteja, niiden käyttämättömiä leikkauksia tai liian laajaa merkistöä? Tuodaanko sivuille kokonainen ikonikirjasto kun käytössä on vain muutama ikoni?
Facebook, Pinterest ja muut sosiaalisen median jakonapit lataavat myös omat resurssinsa sivuille. Samoin chattipalvelut ja analytiikka-työkalut. Kaiken tarpeellisenkin kohdalla on hyvä miettiä, että painaako uusi ominaisuus vaakakupissa enemmän kuin sivujen lisääntynyt latausaika.
Koodin minimointi
Ylimääräisen koodin karsimisen jälkeen pitäisi jäljellä olla enää vain pakollinen koodi. Koodia voidaan edelleen optimoida minifyn avulla.
Minify on tekniikka, joka pienentää eli minimoi koodin. Koodista poistetaan kaikki turhat merkit, kuten ohjelmoijan tekemät kommentit, rivinvaihdot ja välilyönnit. Näiden poistaminen ei muuta koodin toiminnallisuutta.
Koodi ei ole enää ihmissilmälle kovin luettavaa, mutta tietokone ymmärtää sitä hyvin. Koodin minimointi tehdään automaattisesti työkalun avulla eikä näin vaikeuta koodin ylläpidettävyyteen.
Pakkaus
Vaikka koodi on jo minimoitu, sitä saadaan vielä selvästi pienemmäksi pakkaamalla. Tekstimuotoiset resurssit, kuten CSS- tai JavaScript-tiedostot, voidaan pakata Gzipin tai vastaavan tekniikan avulla.
Lähes kaikki nettiselaimet osaavat lukea näitä pakattuja tiedostoja, joten selain purkaa pakatut tiedostot automaattisesti. Tämä ei näy käyttäjälle mitenkään, paitsi nopeampina latausaikoina. Jos selain ei tue pakattuja tiedostoja, se saa tiedot ilman pakkausta.
Kuvien optimointi
Kuvat ovat yleensä suurin yksittäinen tekijä sivujen nopeudessa. Jokaisen kuvan kohdalla oleellinen kysymys kuuluu, että onko kuva ylipäätään tarpeellinen? Turhia kuvia ei tulisi käyttää. Toisaalta, mikään ei myöskään korvaa hyvää kuvaa.
Kuvien optimointi alkaa oikean tyyppisen kuvan valinnalla. Jos kyseessä on yksinkertaista grafiikka, ikoni tai piirroskuva, kannattaa ne esittää vektorimuodossa. SVG-tiedostot ovat yleensä erittäin pieniä ja ne skaalautuvat, eli ovat aina teräviä.
Yleisimpiä rasterikuvien muotoja ovat PNG, JPEG, WebP ja GIF. PNG-tiedostoja käytetään harvoin, yleensä kun tarvitaan kuvassa läpinäkyvyyttä. GIF-tiedostoja käytetään animaatioiden esittämiseen, mutta monesti on tehokkaampaa esittää ne videona.
Kaikki kuvat kannatta pakata. SVG-tiedostoista riisutaan turha koodi pois, rasterikuvat saa pakattua murto-osaan koska kuvien ei yleensä tarvitse olla huipputeräviä. Pakkaamiseen löytyy monia selaimessa toimivia työkaluja kuten Compressor.io tai Imagify. Näppärä työpöytäohjelma on ImageOptim.
Rasterikuvien kohdalla (JPEG, WebP, PNG) on tärkeätä, että kuvat tarjotaan oikean kokoisena kussakin tilanteessa. Valittavan kuvan kokoon vaikuttaa niin näytön koko kuin sen resoluutio. Samaa kuvaa jota käytetään isolla näytöllä, ei tule käyttää puhelimella.
WebP on uudempi, Googlen kehittämä kuvaformaatti, joka on hiljalleen yleistymässä. Tuen parantuessa WebP vaikuttaisi olevan korvaamassa hiljalleen muut rasterikuvamuodot.
Pluginit
WordPressin plugineja eli lisäosia kannattaa käyttää hyvin harkitusti. Huonot ja vanhentuneet lisäosat voivat hidastaa sivuja merkittävästi ja ovat usein myös turvallisuusriski.
Kokonaan lisäosia ei ole tarkoitus välttää, mutta jokaisen kohdalla kannattaa käyttää harkintaa. Käyttämättömät lisäosat kannattaa deaktivoida ja poistaa.
Lisäosien nopeutta ja ja niiden vaikutusta koko sivujen nopeuteen voidaan testata. Jos joku lisäosa toimii erityisen hitaasti, kannattaa etsiä parempi vaihtoehto tilalle.
Nopea käyttökokeums
Nopeat nettisivut eivät tarkoita vain nopeita latausaikoja. Sivujen pitää myös tuntua nopealta ja sisällön löytyä helposti. Hyvin optimoitu koodi tai nopeatkaan yhteydet eivät auta asiaan, jos sivut tuntuvat sekavilta ja huonosti organisoiduilta.
Sivujen navigaation tulee olla selkeä ja looginen. Valikkojen tukena käytetään verkkokaupoissa ja isommilla sivuilla sisäistä hakua, jonka tulee myös toimia hyvin. Sisällön tueksi tehdään nostoja, joilla yritetään ennakoida minne kävijä haluaa mennä seuraavaksi.
Jokaisella sivulla tärkeimmästä sisällöstä tulisi päästä kiinni heti, ilman että sivua tarvitsee selata. Toissijainen sisältö löytyy kun kävijä tutustuu pääasiaan.
Teknisesti sivujen tulee toimia sujuvasti ja vastata käyttäjän toimiin. Sivun selaaminen ei ole nykivää, tuotekaruselli toimii sujuvasti sormella, animaatioilla voidaan tehostaa ja selkeyttää käyttäjän tekemiä toimia.
Sivujen pitäisi myös pysyä nopeina julkaisun jälkeen. Nopeista nettisivuista saa helposti tehtyä hitaat, kun ladataan paljon raskasta sisältöä tai lisätään huonolaatusia lisäosia.
Palvelin
Palvelinten vastausajat ovat yksi oleellinen tekijä sivujen nopeudessa. Kun kävijä siirtyy haluamalleen nettisivulle, selain tekee palvelimelle pyynnön joka palauttaa sivun sisällön käyttäjälle. Hidas tai ylikuormittunut palvelin on siis yksi mahdollinen syy hitaisiin nettisivuihin.
Markkinoiden edullisin palvelin ei yleensä ole paras vaihtoehto, kun halutaan nopeat nettisivut. Erityisesti, jos sivuston kävijämäärä on kasvamassa suuremmaksi, kannattaa miettiä parempaa vaihtoehtoa. Hyvä palvelin kasvaa sivuston mukana ja sille voidaan lisätä resursseja, jotka vastaavat sivuston tarpeisiin ja kävijäpiikkeihin.
Googlen Lighthouse -työkalun avulla voi analysoida sivujen nopeutta, saavutettavuutta, hakukonenäkyvyyttä ja monia muita hyödyllisiä asioita.