Miten Innota on niin nopea - osa I

Innotan ansiosta todella nopeiden sivustojen tekeminen on helpompaa kuin koskaan. Tässä on (hieman tekninen) kuvaus siitä, miten Innota toimii niin nopeasti globaalissa ympäristössä.

Tämä on ensimmäinen osa kolmeosaisessa sarjassa. Keskitymme näihin kolmeen tärkeimpään asiaan, joiden avulla verkkosivustoista tehdään mahdollisimman nopeita:

  1. Osa I: Siirrettävän tiedon minimoiminen
  2. Osa II: Tiedon siirtäminen niin nopeasti kuin mahdollista
  3. Osa III: Välimuistin hyödyntäminen

Siirrettävän tiedon minimoiminen

Tämä saattaa kuulostaa itsestäänselvältä, mutta asia ei ole aivan niin yksinkertainen. Tietysti voi kirjoittaa lyhyempiä blogikirjoituksia, mutta tässä kirjoituksessa keskitymme pakkaamiseen, kuvien skaalaamiseen, minifikaatioon ja palvelimelle tehtävien latausten määrän pienentämiseen.

Pakkaaminen

Verkkosivujen keskikoko on kasvanut viime vuosina hurjasti (tilastietoa vuodelta 2014). Jotta siirrettävien tiedostojen koko olisi mahdollisimman pieni, Innota pakkaa tiedostot.

Se tarkoittaa, että Innotan palvelinten ja verkkosivulla vierailevan käyttäjän välillä siirretään vähemmän dataa. Kaikki voittavat:

  • Sivustosi siirtää vähemmän dataa
  • Sivuston vierailijan tarvitsee siirtää vähemmän dataa
  • Parempi käyttökokemus, koska sivusto latautuu nopeasti
  • Parempi sijoittuminen hakukoneiden listauksissa

Teknisesti tämä on melko yksinertaista, eikä sinun tarvitse tehdään yhtään mitään. Innota hoitaa pakkaamisen automaattisesti taustalla.

Otetaan käytännön esimerkki, meidän oma blogi. Tällä hetkellä ilman pakkausta etusivun koko on 8.0KB. gzip-pakkauksen jälkeen sivun koko on enä 2.4KB. Aika huima pudotus!

Kaikki tämä kertautuu mitä enemmän kävijöitä sivustolla on. Jos sivustolla on tuhansia kävijöitä päivittäin, tulee tästä jo huima säästö. Voit itse laskea tarkemmin, jos haluat :)

Kuvien skaalaaminen

Kaikki verkkosivut ovat nykyään täynnä kuvia. Useimmat kuvaformaatit on jo itsessään pakattu, ja edellä kuvattu tapa ei toimi kuvien kohdalla niin hyvin kuin tekstitiedostojen.

Paras tapa optimoida kuvien lataaminen on varmistaa, että kuvan resoluutio on oikea käyttötarkoitus huomioiden. Kuvien skaalaaminen Photoshopissa voi olla aika vievää varsinkin jos kuvia on paljon.

Onneksi Innotassa on helppo tapa skaalata kuvat käyttötarkoitukseen sopivaksi. Katsotaan esimerkiksi tätä blogikirjoitusta. Otsikkokuvana on kuva raketista (kyllä, piirsin sen ihan itse :) ja kuvan alkuperäinen koko on 1920x1080 pikseliä.

Tämän blogin sisältöpalsta näytetään enimmillään 605 pikseliä leveänä. Tässä tapauksessa ei ole mitään järkeä käyttää täyden resoluution kuvaa, koska käyttäjät näkevtä sen kuitenkin vain 605 pikseliä leveänä. Voisin skaalata kuvan Photoshopissa, mutta Innotassa se on vielä helpompaa. Sivuston teemassa kuvan skaalaminen on tehty näin:

{% if page.image %}
    <img src="{{ image(page.image, { width: 605 }) }}" />
{% endif %}

Tästä näkee hienosti kuinka tehokkaita templaatit Innotassa on. Ensimmäisellä rivillä tarkistetaan, onko sivulla otskkokuvaa. Jos on, käytämme image()-funktiota kuvan osoitteen hakemiseen, mutta haluammekin kuvan skaalattuna 605 pikseliä leveäksi. Tämä on niin helppoa, että ei ole mitään järkeä olla skaalaamatta kuvia.

Tässä tapauksessa säästö kuvan koossa on aika dramaattinen. Alkuperäisen 1920x1080 kokoisen kuvan koko on 203KB, ja skaalattuna kokoon 605x330 pikseliä kuvan koko on enää 35KB. Se on alle 20% alkuperäisestä.

Sisällön minifikaatio

Minifikaatio on prosessi, jossa verkkosivun tyylitiedostoista ja skripteistä poistetaan kaikki ylimääräiset merkit.

Esimerkiksi JavaScript-tiedostoissa on yleensä paljon kommentteja (toivottavasti!), jotta koodin ymmärtäminen ja kehittäminen olisi helpompaa. Ongelma tässä on se, että julkaistulla verkkosivulla kommentit ovat turhia, koska skriptejä ei ole tarkoitettu toisille koodareille vaan verkkosivulla kävijän selaimelle.

Selain ei tarvitse koodin kommentteja mihinkään. Sille riittää pelkkää JavaScript-koodi. Tässä vaiheessa minifikaatio auttaa.

Innota minifoi automaattisesti tyylitiedostot ja JavaScript-tiedostot. Käytännössä Innota poistaa tiedostoista kaikki turhat merkit, kuten tyhjät rivit ja kommentit, joita selain ei tiedoston prosessointii tarvitse. Näin tiedoston koko saadaan pienemmäksi ja sen lähettäminen käyttäjille on nopeampaa ja tarvitsee vähemmän resursseja.

Minifikaation lisäksi Innota myös yhdistää tyylitiedostot ja skriptit, jotta palvelimelle ei tarvitse lähettää niin montaa pyyntöä.

Palvelinpyyntöjen määrän vähentäminen

Miksi pyyntöjen määrällä on väliä? Hieman yksinkertaistettuna on nopeampaa siirtää yksi iso tiedosto kuin monta pientä. Jokaisen tiedoston siirtäminen vaatii aina jonkin verran ylimääräisiä resursseja.

Tyypillitä verkkosivua ladattaessa selain tekee palvelimelle vain yhden pyynnön ladatakseen html-sivun, mutta html-sivun koodissa selainta ohjeistetaan lataamaan erillisiä tyylitiedostoja ja JavaScript-tiedostoja. Nämä kaikki lisäävät pyyntöjen määrää.

Jotta sivujen tekeminen olisi mahdollisimman helppoa, on usein tapana jakaa tyylitiedostot useampiiin tiedostoihin. Html-koodi saattaa näyttää esimerkiksi tältä:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="buttons.css">
<link rel="stylesheet" href="main.css">

Tyylien ja skriptien jakaminen useampiin tiedostoihin helpottaa kehitystä. Mutta muista, että kaikkien näiden kolmen erillisen tiedoston lataaminen on hitaampaa kuin yhden ison tiedoston, jossa olisi yhdistettynä näiden kaikkien kolmen tiedoston sisältö, lataaminen.

Juurit tässä Innota auttaa. Innota yhdistää ja minifoi automaattisesti kaikki tyylitiedostot ja JavaScript-tiedostot. Innotassa edellä mainitun koodin voisi kirjoittaa yksinkertaisesti näin:

<link rel="stylesheet" href="{{ css_compiled() }}">

Kolmen erillisen tiedoston sijaan ladataan vain yksi tiedosto, jossa on yhdistettynä kaikkien kolmen tiedoston sisältö. Koodissa näkyvä {{ css_compiled() }} on Innotan tapa hakea osoite tiedostoon, jossa on kaikkien tyylitiedostojen sisältö yhdistettynä ja minifoituna.

Yhteenveto

Jos olet kokenut verkkosivujen tekijä, ei tässä kirjoituksessa ollut sinulle luultavasti mitään uutta. Vaikka piirsinkin hienon raketin kirjoitusta varten, ei tämä ole mitän rakettitiedettä.

Itse asiassa nämä kaikki tässä kuvatut tekniikat on ollut olemassa jo jonkin aikaa. Esimerkiksi gzip-pakkaus on ollut käytössä jo 1990-luvun loppupuolelta alkaen.

Innotan suurin innovaatio on se, kuinka helppoa ja täysin automaattista näiden tekniikoiden käyttäminen on. Innota tekee sivujen nopeuden optimoinnista niin helppoa, että ei ole mitään syytä jättää sitä tekemättä.

Jaakko Naakka

Jaakko Naakka

Innotan perustaja. Tehnyt verkkosivuja vuodesta 1996. Koodaa elääkseen peltojen keskellä Etelä-Suomessa.