Latausaikojen nopeuttaminen on tärkeä osa internetmarkkinointia
(Eikä se ole välttämättä kovin monimutkaista)
Latausaikoihin kiinnitetään nykyään valitettavan vähän huomiota. Sivut rakennetaan valmiiksi localhostilla (kotiserverillä), eikä niitä testata todellisilla käyttäjillä. Tilaaja ei halua maksaa lisää serveripuolen optimoinnista eikä kenelläkään ole motivaatiota koeajaa saittia haja-asutusalueen edge-verkossa.
Suorituskyvyn optimointi sekä säästää palvelinkustannuksissa että parantaa verkkosivuston käytettävyyttä. Olen kirjoittanut latausaikojen merkityksestä sivuston liiketoiminnalliseen tehoon aikaisemminkin, mutta tiivistäen voidaan esittää, että optimoinnin hyödyt ovat seuraavat:
- Sivustoa voidaan käytttää myös mobiiliyhteyksillä
- Google huomioi latausajat hakukonenäkyvyydessä (ja luultavasti tulevaisuudessa latausaikojen merkitys tulee kasvamaan)
- Yhteysnopeudesta riippumatta: Mitä nopeammin sivusto latautuu, sitä useammin sitä käytetään. Käyttäjäkokemuksen parantaminen parantaa suoraan niitä liiketoiminnallisia tavoitteita, joita sivustolle on asetettu.
Nyt on kuitenkin aika sukeltaa web-kehityksen ihmeelliseen maailmaan.
Kuinka nopeasti sivustosi latautuu?
Keskimääräiset latausajat selviävät esimerkiksi Google Webmaster Toolsista kohdasta sivuston suorituskyky. (Sivuston liittäminen Webmaster Toolsiin on ilmaista).
Jouhevan surffaamisen tavoiteaika on Jakob Nielsenin mukaan 1 sekunti.
Latausajat selviävät Google webmaster toolsista (kuvaaja esittää tätä sivustoa)
Lähtötilanteen kartoittamisen jälkeen suorituskykyä voidaan alkaa kehittämään.
Yslow on (loistava) työkalu, jolla tarkistat ja mittaat verkkosivustosi suorituskyvyn. Yslow antaa sivustosi suorituskyvylle arvosanan ja kertoo missä kohtaa sivustollasi on parannettavaa.
Tarvitset vain
Yslow ei ainoastaan mittaa suorituskykyä, vaan se myös kertoo mitä sivustolla kannattaa tehdä. Tästä syystä erillisen blogipostauksen tekeminen parhaista käytännöistä on turhaa: Yslow kertoo parhaat käytännöt ilman postaustakin.
Ajattelin kuitenkin kirjoittaa hieman niistä osa-alueista, jotka verkkosivustoilla tuntuvat useimmiten unohtuvan. Tekemällä tässä postauksessa käsitellyt asiat omalla verkkosivustollaan, sivusto latautuu suurella todennäköisyydellä vähintään 50% nopeammin.
Vähennä pyyntöjä
Selaimen palvelimelle lähettämä pyyntö voi näyttää tältä:
GET /tiedostopolku/tiedosto.html
Nettisivujen nopeuteen ei vaikuta pelkästään ladattavan datan koko, vaan olennaista on myös se, kuinka monta eri pyyntöä selaimen tarvitsee tehdä ladatakseen tarvittavat tiedostot. Mitä useampi kuva-, javascript- tai tyylitiedosto ladataan, sitä enemmän pyyntöjä tarvitaan ja sitä hitaampaa sivuston latautuminen on.
Yhdistele tiedostoja: Esimerkiksi javascript ja CSS-tiedostot ovat usein turhaan monessa eri tiedostossa. Kokoamalla yhden tyyli- ja javascript-tiedoston, säästät huomattavan määrän pyyntöjä ilman tiedostokoon kasvua. Pyyntöjä voidaan myös vähentää, vaikka tiedostoja ei yhdistettäisikään:
<link rel=”stylesheet” href=”tiedostopolku/tyyli.css,tyyli2.css,tyyli3.css” />
Yhdistele kuvat: CSS:n avulla yhdestä kuvasta voidaan rakentaa sivustolle (esimerkiksi) navigaatio. Näin vältetään valtava määrä pyyntöjä.
Image spritet voivat näyttää tältä
Hyödynnä cachea
Cache on käyttäjän selaimen väliaikainen muisti. Cachen idea on se, että selaimen ei tarvitse jatkuvasti pyytää jo kertaalleen lähetettyjä tiedostoja palvelimelta vaan se voi lukea tiedostot suoraan cachesta.
Kun välimuistissa oleva tiedosto ei ole muuttunut, palvelin vastaa selaimen pyyntöön 304 Not Modified. Tiedostoa ei siis tarvitse ladata.
Selaimen pyyntö:
GET /tiedostopolku/tiedosto.html
If-Modified-Since: Thu, 13 May 2010 18:04:05 GMT
Palvelimen vastaus:
HTTP/1.1 304 Not Modified
Nykyään suurin osa siirrettävästä datasta on erilaista javascriptiä, logoa, kuvaa ja tyylitiedostoa. Hyödyntämällä cachea, sivusto latautuu huomattavasti nopeammin ja käyttäjät kiittävät.
Cachea voi hyödyntää Apache-palvelimilla .htaccess tiedostosta käsin. Apachesta löytyy mod_expires ja mod_headers moduulit, joiden avulla tiedostojen header-tietoja voidaan muokata.
Tiedostoille voidaan “manuaalisesti” antaa erilaisia cache-määrityksiä niiden käyttötarkoituksen mukaan, kuten seuraavasta mod_headers esimerkistä käy ilmi.
<IfModule mod_headers.c>
<FilesMatch “\.(pdf|flw|swf|gif|jpg|jpeg|png)$”>
Header set Cache-Control “max-age=29030400, public”
#max age = 1 vuosi
</FilesMatch>
<FilesMatch “\.(css|xml|txt|js)$”>
Header set Cache-Control “max-age=2592000, public”
#max age = 1 kuukausi
</FilesMatch>
<FilesMatch “\.(html|htm|php)$”>
Header set Cache-Control “max-age=172800, public”
#max age = 2 päivää
</FilesMatch>
</IfModule>
Pakkaa tiedostot
Tiedostojen Gzip-pakkaamisella saavutetaan usein jopa 70% säästö tiedostokoossa ja käytännössä kaikki selaimet tukevat tiedoston pakkausta.
Apache käyttää tiedostojen pakkaamiseen (versiosta 2.0 eteenpäin) mod_deflate-moduulia. Kätevimmin pakkaaminen onnistuu lisäämällä .htaccessiin seuraavat rivit:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>
Kuvia ja PDF-tiedostoja ei pakata, sillä ne ovat jo pakattuja. Uudelleen pakkaamisesta voi olla vain haittaa.
Kuulostaako vaikealta?
Onneksi teknologiasta on tehty helppoa jopa laiskalle internetmarkkinoijalle. Sivuston suorituskyvyn optimoinnin voi aloittaa käyttämällä esimerkiksi seuraavia valmiita palikoita:
SmartOptimizer on vapaan lähdekoodin PHP-kirjasto, jonka tekee puolestasi valtaosan suorituskyvyn optimoinnista.
- Vähentää jopa 80% CSS- ja Javascript-tiedostokoosta.
- Yhdistelee Javascript ja CSS-pyynnöt
- Vähentää kaistan kulutusta
- Nopeuttaa sivuston latausaikaa huomattavasti
SmartOptimizer pakkaa tiedostot lennossa. Tämä kasvattaa palvelimen kuormitusta hieman verrattuna siihen, että tiedostot lähetettäisiin pakkaamattomina. Tällä on kuitenkin merkitystä vain suuren liikennemäärän sivustoilla.
SmartOptimizer asentamiseen tarvitaan vain pääsy palvelimelle. Lisäksi SmartOptimizer tarvitsee kirjoitusoikeudet Cache-kansioon.
Myös sisällönhallintajärjestelmiin on saatavilla iso joukko suorituskykyä parantavia plugineita. Tällä WordPress-sivustolla on käytössä Scripts Gzip, joka pakkaa ja yhdistelee javascript ja CSS-tiedostot.
Aiheesta muualla:
Blogipostauksen tila on rajallinen. Koska tämä ei ole teknologiablogi, niin aiheesta kiinostuneen kannattaa jatkaa opintojaan esimerkiksi seuraavissa kohteissa: