Mitä on WPO, Web Performance Optimization?

Vieraskynä-palstallamme on silloin tällöin vierailevana bloggaajana joku Vierityspalkin toimituksen ulkopuolinen taho. Jos olet kiinnostunut vierailemaan Vieraskynä-palstallamme, ota yhteyttä toimitukseen.

________________________

Jussi Mäkinen

Maailmalla leviää uusi akronyymi nimeltä WPO. Artikkelissa tehdään katsaus siihen, mitä termi tarkoittaa ja millaisia töitä asiaan liittyy.

WPO tarkoittaa verkkosivun latautumisen nopeuttamista. Suuri osa työstä liittyy varsinaisen HTML-dokumentin lataamisen jälkeisiin asioihin: tyylitiedostojen, kuvien sekä javascript-koodin latautumiseen ja käsittelyyn. Mm. Yahoo ja Google ovat paljon tutkineet keinoja nopeuttaa verkkosivujen latautumista ja Google myös nykyään arvostaa joissakin tapauksissa sivun latautumisen nopeutta hakutuloksissaan.

Kuumilla aiheilla pitää olla oma akronyymi ja Googlen Steve Souders antoi tälle optimoinnille nimen WPO (Web Performance Optimization). WPO-termiin on haluttu saada samanlaista kaikua mikä on SEO:lla (Search Engine Optimization), koska molemmat pyrkivät lisäämään verkkopalvelun kävijöitä. Kuumiin aiheisiin kuuluu myös kilpailua: loka–marraskuussa parhaasta WPO-suorituksesta kisaillaankin osoitteessa http://webperf-contest.com/ (*linkki poistettu toimimattomana*).

WPO:n tarpeellisuutta voidaan perustella kasvavalla kävijätyytyväisyydellä, pienentyvällä tiedonsiirtotarpeella ja konversioiden lisääntymisellä. Esimerkiksi Mozilla kasvatti selaimensa latausmääriä 15,4% nopeuttamalla lataussivunsa latautumista. Eniten WPO-työstä iloitsevat kuitenkin mobiiliyhteydellä surffailevat kävijät, koska 3G-verkon nopeus ei pärjää kiinteälle yhteydelle ja latenssikin on suurempi.

Vaikka osa WPO-tekniikoista vaatii enemmän perehtymistä, alkuun pääsee varsin helposti. Seuraavaksi on listattu viisi toimenpidettä, joilla verkkopalveluun saa lisää vauhtia:

1. Vältä turhia DNS-pyyntöjä

Verkkopalvelun selväkielistä www-osoitetta vastaa vähintään yksi IP-osoite ja www-osoitteen muuttamisesta IP-osoitteeksi vastaa DNS-palvelimet. DNS-asetuksiin liittyy kaksi optimointimahdollisuutta:

• CNAME-tietueiden välttäminen, koska löytääkseen oikean IP-osoitteen kävijän nimipalvelin joutuu tekemään kaksi DNS-pyyntöä.
• Aseta pitkä TTL-aika A-tietueille, koska kävijän käyttämä DNS-palvelin tallentaa IP-osoitteen omaan välimuistiinsa enintään täksi ajaksi. Mahdollisten IP-osoitemuutosten yhteydessä TTL-aikaa pitää tietenkin väliaikaisesti lyhentää.

DNS-optimoinnilla voi olla suuri vaikutus nopeuteen, koska samaa DNS-palvelinta saattaa käyttää kymmenet tuhannet kävijät ja mikäli kävijän yhteydentarjoajan DNS-palvelimen välimuistista löytyy jo etsittävä IP-osoite, DNS-vastaus on nopea.

2. Optimoi Javascriptiä

Javascriptin lataaminen ja suorittaminen hidastavat mm. CSS-tiedostojen lataamista, koska selaimet keskeyttävät sivun renderöinnin ja muiden tiedostojen lataamisen ennen kuin javascript-koodi on ladattu. Javascript-koodi tulee joko sijoittaa body-elementin loppuun tai se tulee ladata jollakin asynkronisella menetelmällä.

3. Vältä turhia HTTP-pyyntöjä

Poista CSS-, javascript- tai kuvapyynnöt, jotka saavat palvelimelta 404-vastauksen (Not Found). Tällaiset pyynnöt ovat täysin turhia (ja myös helppoja korjata). Tarkista esimerkiksi Firebug-työkalulla ettei verkkopalvelun perussivuilla ole yhtään 404-vastausta. HTTP-pyyntöjä voidaan vähentää myös yhdistämällä useita kuvia ns. CSS-sprite-kuviksi. Javascript- ja CSS-tiedostojen määrää pitää pyrkiä vähentämään yhdistämällä samantyyppisiä tiedostoja yhteen tiedostoon, koska jokaiseen HTTP-pyyntöön ja vastaukseen liittyy dokumentin kokoa kasvattavia otsaketietoja, kuten esimerkiksi evästeitä.

4. Pienennä tiedostoja

Tekstimuotoisten tiedostojen kokoa on mahdollista pienentää tähän suunnitelluilla työkaluilla, jotka poistavat kommentteja, turhia välilyöntejä ja rivinvaihtoja. Kuvien tiedostokokoja voi pienentää jopa häviöttömästi esim. smush.it-palvelun* avulla. Tekstimuotoisten tiedostojen tarjoaminen kävijöille pakattuna, esim. Apachen mod_deflate-moduulin avulla, vähentää siirrettävien tavujen määrää, vaikka palvelimen suoritinta rasitetaankin tällöin enemmän.

5. Hyödynnä selaimen välimuistia

Hyödynnä selaimen välimuistia asettamalla Expires-otsakkeet tyylitiedostoille, javascript-tiedostoille ja kuvatiedostoille mahdollisimman pitkäkestoisiksi. Jos selaimen välimuistista löytyy tiedosto, jonka expires-arvo on vielä voimassa, selain ei edes tee pyyntöä palvelimelle tästä tiedostosta. Tähän liittyy pieni varjopuoli: mikäli tiedoston sisältö muuttuu, tiedostoon pitää viitata toisella URL-osoitteella, esim. styles_20101012.css. Taitava henkilö tekee www-palvelimelle säännöt, joiden avulla palvelin hylkää alaviivan ja sen jälkeisen aikaleiman ja palauttaa ko. pyynnön tapauksessa styles.css-tiedoston.

Yhteenveto: Verkkopalvelujen ollessa entistä raskaampia kävijöiden pitäminen tyytyväisinä vaatii entistä enemmän huomiota. WPO-tekniikat nopeuttavat verkkosivun latautumista sekä vähentävät selaimen ja palvelimen välistä liikennettä. Nopeuttaminen tapahtuu vähentämällä HTTP-pyyntöjen määrää, pienentämällä tiedostojen kokoa sekä järjestelemällä HTML-dokumenttia uudelleen. WPO:sta hyötyvät eniten suosittujen palveluiden ylläpitäjät sekä hitailla nettiyhteyksillä surffailevat kävijät, mutta ainakin perustekniikat tulisi olla hallussa kaikilla verkkopalveluita rakentavilla henkilöillä.

Kirjoittaja, Jussi Mäkinen, työskentelee Media Cabinet Oy:ssä konsulttina.

(*Toim. huom. Linkkejä poistettu toimimattomina.)