Tämä on kolmeosaisen sarjamme viimeinen osa. Olemme jo kertoneet miten teemme sisällöstä mahdollisimman nopeasti siirrettävää ja miten hyödynnämme palvelimia ympäri maapallon. Nyt keskitymme välimuisteihin.
Keskitymme näihin kolmeen tärkeimpään asiaan tässä kolmeosaisessa sarjassa:
- Osa I: Siirrettävän tiedon minimoiminen
- Osa II: Tiedon siirtäminen niin nopeasti kuin mahdollista
- Osa III: Välimuistin hyödyntäminen
Mikä ihmeen välimuisti?
Hieman yksinkertaistettuna välimuistiin tallennetaan tilapäisesti verkkosivujen sisältöä mahdollisimman lähelle käyttäjää.
Välimuisteja voi olla lähes missä tahansa verkkosivut sisältävän palvelimen ja käyttäjän selaimen välissä. Palvelimella voi olla oma välimuisti, loppukäyttäjän Internet-yhteyden tarjoajalla voi olla oma välimuisti, ja viimeisenä käyttäjän selaimessa on välimuisti.
Välimuistin tavoitteena on vähentää siirrettävän tiedon määrää.
Esimerkiksi, jos avaa hienon kuvan Vespasta, kuva tallennetaan väliaikaisesti lataajan koneelle tai puhelimeen tai mitä laitetta sattuukin käyttämään. Jos saman kuvan avaa uudelleen, laite tietää että kuva on jo ladattu ja käyttäjälle näytetäänkin edelisellä kerralla laitteelle väliaikaisesti tallennettu kopio kuvasta.
Tämä ei ehkä vaikuta kovin isolta asialta, mutta kun katsoo tarkemmin verkkosivuja, huomaa että lähes kaikki sivut sisältävät sisältöä, joka ladataan uudelleen ja uudelleen jokaisella sivulla.
Verkkosivuilla on tyylitiedostoja, JavaScript-tiedostoja ja kuvia kuten yritysten logoja ja niin edelleen. Nämä kaikki tiedostot pysyvät samana kaikilla sivuston sivuilla. Tämän takia välimuistin hyödyntäminen on tärkeeä ja myös hyvin tehokas tapa vähentää siirrettävän tiedon määrää.
Miksi välimuistin hyödyntäminen on tärkeää?
Modernien pilvipalveluiden ansiosta tiedon tallentaminen on melko halpaa. Esimerkiksi 10GB tallentaminen Amazonin tai Googlen pilvipalveluihin maksaa noin $0.3/kk. Melko halpaa.
Mutta tiedon siirtäminen Internetin yli voi olla kallista.
Jos sivustolta siirretään teratavuja tietoa kuukaudessa, voivat kustannukset nousta todella korkeiksi. Myös sivustolla kävijöillä voi olla nettiyhteys, jossa veloitetaan jokaisesta siirretystä bitistä
Verkkosivujen nopeus vaikuttaa myös käyttökokemukseen. Internetiä käytetään yhä enemmän ja enemmän mobiililaitteilla, ja kaikki tietävät miten turhauttavaa on ladata verkkosivuja kun yhteys on huono ja hidas.
Välimusitin hyödyntäminen on teknisesti myös hyvin helppoa, joten sen käyttämättä jättämiselle ei ole mitään syytä.
Välimuistin hyödyntäminen Innotassa
Miten Innota hyödyntää välimuistia? Todella tehokkaasti, kiitos kysymästä ;)
Käytetään tätä blogia konkreettisena esimerkkinä. Jokaisella sivulla on elementtejä, jotka eivät pysyvät samoina kaikilla sivuilla. Esimerkiksi Innota logo yläpalkissa näkyy kaikilla sivuilla.
Kun käyttäjä lataa logon Innotan palvelimelta, Innota lähettää kuvan selaimelle ja kertoo, että sen voi tallentaa välimuistiin ainakin viikoksi.
Ladattujen tiedostojen lisäksi Innota hyödyntää välimuistia myös tyylitiedostojen ja JavaScript-tiedostojen siirtämisessä.
Käytännön esimerkki
Katsotaanpa käytännön esimerkkiä kuinka paljon välimuistin hyödyntäminen oikeasti vähentää tiedonsiirtotarvetta. Käytetään tätä blogia esimerkkinä, ja lasketaan siirrettävän datan määrä ilman välimuistia ja välimuistin kanssa, kun avataan nämä sivut:
Kotisivu -> Blogi -> Avataan ensimmäinen kirjoitus -> Valitaan ensimmäinen tagi performance
Vinkki
Chromen Developer Toolsin avulla on helppoa poistaa välimuisti tilapäisesti käytöstä ja testata sivujen latautumista myös eri Internet-yhteysnopeuksilla.
Sivuilla ladataan myös joitain kolmansien osapuolten sisältöjä, mutta keskitytään tässä esimerkissä vain tietoihin, jotka ladataan Innotan palvelimilta.
| Sivu | Sisällön tyyppi | Ilman välimuistia | Välimuistin kanssa |
|---|---|---|---|
| 1. Kotisivu | HTML | 3.7KB | 3.7KB |
| CSS | 6.7KB | 6.7KB | |
| Kuvat | 57.6KB | 57.6KB | |
| 2. Blogi | HTML | 3.2KB | 3.2KB |
| CSS | 6.7KB | 0KB | |
| Kuvat | 142.4KB | 84.8KB | |
| 3. Ensimmäinen kirjoitus | HTML | 4.0KB | 4.0KB |
| CSS | 6.7KB | 0KB | |
| Kuvat | 122.7KB | 15.3KB | |
| 4. Tagi performance | HTML | 2.9KB | 2.9KB |
| CSS | 6.7KB | 0KB | |
| Kuvat | 142.4KB | 0KB | |
| Yhteensä | HTML | 13.8KB | 13.8KB |
| CSS | 26.8 | 6.7KB | |
| Kuvat | 465.1KB | 157.7KB |
Ilman välimuistia siirretään yhteensä 505.7KB. Kuten huomaat, suuri osa tästä on kuvia ja HTML- ja CSS-tiedostojen osuus on häviävän pieni kuviin verrattuna. HTML- ja CSS-tiedostot ovat pieniä pakkauksen ja minifoinnin ansiosta (näistä tarkemmin tämän blogisarjan ykkösosassa).
Välimuistin kanssa siirrettävän datan määrä on vain 178.2 KB. Tulos on erinomainen! Välimuistin ansiosta siirrettävän tiedon määrä on noin 65% vähemmän kuin alkuperäinen.
Kuten huomaat, suuri osa siirretyn tiedon määrästä tulee kuvista. Kuvien välimuistiin tallentaminen auttaa yllättävän paljon, sillä monet kuvista pysyvät samoina kaikilla eri sivuilla. Esimerkiksi Innotan logo on sama kaikilla sivuilla. Myös blogikirjoituksessa näkyvä kuva ladattiin sekä blogin etusivulla, että blogikirjoituksen omalla sivulla kohdassa kolme.
Kohdassa neljä ladataan vain kuvia, jotka on jo ladattu aiemmilla sivuilla. Kuvien siirtoon menee tasan 0.0KB verrattuna 142.4KB, kun välimuisti ei ole käytössä. Ero on valtava!
Loppusanat
Jos olet kokeneempi verkkosivujen tekijä, tässä ei luultavasti ollut sinulle mitään uutta. Ja olet aivan oikeassa: käytössä ei ole mitään mullistavia uusia keksintöjä ja nämä tekniikat ovat olleet olemassa jo vuosia.
Innota tekee välimuistin hyödyntämisestä kuitenkin naurettavan helppoa. Me olemme säätäneet kaiken valmiiksi, jotta sinun ei tarvitse. Sinun ei tarvitse käyttää monimutkaisia prosesseja tai virittää palvelimia, jotta voisit ottaa kaiken irti välimuisteista.
