A Yahoo performancia fejlesztői csapata összefoglalta és kategorizálta, hogyan tudjuk weblapjaink letöltésének sebességét gyorsítani. Úgy gondolom elég fontos, hogy a valamilyen módon a látogató által megtalált weblapokat hatékonyan is szolgáljuk ki. Könnyen beláthatjuk, hogy a marketing szempontból sikeresen eladott oldalak a hatékony működés nélkül hamar elvesztik a látogatóikat, ezért nem árt, ha tisztában vagyunk a sebességnövelés gyakorlati oldalával is. A cikk első részében a tartalmakat érintő gyakorlati megoldásokat írom le:
A gyakorlati tanácsok 7 nagy kategóriába sorolhatóak:
Tartalmakat érintő tanácsok
- A http kérések minimalizálása (MXHR használata)
Az idő nagy része a lapletöltésekkel megy el, tehát a fő szempont ennek az időnek a csökkentése. Ha ezeknek az összetevőknek a számát csökkentjük, akkor kisebb lesz a lap lehívásához és összeállításához szükséges idő. Csökkentsük a http kérések számát annyira amennyire csak lehetséges. Gyűjtsünk mindent, ha lehet 1 fájlba. A kép lekérések számának csökkentésére használjunk css spriteokat. Több képek kombinálása egy képbe image mapek segítségével szintén javítja a sebességet. Az első látogató 40-60% üres cache-el érkezik az oldalra! Kulcsfontosságú, hogy számukra az oldal betöltése gyors legyen! Az új megoldás neve MXHR (Multipart XMLHTTP Request). Lényege, hogy a cache nélküli szerver felé menő kéréseket 1 HTTP kéréssé gyűjti össze. Majd ezt küldi el a szervernek, aki válaszol rá. A kliens pedig a választ azonnal feldolgozza, beillesztve a DOM -ba. Így többszörösére növelhető a megjelenítés sebessége a kliens oldalon.
- DNS keresési idő csökkentése
A DNS a hostneveket összerendeli az ip címekkel, akárcsak a telefonkönyv, ahol az embereket kötjük össze a telefonszámukkal. Ez a kérés időbe telik. Ez általában 20-120 milisecond. A böngésző addig nem tud semmit csinálni, amíg ez nem történik meg. A név-ip összerendelések szintén eltárolódnak az ideiglenes tárolóban mind szerver mind pedig kliens oldalon is. Az Internet Explorer alapértelmezetten 30 percenként, a Mozilla Firefox 1 percenként frissíti ezeket. Tehát ha a DNS összerendelések idejét lecsökkentjük úgy, hogy nem használunk egyedi neveket, akkor viszont a párhuzamos letöltéseket korlátozzuk. Itt kompromisszumot kell kötni és az előnyös mértéket kiválasztani.
- Átirányítások mellőzése
A 301 és a 302 -es fejlécben használatos kódok. Ha a lekért html és a látogató közé átirányítást helyezünk, ez rontja a felhasználói élményt és időbe is telik. Ha lehet kerüljük el. Több módja is lehetséges. (meta refresh, javascript) de ahol lehet használjuk a 3xx HTTP státusz kódokat. Szintén pazarló lehet ha pl nem kezeljük az url végén a / jelet. Apache esetében alias, mod_rewrite, vagy DirectorySlash direktíva használatával ezt ki tudjuk küszöbölni.
- Ajax hívások ideiglenes tároló használatával
Az Ajax hívások esetében is fontos, hogy alkalmazzuk az ideiglenes tárolót, ha lehetséges. Növelhetjük a sebességet, ha csak akkor küldjük el az adatot a szervernek, ha valóban szükséges és változás történt.
- Utólag betöltött komponensek
Az eljárás lényege, hogy először az oldal jelenjen meg majd később olyan elemek, amelyekre szükség lehet, de nem láthatóak. Így az oldal megjelenítése gyors, míg a betöltése az egyes komponenseknek a háttérben történik a felhasználó tudta nélkül.
- Előre betöltött komponensek
Az előző ellenkezőjének tűnhet, de más céllal. A komponensek előre betöltésével kihasználhatjuk a böngésző tétlen állapotát. Feltételezve hogy bizonyos elemekre a böngészés során szükség lesz és mivel ez már az ideiglenes tárban van a letöltés gyorsabb lesz.
- DOM elemek számának csökkentése
Egy összetett oldal letöltése több byte, de azt is jelenti, hogy a feldolgozása is több időt vesz igénybe, mert több DOM elemet tartalmaz. Nem mindegy, hogy egy eseménykezelőnek 500 vagy 5000 elemen kell végigmennie.
- Komponensek domainek közötti megosztása
A párhuzamos letöltések gyorsítanak a lapletöltésen. Ügyeljünk, hogy 1 domain-en belül ne legyen több mint 2-4.
- IFramek használatának minimalizálása
Segítségével a szülő dokumentumokba tudunk beszúrni tartalmakat. Fontos megérteni a működésüket, mert hatékonyan így tudjuk felhasználni.
előnyeik: Segíti a másik lassú rendszerből a megjelenítést (hirdetések), security sandbox, párhuzamos scriptletöltés
hátrányaik: költséges, főleg ha üres, blokkolja a lapbetöltést, nem szemantikus
- 404-es üzenetek kezelése
A HTTP hívások költségesek, főleg ha szükségtelenek. Pl: egy le nem kezelt 404-es üzenet, ami a felhasználói élményt rombolja. (A szerver fogadja a hívást de nem tudja mit kell tennie.)
A szerver oldalt érintő beállítások
- Tartalom szolgáltató hálózatok
- Elévülő vagy Cache vezérelő fejlécek
- Gzip komponensek
- ETagek beállításai
- A buffer kiürítése korábban
- Ajax hívások GET -tel
Sütik használatának szabályai
- A süti méretének csökkentése
- Süti mentes domainek használata
Stíluslapok alkalmazásai
- Stíluslapok felülre helyezése
- Kifejezések mellőzése a stíluslapokban
- Az Import működése
- Filterek használatának kerülése
Javascript
- Script alulra helyezése
- Scriptek külső fájlokba helyezése
- Felesleges kódrészek eltüntetése
- Kód duplázások kiszűrése
- DOM használat minimalizálása
- Hatékony eseménykezelők alkalmazása
Képek
- Képek optimalizálása
- CSS sprite-ok optimalizálása
- Kép átméretezése HTML –ben
- Favicon használata
Mobil eszközök figyelembe vétele
- Komponens mérete 25k alatt legyen
- Komponensek
