Nettisivujen latautumisaikojen pienentäminen ja siirrettävien tiedostomäärien vähentäminen on viimeisimpiä kiinnostuksen kohteitani. Google antaa jonkin verran painoarvoa niille nettisivuille, jotka latautuvat rivakasti. Myös suoraan käyttäjille surffauskokemus on miellyttävä jos sivun latautumista ei tarvitse odotella. Lisäksi kolmantena plussana on säästää esimerkiksi mobiililaitteiden kuluttamaa siirtokaistaa. Viimeisestä mainitsin jo kertaalleen kirjoituksessa Miten piilottaa turhaa sisältöä kommentoinnin esikatselussa, jossa esiteltiin kikka sulloa kommentoinnin esikatseluvaiheen yhteydessä tavaraa piiloon.
No niin. Ensimmäinen tekstikappale listaa syitä, joiden takia sivun latautumisaikaa ja ladattavan tavaran tiedostomäärää kannattaa pyrkiä kutistamaan. En viitsi yksittäiseen blogimerkintään kirjoitella kaikkia konsteja, joten perkaan aihetta pienemmiksi palasiksi. Nyt on vuorossa CSS-tiedostojen pakkaaminen. Pakkaamaton tyylitiedosto voi sisältää mielin määrin muotoiluasetuksia ja hyvin paljon turhanpäiväistäkin informaatiota. Pakkaamisella tarkoitan juuri turhan datan deletoimista tiedostosta, jotta CSS-tiedoston varsinainen tiedostokoko kutistuu niin paljon kuin se on teknisesti mahdollista.
Viime kuukausina rakentamissani nettisivuissa on kaksi CSS-tiedostoa. Ensimmäinen on sellainen, johon kirjoitan normaalisti ulkoasun määrittelyt. Nimeän tuon tiedoston yleensä yksinkertaisesti tyyliin rakenne.css. Tämän tiedoston lisäksi käytän toista tiedostoa, nimeltään rakenne-kehitys.css. Nämä kaksi tiedostoa tulevat projektin aikana sisältämään tismalleen samat CSS-asetukset. Ne eroavat kuitenkin sillä tavalla, että ensin mainittu rakenne.css on pakattu tiiviiksi koodikimpuksi ja se on juuri se tiedosto, joka on nettisivuston julkisella puolella käytössä.
Kehittäessäni nettisivustoa siirrän kehitystiedostoon selkokieliset CSS-muotoilut, jotta pystyn tulkitsemaan tiedoston sisältöä myöhemminkin ilman merkittävää vaivannäköä. On nimittäin hyvin hankalaa saada selkoa pakatusta tiedostosta. Tämä on siis se prosessi, jota pyrin nettisivuprojekteissa noudattamaan. Tiedoston pakkaaminen on sangen helppo, vain 10 sekunnin pituinen operaatio. Käytän siihen toistaiseksi CSS Drive Galleryn tarjoamaa työkalua. Tuo generaattori sisältää mahdollisuuden skreipata CSS-tiedostosta ylimääräiset tavarat irti. Asetuksiksi kannattaa laittaa:
- Compression mode: Super Compact
- Comments handling: Strip ALL comments
Esimerkki siitä, minkälaista koodia tuo suoltaa, löytyy tämän blogin tyylitiedostosta. Se on osoitteessa kuopassa.net/css/rakenne.css. Toistaiseksi tuo tiedosto on alle 2,6 kilotavua kooltaan pakattuna — pakkaamattomana 3,5 kilotavua. Tiedosto varmaan paisuu mikäli innostun asettamaan blogiin lisää toiminnallisuuksia tai tekemään ulkoasuun lisäyksiä.
