Vieraskynä: Mitä on WPO, Web Performance Optimization?

Vieraskyna

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/.

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.

Kommentit

  1. Antti Kokkonen kirjoitti:

    WordPress blogaajia, joita asia kiinnostaa, niin blogissani on aiheesta tauhkaa oikein olan takaa. Aloittelusta ja perustavarasta alkaen, aina viimeisen byten poisviilaamiseen asti…

    WP:ssä W3 Total Cache -pluginilla hoituu liki kaikki (cache, css- ja js-filujen yhdistäminen ja pienentäminen, yms), WP Smush.it plugari hanskaa kuvat automaattisesti ja siinä se melkein onkin. Päälle vähän järkeä widgettien ja ulkoisten scriptien määrään (joita saa tosin hyvin haltuun Total Cache:lla), niin lukijat ei nakkaa pakkia päälle, kun sivu ei 10s jälkeenkään vielä näy.

    Asiaan on tullut hurahdettua niin paljon, että pitänee osallistua tuohon Webperf kisaankin, kiitos linkkivinkistä :)

  2. Jussi Mäkinen kirjoitti:

    weppidevaaja: Joo, tuolla sivulla pääsee hyvin alkuun. Yahoo! on ehkä nyt hieman jäänyt jälkeen WPO-asioissa Soudersin siirryttyä Googlelle.

    Kisaonnea kaikille WPO-kisaajille!

  3. Tapio Nurminen kirjoitti:

    WPO:ssa on yksi syy miksi Drupal on minusta huono(hko) järjestelmä. Oletusarvoisesti Drupal näyttää pukkaavan ulos melkoisen kasan mm. erillisiä CSS-tiedostoja. Drupal-ammattilaiset voinevat oikaista jos olen väärässä.

  4. Mikael kirjoitti:

    Drupalissa tulee kyllä natiivina mukana sivujen pakkaus sekä css+js tiedostojen pakkaaminen, oletusarvoisesti tosin eivät ole päällä joten siinä mielessä olet oikeassa ja noita filuja tuleekin kyllä aikamoinen määrä varsinkin jos on paljon moduuleita käytössä.

  5. “Vuoden web-aiheinen blogi”. Kiitos Tietoviikko. – Vierityspalkki.fi kirjoitti:

    [...] Junkkaalan suosikkiartikkeleita Vierityspalkissa ovat olleet mm. allekirjoittaneen jutut avoimen lähdekoodin julkaisujärjestelmistä (vahvuudet ja heikkoudet, top-10 järjestelmät Suomessa 2010) ja hakukoneoptimoinnin perusteet sisällöntuottajalle. Muita suosikkeja ovat olleet mm. Jaakko Alajoen “Hyvän blogin rakennuspalikat” ja vieraskynäilleen Jussi Mäkisen juttu “Mitä on WPO, Web Performance Optimization?”. [...]

Jätä kommentti