Websivun vippaskonsteja optimointiin

[weatherc]

Tässä muutama vippaskonsti johon törmasin kun Googlasin että miten voisi saada alas niin HTML-requestejä kun itse palvelimen rasitustakin ja noin muutenkin pikkasen optimoida sivua...

1. Gzip:aa sivusi
Tämä on ehdoton jos vaan palvelin tukee sitä, nimittäin pakkaa sivusi (kyllä, selaimet tukevat sitä), esimerkkinä NWN:än sivu pieneni 160+ Kb:stä alle 30 Kb:iin. Todella helppo "asentaa", laita sivun alkuun ennen muuta php-koodia:

Koodi [Valitse] Laajenna

<?php
ob_start("ob_gzhandler");
?>
Se on siinä.

2. Kuvien koot
Kuvat ovat useimmiten se suurin kasitaa vievä osuus sivusta ja ne ovat monesti aivan liian suuria, turhaan. Yksi monesta kuva-optimointi-ohjemista löytyy tästä: Radical Imageoptimizer, kyseessä on ilmainen ohjelma jolla voi tutkailla kuvaa, ja tallentaa sen eri muotihin eri asetuksilla. Ohjelmaa näyttää suoraan ruudulla että mikä tulee kuvan kooksi. Esim. pienesin 130 Kb:n kuvan 25 Kb:iin. Eli kannattaa tehdä varsinkin isoilla kuvilla.

3. Turhat pois css-tiedostosta
Tutkaile css-tiedostoa ettei siinä ole turhia kuvia taustakuvina jota et enää käytä, latautuvat nimittäin joka sivulatauksen yhteydessä (mikäli kuva ei ole kävijän selaimen välimuistissa).

2. .htaccess-tiedoston hyväksikäyttö
Apache-palvelinta käyttävillä pystyvät tekemään aika monia jekkuja .htaccess-tiedostolla. Löysin aivan loistavan oppaan täältä, ei kannata pelästyä sivun otsikointia .htaccess-tiedoston voi laittaa joko juureen jolloin se kattaa koko sivuston tai sitten vain johonkin kansioon, siten että alapuolella oleva .htaccess aina korvaa ylempänä olevan.
Tässä muutama pikavinkki:
- Käyttää hyväkseen selaimen välimuistia tiedostoilla jota ei päivity usein, kuten ikonit, kuvat, js, css-filut. Turhaan niitä ladataan joka kerta. Tässä kohtaa mainittakoon että usein muuttuvat kuvat (webkamera, tutka yms.) kannataa pitää eri kansiossa kun "pysyvät" jolloin voidaan laittaa niille ihan omat asetukset.
Esimerkki miten asetetaan raja 5 päivään jolloin sitä ei haeta palvelimelta ennen sitä, jos se jo löytyy selamen välimuistista:

Koodi [Valitse] Laajenna

# cache images and flash content for 5 days
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=432000"
</FilesMatch>
Saman kannataa tehdä css ja js-tiedostoille.
- Hotlinkesto. Tässä se varsinainn kaistansäästäjä.

Koodi [Valitse] Laajenna

# stop hotlinking and serve alternate content
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?sinundoamin\.net/.*$ [NC]
RewriteRule .*\.(gif|jpg|png)$ http://www.sinundomain.net/hotlinked.jpe [R,NC,L]
Eli jokainen sivu joka käyttää kuvaasi paisti sinundomain.net näkee haetun kuvan sijaan kuvan hotlinked.jpe. Siihen voi laittaa ihan minkä rosvon haluaa
- Poistaa listauksen näkyvistä jolloin on vaikeampaa löytää tiedosto (tämä joka näkyy jollei ole index-tiedostoa), kannataa laitaa joka kansioon tai juureen

Koodi [Valitse] Laajenna

# disable directory browsing
Options All -Indexes

Ja kun laiteaan kaikki yhteen tulee:

Koodi [Valitse] Laajenna

# disable directory browsing
Options All -Indexes

# cache images and flash content for 5 days
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=432000"
</FilesMatch>

# cache text, css, and javascript files for 5 days
<FilesMatch ".(js|css|pdf)$">
Header set Cache-Control "max-age=432000"
</FilesMatch>

# stop hotlinking and serve alternate content
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?sinundomain\.net/.*$ [NC]
RewriteRule .*\.(gif|jpg|png)$ http://www.sinundomain.net/hotlinked.jpe [R,NC,L]

Tämän tallentaa muotoon .htaccess (huomaa pilkku alussa ja ei päätettä loppuun)

5. js ja css-tiedostojen pakkaminen ja yhdistäminen
Tämä on jo pikkasen enemmän pro-juttu mutta se on kokeilussa nordicweatherillä. Sivuillahan on nykyään usein monta js ja css-tiedostoa jotka syövät kaistaa ja requestejä. Tämä yhdistää ne yhdeksi per muoto ja vielä gzippaa ne pienemmäksi (taas säästyy 70% kaistasta), nimittäin minify.
Ihan simppeli asentaa sivulle ja kun tekee ohjeiden mukaan niin johan toimii


6. Käyttää jaettua tiedostoa
Siis mitä? Jeps, moni juttu käyttää tänä päivänä JQuery-javaskriptipakettia (mm NWN). Tämä vaatii aina sen perusmoottorin latautuvaksi sivulle ja se on noin 50 Kb eli kohtalaisen iso. Löysin jekun tähän, Googlelta löytyy jaettuna tämä tiedosto ja jos käyttää sitä sen oman tiedoston sijaan (A) säästää omaa kaistaa ja (B) mitä enemmän sivustoja käyttää tätä sen suurempi on mahdollisuus että tiedosto löytyy jo kävijän selaimen välimuistista jolloin sitä ei ladata ollenkaan. Tuo Googleversio kun vanhenee vasta 5 päivän päästä.
Tämä on testattu nordicweatherin testisivustolla ja todettu toimivaksi ja esim tulevat NWN-versiot tulevat käyttämään tätä.

[weatherc]

Osa noista .htaccess-syteemeistä ei toimi wx-VPS:llä (vielä), tarvittava moduuli puuttuu..hrmm...Tuli vaan että "Server has a boo boo" (=500 Internal server error)