Az egyik legfontosabb felhasználói elvárás a webes alkalmazás (különösen mobil web) használata közben, az oldalak betöltési sebességének gyorsasága. Ki akarna olyan szolgáltatást igénybe venni, amely lassú, nehezen kezelhető és csak az időnket rabolja?

Sok kutatást végeztek a betöltési sebesség konverzióra gyakorolt hatásával kapcsolatban. Két ilyen tanulmányt emelek ki, melyek egyértelműen megmutatják, hogy közvetlen a kapcsolat.

• Amikor az amazon.com betöltési ideje 100 ms-al megnőtt, az eladások száma 1%-kal csökkent.
• a Google betöltési ideje 500 ms-al megnőtt, akkor 20%-kal kevesebb keresést hajtottak végre a felhasználók

A két felmérésből tisztán látszik, hogy foglalkozni kell a sebesség optimalizációval.

Első blikkre mindenki azt gondolja, hogy szerver oldalon kell fejlesztéseket végezni. Nem állítom, hogy a több memória, gyorsabb processzor, háttértár, különböző web szerver és program értelmezést, futtatást gyorsító kiegészítők és nem utolsó sorban az optimalizált kód (legyen az php, asp.NET, stb.) nem fontosak, de csak 20%-ban befolyásolják a betöltési időt.

A betöltési idő nagyrészt az oldalak különböző elemeinek (képek, stíluslapok, JavaScriptek stb.) letöltésével és azok feldolgozásával telik, mely a teljes folyamat 80%-át teszi ki. Az elemek számának lecsökkentésével növelhető a betöltési sebesség. Ez a kulcsa a gyors oldalaknak! Ebben a posztban a szerver oldallal nem foglalkozom, csak minimális mértékben.

Milyen előnyei vannak a gyors webes alkalmazásoknak?

• a pozitív felhasználói élmény alapja
• keresőoptimalizálást segíti (a Google a találatok osztályozásánál figyelembe veszi a sebességet)
• hozzájárul a konverzió növekedéséhez

Tedd boldoggá a felhasználóid egy gyors webes alkalmazással!

Mit kell tenni, hogy növeljük a sebességet?

Http kérések számának csökkentése, CDN használat

Vagyis minél kevesebb kérés érkezzen a szerver felé. Tegyük fel, hogy van egy 100 kB-os file, illetve két 50 kB-os fájl. Egyértelműen a 100 kB-os fájl letöltése lesz gyorsabb, mert két fájl esetén pluszban megjelenik a második kapcsolat inicializálásra fordított idő.

A másik amiről tudni kell, az az, hogy a böngészők limitálják az egy hosztról egy időben letölthető fájlok számát. Íme, egy lista a fontosabb böngészők korlátozásáról:

• Internet Explorer 8: 6 kapcsolat
• Internet Explorer 9: 4 kapcsolat
• Google Chrome: 6 kapcsolat
• Firefox 3-: 15 kapcsolat

Ez a korlát nagyon szoros, ezért az okos fejlesztők mindenféle trükköt agyalnak ki a kikerülésre, csak néhány hasznos megoldás ezek közül:

• miután a böngészők hosztra korlátoznak, ezért szoktak használni különböző aldomaines megoldásokat pl. images.website.hu, docs.website.hu stb.
• CDN – vagyis Content Delivery Network. Használata kötelező! A nagy mogulok (Google, Amazon, stb.) a világ számos pontján üzemeltetnek szervereket és ingyen, vagy kevés pénzért szolgáltatnak CDN-t, aminek haszna, hogy nem a Te szervered szolgálja ki a kód letöltését, hanem a felhasználóhoz legközelebb eső szerver és az is nagy sávszélességgel, rendelkezésre állással. Például a jQuery lib minden verziója megtalálható a google CDN-jén.
• Expire http fejlécek beállítása is jó és követendő megoldás. Ilyenkor a böngésző cache-ből tölti be kliens oldalon a kívánt fájlt. Megjegyzendő, hogy a DNS Lookup is időbe telik (még ha kevés is).
• nemrég egy nagyon okos megoldással találkoztam. Dropboxra, Google Drive-ra, Microsoft SkyDrive-ra töltik fel a statikus tartalmakat és onnan linkelik. :)

Jó sitebuild

Erről írtam egy posztot, olvasd el. A lényeg, hogy minél kevesebb legyen a HTML kód, amennyire lehetséges, a megjelenítést szeparálni kell a tartalomtól. A teljesség igénye nélkül néhány tipp:

• tagnél add meg minden esetben a kép valódi méreteit és ne hagyd a böngészőre annak meghatározását, pláne ne bízd rá, hogy méretezzen (ez mind időbe telik)
• CSS tippek:
  • kerüld a * használatát, szerencsétlen böngésző a DOM-ot sokszorosan  járja végig és megpróbálja alkalmazni a feltételed, inkább támaszkodj az öröklődésre. Például ilyet NE: html * {font-size:12px;}

  • content #rightpanel #loginform input[type=”submit”] {width:100px;} helyett elég a #loginform input[type=”submit”], azaz ne dolgoztasd feleslegesen a böngésző motort

  • kerüld az ismétléseket, avagy vond össze a hasonló stílussal rendelkező elemeket
  • használd az összevont megadási lehetőséget, pl. background: #fff url(image.png) top right no-repeat;
  • lehetőség szerint kerüld a class-ok használatát, csak indokolt esetben alkalmazd

