Gyorsulj fel!
Senki sem szereti a lassan betöltő oldalakat. Ezzel szerintem mindannyian egyetértünk. Egy weboldal betöltési sebességét számos paraméter határozza meg. Hogy mi számít jó értéknek azt sajnos nem mi határozzuk meg, hanem a Google, illetve a böngészőket fejlesztő cégek. Szerencsére több program is létezik ezeknek a paramétereknek az ellenőrzésére, mint Google PageSpeed Insights, Yslow, Pingdom, vagy a GTmetrix. Segítségükkel hamar megtaláljuk a javításra szoruló hibákat és hamar felturbózhatjuk vele weboldalunk teljesítményét, ami jó a látogatóknak és jó a Googlenek, így végeredményben jó mindenkinek.
Képek
Az oldalunkon található képek fizikai mérete és a képek mennyisége jelentősen lassíthatja a betöltődési időt. Ezekre jó megoldást nyújt a képek tömörítése például a pngoutwin kép méret optimalizáló program segítségével, vagy akár az Adobe Photoshop mentés webre menüpont alatt elérhető funkciójával, mely kifejezetten weboldalakra szánt képeket ment le, megfelelően tömörítve azokat. A tömörítés többnyire a képminőség romlásával jár, így érdemes a kép optmalizálása után megnézni azokat, hogy nem lettek-e nagyon zavaróak az emberi szemnek. Főleg nagyobb felbontású képeken lehet szembeötlő a változás.
Hasonló funkciót, illetve konstansan a weboldalon mindenhol megjelenő képi tartalmat úgynevezett CSS Image Sprite-ba szokták gyűjteni a fejlesztők. Ezek jellemzően kép alapú ikonkészletek, logók, vagy navigációs elemek szoktak lenni. Olyan képek, melyeknek nincs igazából jelentősége a Google képtalálati listáján. Ezeket a képeket egy üres, jellemzően png formátumú képre rendezik el, melyek megjelenítésére CSS stílusfájlokat használnak, ahol a sprite kép elemeinek koordinátáira hivatkoznak.
Ez jelentős többlet munkát jelent fejlesztéskor, ellenben meglehetősen sokat lendít a betöltési sebességen, hiszen a több kisebb méretű kép HTTP kérése, helyett, mindössze kettőre lesz szükség: a CSS fájléra és a sprite képre. Minél kevesebb HTTP kérést intézünk a szerver felé, annál gyorsabb tud lenni a kérések kiszolgálása is.
JavaScript és CSS
A JavaScript a böngészőnk által fordított leíró nyelv, mely segítségével a weboldal meghatározott elemeit vagyunk képesek dinamikus tulajdonságokkal felruházni. Ilyen lehet például az animálás, adat ellenőrzés, ajax hívás és még további számos lehetőség. A CSS pedig a weboldal úgymond grafikai elemeinek megjelenítésére, rendezésére, színezésére és szintén animálására szolgáló leíró nyelv, melyet szintén a böngésző futtat le.
Nagyobb weboldalak esetén ezekből több betöltése is jellemző. Hogy ezeknek a tartalmaknak a betöltési sebességén javítsunk 3 lépésen kell végigmennünk.
Betöltési sorrend
A böngésző a weboldalak forráskódját felülről lefelé olvasta fordítja és rendereli le. A betöltés első folyamataihoz a HTML és a CSS kódokat fogja elsőként értelmezni, mivel ezek szükségesek a tartalom megjelenítéséhez. Majd csak ezt követően fogja a JavaScript fájlokat feldolgozni. Az alap esetben a CSS és JavaScript fájlokat a HTML tartalom fejlécében szokták elhelyezni. Csakhogy ez hibás, ha figyelembe vesszük az imént leírtakat. A JavaScript fájlokat tehetjük a kód aljára. Ezzel gyorsabban leszünk képesek a weboldal vázát lerendereltetni a böngészővel, magyarán hamarabb tud megjelenni a weboldal tartalma és csak ezt követően kell nekünk a JavaScript betöltenünk.
Így néz ki a gyakorlatban egy nagyon leegyszerűsített példában:
HTML
<!DOCTYPE html>
<html lang="hu-HU">
<head>
<meta charset="utf-8">
<title>Weboldal címe</title>
<meta name="description" content="Weboldal leírása" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
</head>
<body>
<header id="header">
</header>
<section id="content">
</section>
<footer id="footer">
</footer>
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
alert('Helló világ!')
});
</script>
</body>
</html>
Kód tömörítés
A sebesség ellenőrző programok gyakran adnak figyelmeztetést ezeknek a forráskód fájloknak a tömörítésére, ugyanis a fájlok fizikai méretének csökkentésével további gyorsulást érhetünk el.
Természetesen ezt nem kell kézzel elvégeznünk, hanem vannak erre a célra megfelelő célprogramok, mint a JavaScript Minifier és a CSS Minifier. Használata roppant egyszerű. Egyszerűen belemásoljuk a saját JavaScript, vagy CSS kódunkat és lefuttatjuk, az eredményt pedig lementjük egy megfelelő kiterjesztésű fájlba. Jellemzően a "min" szót szokás elhelyezni a fájl nevében jelzésül, hogy egy tömörített állományról van szó. A fenti példából idézve tehát a "jquery-2.2.0.js"-ből lett "jquery-2.2.0.min.js".
Na igen, de mi van akkor ha felülírjuk véletlen az eredeti verziót?
Semmi gond. Ha voltunk olyan figyelmetlenek, hogy felülírjuk a tömörített verzióval az eredetit és nincs módunk a művelet visszavonására a szövegszerkesztőben, vagy egyszerűen csak nem áll rendelkezésünkre az eredeti példány, akkor létezik arra is célprogram, hogy visszaállítsuk a kód tördelését is a JS Beautifier nevű programmal.
Ez hasznos lehet, akkor is ha egy idegen weboldal forráskódjára vagyunk kíváncsiak. Nyilván nagyon kényelmetlen egy 1 soros kódot olvasni. Ezzel a megoldással viszont el fogjuk tudni olvasni. A tömörítésnél előfordulhat, hogy a változók neveit is rövidíti a program, ezeknek a neveknek a visszaállítására nincs lehetőség. Tehát a kód újrarendezése után a rövidített nevek lesznek csak láthatóak.
Van persze arra is mód, hogy ha létezik az eredeti, tömörítettlen fájl is a szerveren, akkor a HTTrack nevű programmal fel lehessen térképezni saját, vagy bármilyen más szerveren lévő tartalmat. Sokan ezzel a módszerrel töltik le kvázi ingyen a ThemeForest piactérről HTML sablonokat. Erre viszont én senkit sem bíztatnék, mert azontúl, hogy etikátlan magatartás még jogsértő is.
Fájl összefűzés
Az összetartozó fájlok egyidejű betöltésére is van lehetőség. Vagy fizikai értelemben egyesítjük külön a JavaScript és külön a CSS fáljainkat, vagy ami ennél kényelmesebb későbbi üzemeltetést biztosít, hogy egy erre készült programmal fűzzük össze őket. A leggyorsabb kiszolgálást a fizikai egyestés fogja jelenteni, mivel ebben az esetben nem kell minden betöltéskor valós időben megtörténnie az összefűzésnek.
Ne töltsünk be felesleges kódot
Ezt a műveletet a legnehezebb kivitelezni, mert komolyabb szervezést igényel. Az összetettebb weboldalak esetén számos bővítményt szokás telepíteni, bizonyos funkciók megvalósításához. Például egy slider, vagy űrlap elem ellenőrzés. Ezek az elemek nem feltétlen fognak minden oldalon megjelenni, ellenben sok esetben ilyenkor is betöltjük az ezekhez szükséges JavaScript és CSS kódokat. Ezzel teljesen feleslegesen lassítjuk a betöltést. Sokkal célszerűbb csak azokat a forrásokat betölteni, melyek valóban szükség van az adott oldalon. Nyilván ebből lesz olyan konstansan mindenhol kelleni fog. Mondjuk egy bejelentkezéshez használt kód, vagy egy webshop esetén a kosárba helyezés és módosítási műveleteket végző kód. Ellenben mondjuk a slider, magyar nevén képváltó már lehet, hogy csak a főoldalon szerepel és a többi aloldalon már nem. Ebben az esetben a slider forrás kódjait elég csak a főoldalon betölteni. A nehézséget a különböző tartalomkezelő rendszerek alatt való megvalósítás jelentheti, ellenben aki rászánja az időt az elég értékes időt tud lefaragni a weboldala betöltési idejéből. Ennek a feladatnak a megvalósításához szükséges némi PHP programozói ismeret, illetve valamilyen tartalomkezelő rendszer működésének ismerete, mint például a WordPress, vagy Joomla.
GZIP és cache
Ezeket a funkciókat többnyire egy .htaccess fájl segítségével lehet aktiválni.
A GZIP tömöríti a HTTP kérésekre adott válaszokat, ezzel tehermentesítve a szervert. A tömörített válaszokat pedig a böngésző már képes értelmezni és megjeleníteni az alapján a weboldal tartalmát.
A cache, magyarul gyorsítótár pedig arra szolgál, hogy amikor a böngésző már letöltötte a szerverről a szükséges tartalmat a weboldal megjelentéséhez, onnantól a látogató böngészőjében tárolja el ezeket az elemeket. Ez főleg olyan fájlokat érint, melyek nem frissülnek percről percre. Ilyenek például a képek, JavaScript és CSS fájlok. Ha szeretnénk módosítani valamit ezekben a fájlokban és a szerverre való feltöltést követően nem látjuk azonnal a módosítás eredményét, akkor nagy valószínűséggel épp a gyorsítótár miatt nem látjuk, mivel még tárolja a régi verziót. Ebben az esetben meg kell nyomni egyszerre az CTRL és F5 gombokat, ezzel törölve a gyorsítótár tartalmát.
Az alábbi .htaccess forráskód letölthető.
.htaccess
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
CDN
Végezetül pár szó a felhő alapú kiszolgálásról, a CDN-ről (Content Delivery Network). Nagyobb látogatottságú, jobban terhelt weboldalak esetén ajánlott felhőből kiszolgálni bizonyos tartalmakat. Többnyire képeket, melyek méretűk és mennyiségüknél fogva nagyon terhelné a gyengébb konfigurációjú szerverünket. Ebben az esetben érdemes CDN szolgáltatást használni, melyet például az Amazon-tól is rendelhetünk. A Twitter Bootstrap, vagy a Font Awesome alapból felkínálja nekünk a CDN alapú beágyazás lehetőségét.
HTML
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.