Millió és egy módja van annak, hogyan növelhetjük a weboldalunk teljesítményét. A módszerek változatosak és egyesek bonyolultabbak, mint mások. A három legfőbb megközelítési irány a következő: hardware tuning, a szerver oldali kódoptimalizálás (PHP, Python, Java), és a felhasználó oldali teljesítmény.
Jacob Gube írása elsősorban a felhasználó oldali teljesítményre összpontosít, mivel ezzel lehet a legkönnyebben dolgozni és ez a leginkább költség-hatékony.
Miért fókuszáljunk a felhasználó oldali teljesítményre?
A felhasználói oldal (azaz a HTML, CSS, JavaScript, és a képek) a weboldalad legjobban hozzáférhető része. Ha megosztott tárhelyed van, akkor lehetséges, hogy nem rendelkezel root (vagy ahhoz hasonló) hozzáféréssel a szerverhez és ezért nem tudod módosítani a szerver beállításokat. És ha még rendelkezel is a megfelelő jogokkal, a web szerver és adatbázis kezeléshez speciális tudás szükséges, hogy közvetlen eredményeket érhess el.
Emellett olcsó is. A legtöbb felhasználó oldali optimalizálást ingyen is el lehet végezni, és csak az időt kell rászánni. Nem csak hogy elenyésző a költsége, de így hasznosíthatod a legjobban az idődet, mivel a felhasználó oldali teljesítmény igen nagy részben felelős az oldal válaszidejéért.
Ezt észben tartva itt van néhány egyszerű módja, hogy hogyan növelhetjük az oldalunk gyorsaságát.
1. Nézd át a weboldalaidat, hogy megtaláld a bűnösöket.
Image may be NSFW.
Clik here to view.
Jó szolgálatot tehet, ha átnézed az oldaladat, hogy megtaláld azokat az elemeket, amelyekre nincs szükséged, és amelyeket optimalizálni lehet. A weboldal átnézéséhez általában alkalmazunk valamilyen eszközt, mint például a Firebug, amelynek segítségével meghatározhatjuk, hogy milyen elemeket (pl.: képek, CSS fájlok, HTML dokumentumok, és JavaScript fájlok) kér le a felhasználó, mennyi ideig tart azokat betölteni, és milyen nagyok. Általános ökölszabály, hogy a lehető legkisebb méretűek legyenek az oldal elemek (a 25KB alatti méret megfelelő cél).
A Firebug’s Net tabulátor (lásd fent) segít megkeresni azokat a nagy fájlokat, amelyek lelassítják az oldalt. A fenti példán láthatod, hogy részletezve felsorol minden olyan elemet, ami a weboldal átalakításához szükséges: mi az, hol található, mekkora, és meddig tart betölteni.
A neten több olyan eszköz is van, ami segíthet az oldalad átvizsgálásában – olvasd el ezt a listát hogy többet is megismerhess.
2. A megfelelő formátumban mentsd el a képeket, hogy minél kisebb legyen a fájl mérete.
Image may be NSFW.
Clik here to view.
A képek használatánál fontos eldönteni, hogy melyik képnek milyen az optimális formátuma. A három általánosan elterjedt webes képformátum a következő: JPEG, GIF, és PNG. Általában JPEG-et kell használnod a lágy tónusú és színvilágú valószerű fotóknál. Az éles színű képek esetében használj GIF vagy PNG formátumot (például grafikonok és logók esetében).
A GIF és a PNG hasonlóak, de a PNG jellemzően kisebb fájlméretet eredményez. Olvasd el a Coding Horror cikkét a PNG használatának mérlegeléséről a GIF helyett.
3. Kicsinyítsd le a CSS és a JavaScript fájlokat, hogy nyerj pár byte-t.
A kicsinyítés a felesleges karakterek (például a Tabok, a szóközök, a forráskód kommentek) eltávolításának folyamata a forráskódból, hogy ezáltal csökkenjen a fájl mérete. Például:
Ezt a CSS részt:
.some-class { color: #ffffff; line-height: 20px; font-size: 9px; }
át lehet alakítani ilyenné:
.some-class{color:#fff;line-height:20px;font-size:9px;}
…és tökéletesen fog működni.
És ne aggódj – nem kell majd manuálisan újraformáznod a kódodat. Tengernyi olyan ingyenes eszköz áll rendelkezésre, melyeknek segítségével lekicsinyítheted a CSS és a JavaScript fájlokat. A CSS-hez egy csomó könnyen használható eszközt találsz ezen a CSS optimalizációs eszköz listán.
A JavaScript esetében népszerű minimalizációs lehetőség a JSMIN, YUI Compressor, és a JavaScript Code Improver. Egy jó kicsinyítő alkalmazás lehetőséget biztosít arra, hogy a fejlesztés során a visszaállítsa a minimalizációt. Ehelyett használhatsz egy böngészőben működő eszközt is, mint amilyen a Firebug, hogy megnézd a kódod formázott verzióját.
4. Kombináld a CSS és a JavaScript fájlokat és ezzel csökkentsd a HTTP kéréseket
Minden olyan elemre, amire a weboldal rendereléséhez szükség van, egy arra vonatkozó HTTP kérést kell küldeni a szerver felé. Tehát ha öt CSS fájlod van egy oldalon, akkor minimum öt különálló HTTP GET kérésed kell, hogy legyen arra az adott weboldalra vonatkozóan. A fájlok összevonásával csökkented a fent említett, a weblap létrehozásához szükséges HTTP kérések számát.
Olvasd el Niels Leenheer cikkét arról, hogyan kombináljuk a CSS és a JS fájlokat a PHP felhasználásával (ezt a módszert más nyelvek esetében is alkalmazhatjuk). A SitePoint egy hasonló módszert említ, a CSS és a JavaScript becsomagolását; ezzel képesek voltak 1.6 másodpercet lefaragni a válaszidőből, és ezzel 76%-kal csökkentették a válaszidőt az eredeti időtartamhoz képest.
Egyébként pedig összevonhatod a CSS és JavaScript fájlaidat a jó öreg copy-paste módszerrel is (varázslatosan működik).
5. CSS sprite használata a HTTP kérések számának csökkentésére
Image may be NSFW.
Clik here to view.
A CSS Sprite több kisebb kép egy nagyobb képpé való kombinálása. A megfelelő kép megjelenítéséhez használd a background-position CSS tulajdonságot. Ha így kombinálsz több képet, az lecsökkenti a HTTP kérések számát.
Például a Digg esetében (lásd a fenti képen) több különálló, a felhasználók közötti interakcióra szolgáló ikon is látható. A szerver kérések lecsökkentésére a Digg több ikont is összevont egy nagy képpé és aztán CSS-t használt a képek megfelelő pozícionálásához.
Ezt manuálisan és megcsinálhatod, de van erre egy webes eszköz is a CSS Sprite Generator, ami lehetővé teszi számodra a képek feltöltését, amelyeket aztán a program kombinál egy CSS sprite-ba, majd ezután megadja a CSS kódsort (a background-position tulajdonságokat) a képek lerendereléséhez.
6.Használj szerver oldali tömörítést a fájlméretek csökkentéséhez
Ez trükkös lehet, ha megosztott tárhelyed van, és az alapjáraton nem engedi a szerver oldali tömörítést, de ahhoz, hogy teljes mértékben optimalizáld az elemek megjelenítését, el kell végezned a tömörítést. Az oldal elemek tömörítése olyan, mintha egy nagy fájlt zippelnél, hogy aztán elküldd emailen: Te (web szerver) bezippelsz egy nagy családi képet (az oldal elemet) és elküldöd emailen a barátodnak (a böngészőnek) – ő aztán kicsomagolja a ZIP fájlodat és megnézi a képet. Népszerű tömörítési módszerek a Deflate és a gzip.
Ha a saját külön szervereden dolgozol vagy van VPS-ed – mázlid van – és a tömörítés nincs beállítva, ez esetben egy tömörítő alkalmazás telepítése nagyon egyszerű. Olvasd el ezt a leírást arról, hogyan installáljuk a mod_gzip-et az Apache esetében.
7. Kerüld az inline CSS és JavaScript használatát
Alaphelyzetben a külső CSS és JavaScript fájlokat a felhasználó böngészőjének cache-e dolgozza fel. Amikor a felhasználó továbblép a kiinduló oldalról, addigra már nála tárolódik az összes stíluslapod és JavaScript fájlod, cserébe pedig nem kell a stílusokat és a scripteket megint letölteniük. Ha túl sok CSS és JavaScript fájlt használsz a HTML dokumentumodban, akkor nem tudod kihasználni a böngésző caching tulajdonságait.
8. Tehermentesítsd a szervered
Image may be NSFW.
Clik here to view.
Az oldal elemeid egy részének feltöltése egy harmadik web szolgáltatóhoz nagyban megkönnyíti a szervered munkáját. Az oldal elemek más szolgáltatásra történő feltöltésének lényege az, hogy ezáltal megosztod az oldal kiszolgálásának feladatát egy másik szerverrel.
Használhatod a Feedburner-t az RSS betöltések kezelésére, a Flickr-t a képek kezelésére (légy tisztában annak jelentőségével, hogy ezen keresztül töltöd le a képeidet), és a Google AJAX Libraries API-t a népszerű JavaScript keretrendszerek/ könyvtárak kiszolgálásához, mint amilyen a MooTools, a jQuery, és a Dojo.
Például a Six Revisions oldalán az Amazon’s Simple Storage Service –t (az Amazon Egyszerűsített Tároló Szolgáltatását, röviden Amazon S3 ) használja a szerző az itt látható képek kezelésére, valamint a Feedburner-t az RSS betöltéseknél. Ennek köszönhetően a saját szervernek csak a HTML, a CSS, és a CSS képek háttereit kell szolgáltatnia. Ezek a megoldások nem csak költség hatékonyak, de drasztikusan lecsökkentik a weblap válaszidejét is.
9. Használd a Cuzillion-t egy optimális web lap szerkezet megtervezéséhez
Image may be NSFW.
Clik here to view.
A Cuzillion Steve Souders ( felhasználói felület mérnök a Google-nél, miután otthagyta a Yahoo!-t ahol pedig a teljesítményért felelős részleg vezetője volt) által megalkotott webes alkalmazás, amely lehetővé teszi, hogy különböző weboldal konfigurációkkal kísérletezz, hogy megtalálhasd az optimális szerkezetet. Ha már megvan a weblapod design-ja, akkor a Cuzillion-nal szimulálhatod a weblapod szerkezetét és aztán csűrheted csavarhatod, hogy jobb teljesítményt érhess el a dolgok átrendezésével.
Nézd meg az InsideRIA video interjúját Steve Sounders-szel a Cuzillion működéséről és a Telepítési leírást, amivel percek alatt elkezdheted a munkát.
10. Figyeld a web szerver teljesítményt és rendszeresen készíts értékelést.
A web szerver adja az agyat a működéshez – ez felel a HTTP kérések/válaszok fogadásáért/elküldéséért a megfelelő embereknek valamint ez szolgáltatja a weblapod elemeit. Ha a web szervered nem teljesít megfelelően, akkor nem tudod kihozni a maximumot az optimalizálásból.
Elengedhetetlen, hogy folyamatosan ellenőrizd a web szervered teljesítmény mutatóit. Ha root-hoz hasonló hozzáférésed van és tudsz telepíteni dolgokat a szerverre, akkor nézd meg az ab-ot, ami egy Apache web szerver teljesítmény-értékelő eszköz vagy a Httperf-t az IBM-től.
Ha nincs hozzáférésed a szerverhez (vagy gőzöd sincs, hogy miről beszélek) akkor érdemes egy távoli irányító eszközt használnod, mint például a Fiddler vagy a HTTPWatch, és ezekkel elemezni és figyelni a HTTP forgalmat. Mindkettő kijelöli neked azokat a problémás részeket, amelyekkel foglalkozni kellene.
A nagyobb változtatások előtt és után elvégzett értékeléseken kiválóan látható a változtatások hatása. Ha pedig a szervered nem tudja a weblapod által generált forgalmat lebonyolítani, akkor itt az ideje egy frissítésnek vagy egy szerver migrációnak.
Erről a témáról írt nemrég Bagi Zoli is: Css és javascript optimalizálás YSlow módra
A cikket Jacob Gube írása alapján Mészáros Dóra fordította.