Johdanto verkkokauppaan -opas
Lataa ilmainen verkkokauppaopas, joka johdattaa sinut verkkokaupan maailmaan ja antaa vinkkejä paremman nettikaupan rakentamiseksi.
Lataa ilmainen opas »
kirjoitti 5.7.2010 kategoriaan Interface-merkkaus Verkkokaupan kehittäminen avainsanoilla Konversio Verkkokaupan kehittäminen: 3
Yhdistä, minimoi ja pakkaa verkkokauppasi javascript- ja CSS-tyylitiedostot helposti
Verkkokaupan latautumisnopeus on yksi kriittisimmistä myyntiin vaikuttavista seikoista ja se on myös usein unohdettu ja pahoin laiminlyöty. Yksi eniten sivun lataamista hidastavista seikoista on useiden tyyli- eli css- ja javascript-tiedostojen hakeminen verkkokaupan ulkoasuun.
Usein saatetaan ladata erikseen joku javascript-kirjastoista, useita plugineita sekä omia skriptejä. Lisäksi tyylitiedostot saattavat olla selkeyden vuoksi pilkottuna useisiin eri tiedostoihin, jolloin kymmenet yhtäaikaiset tiedostohaut hidastavat lataamista kohtuuttomasti.
Meillä on nyt tähän tehokas lääke: Interface-tagi, jolla pystyt yhdistämään ja minimoimaan verkkokauppasi javascript- ja tyylitiedostot yhdeksi tiedostoksi, josta on poistettu ylimääräiset välilyönnit, tabulaattorit ja rivinvaihdot. Lisäksi palvelimemme pakkaa lähetettävät tiedostot gzipillä, joka pienentää niiden kokoa huomattavasti. Tästä on myös se hyöty, että pystyt pitämään alkuperäiset tiedostosi mahdollisimman selkeinä välittämättä ylimääräisistä rivivaihdoista tai tiedostojen määristä.
Voit käyttää komentoa yksinkertaisesti vaihtamalla tyylitiedostokutsut tagiin {MinifyCSS(files:’css/base.css|css/base.forms.css|css/master.css’} ja javascript-tiedostojen kutsut tagiin {MinifyJS(files:’js/jquery.js|js/plugin.js,js/main.js’}. Eri tiedostot erotellaan files attribuutin sisällä putkimerkillä.
Tämä komento on samalla otettu käyttöön oletusulkoasussa, joka on jo ennestään ollut salamannopea latautumaan ja tämä entisestään nopeuttaa sivulatauksia.
Kommentit
kommentoi 6.7.2010: …
Moi Ari
Jos sinulla on esim. header.html tiedosto, joka tulostaa jokaisen sivun yläosan ja siellä kutsuttu css-tiedostoja ja skriptejä tageilla tyyliin:
<script type="text/javascript" src="/files/{Theme}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/files/{Theme}/js/jquery.innerfade.js"></script>
<script type="text/javascript" src="/files/{Theme}/js/jquery.jcarousel.js"></script>
Nämä kutsut aiheuttavat sen, että asiakkaan selain hakee jokaisen javascript-tiedoston erikseen palvelimelta. HTTP-protokollassa yhtäaikaiset yhteydet palvelimelle on myös rajoitettu kahteen, joten selain hakee tiedostoja kaksi kerralla. Tässä tapauksessa tiedostoiksi lasketaan kaikki javascript-, css-, kuva- jne. tiedostot.
Ylläolevat javascriptit voi pakata yhdeksi tiedostoksi erittäin tiiviisti komennolla:
{MinifyJS(files:"/js/jquery-1.3.2.min.js|/js/jquery.innerfade.js|/js/jquery.jcarousel.js")}
Tämän tagin käytöstä tosiaan seuraa ne edut, että:
- tiedostohakuja palvelimelle tulee vähemmän
- tiedostokoko on huomattavasti pienempi tiivistyksen ja pakkauksen vuoksi
- minimoitu tiedosto pyritään säilyttämään mahdollisimman pitkään asiakkaan selaimen välimuistissa, joten seuraavilla sivulatauksilla tiedostoa ei yleensä edes haeta
- kokonaisuutena selain renderöi ulkoasun nopemmin ja pääsee heti lataamaan esim. kuvatiedostoja
Huomaa, ettei {MinifyJS} tagia käytettäessä tiedoston polku määritellään suhteellisenä teeman juuresta (muulloin polun edessä käytettävä /files/teema/ jää siis pois).
kommentoi 6.7.2010: …
Niin ja edelliseen vielä lisäyksenä sen verran, että nuo vanhat kutsut CSS- ja javascript-tiedostoihinhan voi sen jälkeen poistaa, kun Minify tagi on otettu käyttöön.
Ari kommentoi 6.7.2010: …
Yhdistä, minimoi ja pakkaa verkkokauppasi javascript- ja CSS-tyylitiedostot helposti
Kysymys aiheeseen liittyen: minne tagiin lisätään ja mitä mahdollisesti poistetaan????