5+1 gyorstipp, melyekkel csökkenthetjük a weboldalunk betöltési idejét

A konverziós arányunkat kimutathatóan rontja, ha a honlapunk betöltési ideje túlszárnyalja az általános komfort érzetet keltő 1-4 másodperces határt. Elsőre úgy tűnhet, hogy pár másodperces eltérés nem okoz majd szignifikáns változást a konverziók tekintetében. A valóság azonban az, hogy ha maximálisan ki szeretnénk használni a weboldalak nyújtotta lehetőségeket, akkor minden olyan “aprósággal” foglalkoznunk kell, amelyek képesek növelni a felhasználói élményt.

1. Tömörítsük a képeket!

Egy oldalon megjelenítünk 30 darab képet, melyek egyenként 2 MegaByte méretűek, akkor összesen 60 MegaByte méretű információt kell eljuttatnunk a kliensnek, azaz a felhasználónak. A PhotoShop-ban és más képszerkesztő szoftverekben készített képek méretét akár 70%-al is csökkenthetjük, így a fent említett példa esetében 60-ról 18 MegaByte-ra redukálhatjuk a fájlok méretét.

Minél kevesebb információt küldünk a kliensnek, annál gyorsabban történik meg az a bizonyos kézfogás (handshake), melynek során a kliens oldal megkapja a szerver által elkészített kimenetet, hogy értelmezze és megjelenítse azt.

Mi egyértelműen a TinyPNG szolgáltatását ajánljuk erre a célra. Előnye, hogy a képeink egy részét ingyenesen tömöríthetjük online, nagyobb volumen esetén pedig fillérekért megvásárolható a szolgáltatás. Sőt, az API interfész segítségével teljesen automatizálhatjuk a képeink tömörítésének folyamatát. 😎

2. Tömörítsük a HTML, CSS és JS forrásfájlokat!

A különböző forrásfájlokat is érdemes tömöríteni annak érdekében, hogy a kliensnek minél kevesebb mennyiségű adatot kelljen értelmeznie. Jelen fájlok esetében a tömörítés annyit tesz, hogy minden láthatatlan karaktert törlünk, mint például: sortörés és tabulátor. Ezzel a módszerrel (főleg) nagy terjedelmű fájlok esetében jelentősen csökkenthetjük az adatmennyiséget.

A Minifier alkalmazás segítségével online és API-n keresztül is tömöríthetjük a CSS és JS fájljainkat.

3. Szervezzük ki a forrásfájlokat egy “süti mentes” domain címre!

A HTTP kérések általában tartalmazzák a domain címre vonatkozó sütiket, így egy kép vagy CSS fájl meghívása esetén sokszor feleslegesen “hordozzuk” ezeket az információkat. 🙂

A honlapunk működéséhez szükséges forrásfájlokat kiszervezhetjük egy ún. süti mentes (cookieless) domain címre annak érdekében, hogy a HTTP kérések (http request) során kevesebb fejléc információt (http header) kelljen küldenünk. Ezzel a technikával csökkenthetjük az adatforgalmat, így javíthatjuk a fájlok betöltésének idejét.

4. Csak azokat a CSS és JS fájlokat hívjuk meg, amiket valóban használunk!

Gyakori probléma, hogy általában olyan CSS és JS fájlokra is hivatkozunk, melyeket az adott oldalon nem is használunk, így itt is felesleges adatforgalmat generálunk.

Ha csak azokat a fájlokat hívjuk meg, melyekre valóban szükségünk van, akkor megkíméljük a böngészőt a felesleges köröktől.

5. SQL lekérések eredményeinek cache-elése

A példa kedvéért gondoljunk csak arra, hogy a kezdőlapunkon egy statisztikát jelenítünk meg a látogatóknak. A statisztika előállításához rengeteg SQL lekérdezés és számítási feladat szükséges. Amennyiben ezt az alkalmazás jellege nem igényli, akkor nem kell minden oldalletöltés alkalmával újból és újból elvégezni a feladatokat.

Az ún. query result caching lényege, hogy az SQL lekérdezés által létrehozott információt egy statikus fájlban tároljuk és csak a megadott idő elteltével vagyunk hajlandóak frissíteni azt. 🙂

Az SQL lekérdezéseink mostantól csak akkor dolgoznak, ha lejárt a cache file érvényességi ideje. Ilyenkor ismét megtörténhet a valódi lekérdezés és frissíthetjük a fájl tartalmát.

+1 Megfelelő erőforrások biztosítása

Hiába a sok munka, ha a szerverünk (tárhelyünk) nem képes megfelelően kiszolgálni a forgalmunkat.

Fontos, hogy kellő erőforrás álljon rendelkezésünkre annak érdekében, hogy folyamatosan biztosítani tudja a honlapunk megfelelő működését.