Gyorsítsd fel a weboldalad

Rengeteg olyan új weboldallal találkoztam mostanában, ami nagyon szépen el van készítve grafikailag és rengeteg hasznos JavaScript funkcióval van felszerelve.

Az oldal jól használható, a funkciók jók, de mivel lassan töltődik be az oldal a várt látogatási szám növekedés elmarad. Sőt ha lehet még csökken is.

20 egyszerű tipp weboldal gyorsításra

Vannak dolgok amin egyszerűen tud a webfejlesztő változtatni, ha már tervezési fázisban belekalkulálja a alábbi optimalizációs tippeket.

Vannak esetek mikor nem, vagy csak nehezen lehet optimalizálni egy rendszert kód szinten. Ilyen például egy rossz, lassú robusztus keretrendszer választás, amiben lehet hogy a fejlesztés gyors, de maga a rendszer lassú mint a bűn.

1, Optimalizáld a CSS és JavaScript kódodat.

Törekedj arra, hogy CSS-ben ne keljen egy definíciót 100* megadni, mert ezzel növeled a forrásod méretét és az értelmezés idejét is (add meg ezeket az értékeket inkább magasabb szinten).
JavaScript-nél vannak esetek mikor ciklusokban sok elemen végzett művelet kegyetlen lassú tud lenni, ezeket optimalizálni kell, mert gyengébb gépen ez nem fog működeni.

2, Tömöríts le minden CSS fájlt, ha már nem kell benne módosítani (hagyd meg az eredetit is)

3, Tömöríts le minden JavaScript fájlt.

Attól hogy letömöríted még működni fog!

4, Csinálj egy fájlt a tömörített CSS és JavaScript állományaidból.

Ne 10 fájlt keljen betölteni csak 1 JavaScript fájlt és 1 CSS állományt

5, CSS Sprite-ot használj a weboldal sablonjának az összerakásakor.

6, Optimalizáld a képelemek méretét.

7, Ha tudod helyezed a forrásodba a /body elé a betölteni kívánt JavaScript állományokat.

Ennek feltétele az, hogy a JavaScript kódod szintén az állományok betöltése után következhet.

8, Ha sok külsős JavaScript bővítményt használsz és ezekhez több CSS fájl tartozik; oldal betöltéskor JavaScript segítségével töltsd be.

Ne legyen benne a forrásban a hivatkozás, hanem egy JavaScript funkció segítségével, oldal betöltéskor beteszed a head részbe ezeket a hivatkozásokat. Ha nincs JavaScript akkor értelmetlen a fejlécben betölteni ezeket, mert úgy sem fog működeni.

Példa jQuery-ben történő megvalósításhoz:

$.fn.addStyle = function(param){
    if(param!=""){
        $('<link rel="stylesheet" type="text/css" media="all" href="' + param +'"/>').appendTo('head');
    }
}
 
$.fn.addScript = function(param){
    if(param!=""){
        $('<script type="text/javascript" src="' + param + '" charset="utf-8"></script>').appendTo('body');
    }
}

Példa a függvény hívásra:

jQuery().addStyle("utvonal/style.css");
jQuery().addScript("utvonal/javascript.js");

9, Ha meg tudod oldani azt, hogy a fent említett állományaidat GZ (tömörített) formátumból szolgáld ki, sok esetben gyorsíthat a rendszereden.

10, JavaScript Libeket (jQuery, Prototype..) töltsd be a http://code.google.com/apis/ajaxlibs/ oldalról.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

11, Ne használj ha nem muszáj olyan kütyüket, amik külső oldalról JavaScript segítségével bonyolítanak le hívásokat és tartalmakat állítanak elő.

pl.: egy online szótárt hív be valahonnan. Ha lehet ezeket töltsd le és a tárhelyedről működjön.

12, Mellőzd a külsős képelemek betöltését.

pl.: Ikon egy linkgyűjteményre. Töltsd le az ikont és a saját tárhelyedet add meg forrásnak.

13, Gondolj arra, hogy a kliens oldal nem biztos hogy combos gépsárkánnyal nézi az oldalt.

Mindent nem varrhatsz az ő nyakába (JS műveletek), gondolok itt a lassú gép, kevés RAM esetére.

14, Használj FireBug-ot, Yslow-ot, pageSpeed-et a weboldad ellenőrzésére.

FireBug Net tabon megláthatod melyik fájlod töltődik be a leglassabban, azokra rá kell gyúrni.

15, Válasz jó HTTP header-t a lejártai időkre vonatkozólag.

Yslow-ban kapsz erre tippeket.

16, Optimalizáld SQL kéréseidet.

Pl.: Sok helyen látom hogy 2* nyomnak le egy combosabb kérést, azért hogy az elemek számát megkapják (pager / MySQL / SQL_CALC_FOUND_ROWS).

17, Cache-eld a Feldolgozott adatbázisból érkező adatokat.

A ritkán változó SQL eredményeidet, vagy bonyolultabb kérések feldolgozott eredményét tárold le fájl-ba (serialize) és ha csak lehet ebből szolgáld ki. Ezzel csökkented a kérések számát és a feldolgozási időt. Memcached, Fájl alapú cache megoldások.

18, Amit csak lehet cache-elj.

Ha egy oldal ritkán változik, de az összeállításához SQL lekérés kell, akkor a végeredményt mentsd el és egy ideig csak azt szolgáld ki. Memcached, Fájl alapú cache megoldások.

19, Nézd meg, mennyi Ram-ot eszik a weboldalad 1 betöltésnél.

Ha ez meghaladja a kritikus mértéket, ezen is el kell gondolkodni. Legyél tisztába azzal, hogy a szerveren mennyi az engedélyezett memória használat. Amit mi generálunk fogyasztás érdemes alacsonyan tartani, gondolván arra hogy egy időben nem 1 ember fogja nézni az oldalunkat. Ezt érdemes követni pl.: egy új osztály használatakor is, mennyire változik. (profiler)

20, Néhány másodperced van a weboldalad betöltésre, és arra hogy az oldalad izgalmasnak tűnjön a látogatók számára.

A betöltési idő szoros összefüggésben van a látogatóid számával. Ha csökkented a betöltési időt, nagy valószínűséggel növekedni fog az oldalad látogatottsága.

Sok oldal van amit kedvelek, és a tartalmáért gyakran látogatom. Itt is említem, de vannak esetek mikor képtelen vagyok kivárni a betöltési idejét.

Fejlesztés alatt lévő rendszereken (minde pl.: az arth2o.com oldal blogja, blog motorja) nem érdemes letömöríteni a fájlokat, csak ha már nem kell módosítani rajta!

CSS, Optimalizáció, jQuery, SQL, PHP css, javascript, mysql, cache, speedup

Hozzászólás beküldése:

Friss Blogmarkok: