A JavaScriptet gyakran használják modern weboldalak készítéséhez, hiszen nagyban képesek fokozni a felhasználói élményt. Ugyanakkor a JavaScript a webhelyek teljesítményproblémáinak gyakori forrása is lehet. Az alábbiakban közelebbről megismerkedünk a JavaScript-tel és megnézzük, hogyan optimalizálható egy weboldal a segítségével!
A JavaScript fogalma
A JavaScript egy igen népszerű, a böngészők által támogatott programozási nyelv, amely lehetővé teszi a webfejlesztők számára, hogy olyan kódot írjanak, amely reagál a felhasználói interakciókra, manipulálva az oldalon lévő HTML jelölést. A JavaScript az egyszerű HTML-nyelvnél gazdagabb és kifinomultabb felhasználói interakciókat tesz lehetővé.
Elég csak a webshopok virtuális kosarára gondolnunk. Az ikonja általában megmutatja a kosárban lévő tételek számát, valamint annak változásait. Továbbá, kattintásra megjelenik a kosár aktuális tartalma is. Így az könnyen ellenőrizhető, igény esetén pedig módosítható. Ez mind a JavaScript segítségével valósul meg.
A fejlett webhely-navigációs menük szintén gyakran JavaScript-tel működnek. A JavaScript a webhely analitikai adatainak gyűjtésére is használható, hiszen képes nagyobb betekintést nyújtani egy webhely teljesítményébe. Most, hogy már a JavaScript fogalmával tisztában vagy, jöjjenek a használatára vonatkozó konkrét tippek!
Weboldal optimalizálás JavaScript-tel
1. JavaScript fájlok túlzott használatának elkerülése
A JavaScript-fájlok száma könnyen megnövekedhet, amely azonban nem túl előnyös. A fájlok számának meghatározására számos ingyenes eszköz áll rendelkezésre. Ilyen például az oldalsebesség-mérésre alkalmas PageSpeed Insights, amelynek használatához egyszerűen csak meg kell adni az ellenőrizni kívánt oldal URL-címét. Az eszköz különböző ajánlásokat is megfogalmaz a webhely üzemeltetője számára, amelyek segítségével gyorsítható a betöltődés.
2. Túl sok DNS-keresés kiküszöbölése
Miért is lényeges ez? Ha a Javascript-fájlok különböző tartománynevekről töltődnek be, akkor az oldal igencsak lelassul a felhasználó számára az első látogatás alkalmával. Az előbbiekben említett oldalsebesség-mérés megmutatja az URL-ekben használt domain nevek listáját is, ezek számának csökkentésével pedig lefaragható a JavaScript futási ideje.
A Chrome-mal ugyancsak ellenőrizhetőek a domain nevek. A sütikkel ellentétben a DNS-cache törlése nem oldható meg túl könnyen, így a DNS-problémák nehezebben észlelhetők. A DNS-keresések számának csökkentése érdekében érdemes megfontolni, hogy a külsőleg hivatkozott JavaScript-fájlok másolatát szükséges-e a saját webhelyen tárolni. A döntés azonban nem könnyű, mivel, ha egy népszerű JavaScript-könyvtárat egy központi webhelyről töltesz le, akkor az a böngésző gyorsítótárában lehet, hogy már szerepel. Ha azonban egy másolatot helyezel el saját webhelyeden, megspórolhatod a DNS-keresést, ugyanakkor nagyobb ráfordítással jár a fájl másodszori letöltése.
3. Rosszul működő JavaScript eltávolítása
A rossz minőségű JavaScript lelassíthatja a weboldalt, ami aztán rossz felhasználói élményhez vezethet. Nem hatékony JavaScript fájlok jelenlétére utal például a csökkent végrehajtási idő, és az olyan scriptek, amelyekkel kapcsolatban rengeteg CPU-idő megy el a JavaScript kód elemzésére vagy végrehajtására.
Az is jelentős teljesítményproblémákat okozhat egy oldalon, ha rosszul kerül használatra a document.write Javascript funkció, mivel blokkolja más műveletek végrehajtását. A passzív figyelők használatának mellőzése szintén lelassíthatja a jelet.
Ez csak néhány példa volt, a JavaScript eredménytelen működésének azonban számos más oka is lehet. Általánosságban elmondható, hogy a Javascript-kód másképp történő megírása sokat segíthet.
4. Kihasználatlan JavaScriptek törlése
Ha egy kód gyakran kerül újra felhasználása a különböző webhelyeken, akkor előfordulhat, hogy az oldalak olyan JavaScriptet tartalmaznak majd, amelyre nincs szükség. Ha tudni szeretnéd, hogy webhelyeden van-e potenciálisan fel nem használt JavaScript, a Page Bit Insight alkalmazással rövid idő alatt ellenőrizheted.
5. JavaScript-fájlok kiterjedésének ellenőrzése
Minden esetben, de különösen a nagyobb méretű JavaScript-fájlok esetén nézd meg, hogy tömörítve vannak-e letöltéskor. Egy JavaScript-fájl általában tömörített formában jelenik meg, csökkentve ezzel a webböngésző által letöltendő bájtok számát. Bár a webböngészőnek több CPU-időt kell fordítania a fájl tartalmának tömörítésére, összességében mégis hasznos.
A PageSpeed Insights alkalmazáson belül létezik egy olyan rész, amely megjelöli azokat a JavaScript-fájlokat, amelyek esetében előnyös lehet a tömörítés. A művelet szerencsére könnyen kivitelezhető, a legtöbb webböngésző vagy tartalomkezelő rendszer ugyanis beépített támogatással rendelkezik a letöltések tömörítéséhez.
A JavaScript fájlokkal kapcsolatban nem árt utánanézni annak sem, hogy a megfelelő Cashe válasz-fejlécekkel kerültek-e visszaküldésre a lejárati idő vonatkozásában. A beállítások a Chrome felületén ellenőrizhetőek.
A webhelyen felmerülő problémák javítása során elsősorban arról kell meggyőződni, hogy a webhely megfelelő gyorsítótár-életciklus fejléceket ad-e vissza annak érdekében, hogy a böngészők gyorsítótárba helyezhessék a Javascript-fájlokat. Gondoskodni kell azonban arról, hogy a JavaScript-fájlok szükség esetén frissíthetők legyenek a webhely hibáinak kijavításához vagy új funkciók bevezetéséhez.
Erre az egyik megoldás az, hogy a letöltött fájl URL-címének részeként tartalmazza a fájl tartalmának verziószámát vagy hash-jét. Így a fájl minden egyes változatához új URL-cím kerül felhasználásra. A másik, hogy a fájlokra egy megosztott, nyilvános helyről hivatkozol. Ha a felhasználó olyan webhelyeket látogat meg, amelyek ugyanazt a JavaScript-fájlt használják újra, a böngésző a fájl korábban letöltött példányát használhatja, javítva ezzel a teljesítményt.
Összefoglalva: a JavaScript használatával jelentősen javítható a felhasználói élmény. Vigyázni kell azonban a JavaScript használata során felmerülő gyakori problémákra és érdemes azokat hatékonyan kezelni a sebességcsökkenés elkerülése érdekében.
