Tärkeää: Ota varmuuskopio tiedostoista ennen aloitusta.
Varsinkin ensimmäisellä kerralla testaa jokaisen vaiheen välillä että banneri vielä toimii.
1. vaihe: createjs-riippuvuuden vaihto
Aloita linkittämällä createjs ulkoiseen, alkuperäiseen tiedostoon.
Etsi rivi:
<script src="libs/1.0.0/createjs.min.js"></script>
Korvaa se tällä:
2. vaihe: Javascriptin pakkaus
Etsi rivi:
<script>
ja leikkaa (Ctrl + X tai Cmd + X) siitä alkava koodi kunnes vastaan tulee
</script>
Avaa createjs-skriptiä seuraava javascript-tiedosto, joka on yleensä saman niminen kuin muokattava html-tiedosto.
Esimerkissä se on 200811_NAT_nettibanneri_300x250.js
Liitä leikattu koodi tiedoston loppuun edellisen koodin perään viimeiseksi.
Tämän jälkeen valitse koko tiedoston sisältö ja kopioi se leikepöydälle (Ctrl + A & Ctrl + C tai Cmd + A & Cmd C).
Mene osoitteeseen https://www.uglifyjs.net
Liitä leikepöydälle kopioimasi koodi tekstikenttään. Valintalaatikoista ei tarvitse valita mitään, klikkaa vain ”Minify”.
Tämän jälkeen alapuolelle pitäisi ilmestyä tiivistetty koodi erilliseen tekstikenttään.
Avaa html-tiedosto ja liitä tiivistetty koodi
<script></script> -tagien sisälle kuten esimerkissä:
Poista sisäiseen javascript (.js)-tiedostoon osoittava rivi, joka on esimerkissä
<script src="200811_NAT_nettibanneri_300x250.js"></script>
3. vaihe: clicktagin lisäys
Etsi rivi
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
Liitä sen perään:
Etsi seuraava kohta ja lisää perään:
<body onload="init();" style="margin:0px;">
</body>
4. vaihe: Pakkaa html
Valitse ja leikkaa (Ctrl + A & Ctrl + X tai Cmd + A & Cmd + X) koko html-tiedoston sisältö leikepöydälle.
Navigoi osoitteeseen http://minifycode.com/html-minifier/
Liitä leikepöydän sisältö tekstikenttään ja klikkaa Minify.
Avaa html-tiedosto ja liitä sinne tiivistetty html.
5. vaihe: Kuvien pakkaus
Avaa images-kansio ja formaatista riippuen avaa
https://compressjpeg.com (jpg/jpeg-kuvat)
https://compresspng.com (png-kuvat)
Suosi jpg-kuvia jos mahdollista, eikä ole tarvetta korkealle laadulle tai läpinäkyvyydelle.
Korvaa alkuperäiset kuvat pakatuilla versioilla. Huomaa että sivusto lisää min-jälkiliitteen kuviin, varmista että tallennat kuvat niiden alkuperäisillä nimillä.
6. vaihe: Poista ylimääräiset
Tallenna ja testaa.
Poista ylimääräiset tiedostot ja kansiot, pakattaviin tiedostoihin ei pitäisi kuulua muuta kuin html-tiedosto ja images-kansio.
