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

Artikkeli

Otathan huomioon, että tämä artikkeli on yli 14 vuotta vanha, joten sisältö ja linkit eivät ole välttämättä ihan ajan tasalla. Tuoreena lukemisena samasta kategoriasta: Mitä tapahtui RSS-syötteille?.

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

8 kommenttia on “Vieraskynä: Mitä on WPO, Web Performance Optimization?”

  1. Tuossa tuo piplikaalinen sivu, jossa lisää asiasta: http://developer.yahoo.com/performance/rules.html

  2. 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ä :)

  3. 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!

  4. 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ä.

  5. 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ä.

  6. Drupalissa tulee mukana valmiit työkalut sivuvälimuistille ja lohkovälimuistille, sivujen gzip -pakkaukselle (jos serveri ei sitä hanskaa) sekä CSS ja JavaScript-tiedostojen optimoinnille (esim modulien CSS-filet yhdistetään yhdeksi CSS-tiedostoksi).

    Lisämoduleina löytyy erittäin tehokkaita työkkaluja suorituskyvyn parantamiseen:
    http://drupal.org/project/modules?filters=tid%3A123&solrsort=sis_project_release_usage%20desc

  7. […] 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?”. […]

Kommentointi on suljettu.



Vierityspalkki-blogi

Julkaistu vuodesta 2006. Vierityspalkki on blogi kotimaisen internet-alan trendeistä, teknologioista ja alan toimistoista. Seuraa, niin tiedät miten ja kenen toimesta syntyvät parhaat verkkopalvelut, verkkokaupat ja räätälöidyt web-sovellukset.
Lisätietoa blogista ja sen kävijöistä

  • 1140+ asiantuntija-artikkelia.

    Toimitettua asiasisältöä kattavasti teknologioista ja web-alan ilmiöistä. Vierityspalkki nostaa esiin alan puheenaiheita ja tuoretta tutkimustietoa, osallistuu keskusteluun sekä haastattelee alan asiantuntijoita ja toimistoja.

  • 1300+ digipalvelun referenssicasea.

    Julkaisut-palsta tarjoaa näkyvyyttä kiinnostaville uusille verkkopalveluille ja web-sovelluksille, ja antaa asiakkaille mahdollisuuden arvioida eri toimistojen osaamista.

  • 1000+ aktiivista lukijaa blogin kuukausikirjeellä.

    Kerran kuukaudessa ilmestyvä kuukausikirje koostaa julkaistut artikkelit, uudet julkaisut, avoimet työpaikat ja ajankohtaiset linkkivinkit.

  • 29 kokenutta digitoimistoa

    on päässyt aina ajantasaiselle Toimistot-listalle. Lista on auttanut asiakkaita löytämään kokeneita digitoimistokumppaneita jo usean vuoden ajan. Lista keskittyy WordPress-osaajiin ja räätälöityjen web-sovellusten tekijöihin.

Tilaa kuukausikirje

Kerran kuukaudessa ilmestyvä uutiskirje koostaa artikkelit, julkaisut, työpaikat ja linkkivinkit. Kirjeellä on jo yli 1000 tilaajaa.
Huom. Sähköpostiosoitettasi ei luovuteta eteenpäin, eikä käytetä mihinkään muuhun tarkoitukseen.

Siirry takaisin sivun alkuun