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ä:

Bannereiden optimointiohje 1

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

Bannereiden optimointiohje 2
Bannereiden optimointiohje 3

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).

 

Bannereiden optimointiohje 4

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:

Bannereiden optimointiohje 8

Etsi seuraava kohta ja lisää perään:

<body onload="init();" style="margin:0px;">
Etsi
</body>
ja lisää sitä ennen:
Bannereiden optimointiohje 9

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.

Bannereiden optimointiohje 10

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.

Bannereiden optimointiohje 11
Previous Next
Close
Test Caption
Test Description goes like this