CSS sprite-ok használata

A http kérések számának csökkentése indokolja a sprite-ok használatát is. Arról van szó, hogy az állandó képi elemeket (ikonok, hátterek, egyéb apró grafikák) egyetlen képre helyezed és CSS-ben használod úgy, hogy a háttér pozícióját állítod. Sok esetben nem olyan egyszerű ezt megvalósítani, akkor a legkézenfekvőbb, ha fix szélességgel és magassággal rendelkezik a design elem, ellenben egy változó szélességű elem végére helyezendő kis ikon esetében már trükközni kell.

Nézd csak a kis képet, melyet egy munkám során használtam, ott a kis lefele mutató nyíl erre ad példát. (megjegyzendő, hogy CSS3-ban már meg lehet adni a háttérkép szélességét és magasságát is, de sajnos jelenleg még nem támogatják általánosan a browserek). Olvass bővebben a CSS Sprite-okról.

Képek optimalizálása

A webes alkalmazásoknál a képeket, grafikai elemeket jpeg, png és gif formátumokban használjuk. Fontos arra ügyelned, hogy ezek fájl mérete a lehető legkisebb legyen, ezért a következőkre kell figyelned:

• ha transzparens képre van szükséged, a png a legjobb választás, viszont ha az adott grafikának nincs alfa transzparenciája és kevesebb, mint 254 színt használ, akkor a gif formátum kisebb fájl méretet eredményez
• a fotók, bonyolultabb képi elemek mindig jpeg formátumban lesznek a legkisebb fájlméretűek. A jpeg veszteséges tömörítést használ, így állítható a tömörítés mértéke, amit addig fokozz, amíg a kép nem lesz „rágott” (jpeg artifacts)
• akármekkora a kép, ami pár színből áll, gif formátumban lesz a legkisebb. Ráadásul a gif dithering lehetőségével nem észrevehető a színek egymásba keverése (noise – zajjal), így sokszor előfordul, hogy kisebb lesz a kép fájl mérete, mintha jpeg-ben mentenéd. Mindig próbáld meg a gif formátumot, hacsak nincs gradiens (színátmenet) a képen, akkor biztos nem lesz jó.

Külső CSS, JavaScript (nem inline)

Külső CSS fájlokat használj a link html elemmel, ezzel eléred, hogy mikor a böngésződ feldolgozza a tartalmat, már előformázott formában jelenítse meg azt, így a felhasználó számára hamarabb jelenik meg a végleges eredmény. Ha a html kódban helyezel el CSS blokkokat (style), illetve az egyes html tagokra adsz ki helyben CSS utasításokat, lelassítod a megjelenítést, mégpedig a sok felülbírálás miatt és mert a böngészőnek mindig újra kell „rajzolnia” az érintett elemeket. A felhasználók a fehér, üres képernyőt bámulják majd és lelépnek.

JavaScript fájlok kerüljenek az oldal aljára

Ha az oldal aljára teszed ezeket a hivatkozásokat, a felhasználók már látják a tartalmat, mikor a böngésző betölti a JavaScripteket. Tudom, sajnos sokszor ez nem valósítható meg. Sokszor látom, hogy a jQuery-hez rengeteg plugin be van töltve és a felét sem használja az oldal, csak az legyen, ami feltétlen szükséges.

Minimalizált és egybevont CSS és JavaScript kódok

A http requestek számának csökkentése indokolja, hogy minél kevesebb CSS és JavaScript hivatkozás legyen a forrásban, ezért érdemes a CSS, JS fájljaid egyetlen fájlba tenni (és nem @importtal a CSS-en belül, mert az is külön http request lesz). Ha már egy fájlod van, akkor használj minimalizáló scripteket, vagy a keretrendszeredbe építs be ilyet, vagy vedd igénybe a számos online megoldás valamelyikét (az elterjedt keretrendszerekhez, blog motorokhoz találsz plugin formájában). Jelentősen csökkentheted a letöltendő CSS, JS fájl(ok) méretét.

301-es átirányításokat ne alkalmazz

Nyilvánvaló, hogy a 301-es átirányítások lassítják a működést, persze SEO miatt nagyon sokszor használják és kell is alkalmazni, viszont kerülni kell, amennyire ez lehetséges.

Gzip beállítása szerver oldalon

A web szerveren be kell állítani, hogy gzip-el tömörítse a böngészőnek elküldött tartalmakat. Minden böngésző képes már lekezelni a gzippelt állományokat. Ezáltal a letöltési időt lehet csökkenteni, igaz, kliens oldalon a kitömörítés időt vesz el, de a kettőt összegezve pozitív lesz az egyenleg.

Egyéb oldal betöltést lassító elemek

• Social media gombok (Facebook like, google +1, megosztás gombok, stb.) – csak azt használd, amire feltétlen szükséged van
• Hirdetés kezelő rendszerek JavaScriptjei – nincs mit tenni, de jelentősen lassíthatja a megjelenítést az inline JS miatt
• Analitikai rendszerek JS kódja(i) – lehetőleg egy mellett tedd le a voksod, több rendszert ne használj
• Flash és/vagy Java használat – tűzre velük :)

Eszközök, melyek segítenek a problémák felderítésében

• Google PageSpeed
• YSlow
• pingdom TOOLS
• JavaScript minify
• CSS minify
• CSS Sprite Generator
• Kép optimalizáló