Blog

Gyorsítsd weboldalad! - Első rész

Publikálva: 2013.11.27 07:00
Gyorsítsd weboldalad!

Egy több részes cikksorozatot indítok, ahol a fő téma a weboldalak betöltődési sebességének javítása lesz. Honlapunk gyorsasága kiemelten fontos több szempontból is. Egyrészt a felhasználói élményt nagyban javítja weboldalad betöltődési sebessége. Hiszen ki akarna egy olyan oldalon időzni, ahol hosszú másodperceket kell várni a tartalom eléréséhez? Ahol a felhasználókat nem érik negatív hatások, nem keltünk bennük türelmetlenséget, ott szívesebben elidőznek a felhasználók is. Másrészt a keresőkben is jobb helyezést érhetünk el, ha törekszünk arra, hogy a kiszolgálás a lehető leggyorsabb legyen.

A weboldal betöltődési sebességén könnyedén javíthatunk, csak odafigyelés kérdése. Első körben lépjük meg ezt szerver oldalon. Jobb szolgáltatóknál már erre optimalizált tárhelyet kapunk, vagy lehetőséget arra, hogy mindezt .htaccess fájl segítségével beállíthassuk. Ez én esetemben ez utóbbi volt elérhető. Három fő dolgot kapcsoltam be a .htaccess fájlban, vegyük sorra őket.

KeepAlive On

Ha a KeepAlive nincs bekapcsolva, akkor a böngésző a weboldal minden egyes elemének letöltéséhez új kapcsolatot fog nyitni. Külön kapcsolatot minden egyes képhez, javascript és css fájlhoz. Így a kapcsolatok száma többszöröse lehet ahhoz képest, mintha használnánk ezt a beállítást.

<ifModule mod_headers.c>
	Header set Connection keep-alive
</ifModule>

A httpd.conf-ban, ha van hozzáférésünk, akkor több is beállítható ezzel kapcsolatban. Beállítható időkorlát "KeepAliveTimeout", hogy a következő kérésig maximum hány másodpercet várakozzon. Különben zárja be a kapcsolatot és ha kell majd nyisson a böngésző újat. Testre szabható még, hogy egy kapcsolatban hány kérés hívható, ez a "MaxKeepAliveRequests".

Böngésző gyorsítótárazás

Szerintem ez a beállítás az, ami mellett a legtöbben elmennek és nem veszik figyelembe azt, hogy a böngészőnek átadható, hogy a weboldal egyes elemeit mennyi időre tegye gyorsítótárba. Egy weboldal rengeteg olyan dolgot tartalmaz ami ritkán változik meg, és lehetnek olyan részei is amik gyakrabban. A legritkábban a css és javascript fájlokon módosítunk és pláne nem sűrűn változtatunk a faviconon.

<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 month"

	ExpiresByType image/x-icon "access plus 1 year"
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType image/jpg "access plus 1 month"
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType text/css "access plus 6 months"
	ExpiresByType application/javascript "access plus 6 months"
</IfModule>

Nyugodtan kapcsoljuk be ezt a lehetőséget is. Nem kell attól tartani, hogy a böngésző például az adott css fájlokat cache-eli több hónapra, miközben lehet hamarabb szeretnénk rajta változtatni. Úgy vettem észre, hogy a böngésző van annyira intelligens, hogy figyelembe vesz a fájl utolsó változásának dátumát is. Nem volt problémám annak ellenére, hogy még e gyerekcipőben álló blogom css vagy javascript fájljain sűrűn módosítgatok.

Tömörítés

A tömörítés bekapcsolásához több apache modul is használható. Ilyen a gzip vagy a deflate. Nem árt figyelembe venni, hogy a webszerverünkkel mit küldünk tömörítve. A normál szöveges állományokat nyugodtan tömöríttessük automatikusan. Vagyis a stíluslapokat, javascripteket, xml típusú fájlokat. Ezeknél akár 50-70 százalékos méretcsökkenés is elérhető, kivételes estekben akár több is.

<ifmodule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/javascript application/xhtml+xml application/xml application/rss+xml
</ifmodule>

Média fájlok esetében, mint például a képek és pdf fájlok, már nem biztos, hogy szükséges a tömörítés. Azok már eleve tömörített állapotban vannak és a tömörítésre fordított idő nem fog megtérülni a tömörített fájl méretével. Ennek a finomhangolását inkább kérjük hozzáértő rendszergazdától.

Dióhéjban ennyi. Ennyit tegyünk meg szerver oldalon, hogy weboldalunk sebességét megalapozzuk. Egy weboldal betöltési sebessége több tényezőtől is függ, ezzel a bejegyzéssel még csak célozgattam a gyors weboldal fontosságára. A sorozat folytatásában arról lesz majd szó, hogyan tartsuk szinten az oldalunk gyors betöltődését, miközben honlapunk hétről-hétre hízik tartalmilag, és a beépített funkciókat tekintve is növekszik.