A Google 6 módszert osztott meg arról, hogyan teheted webhelyed még hatékonyabbá, még gyorsabbá.
A lenti videóban Alan Kent 6 optimalizációs módszert oszt meg. Kent áttekinti a problémákat és javaslatokat mond azok javítására.
1. Kerüld a JavaScript fájlok külön külön fájlokból történő betöltését
A JavaScript fájlok száma nagyon sok lehet, főleg ha alkalmazásunk eléggé összetett. A fejlesztők ilyenkor az áttekinthetőség érdekében külön fájlokba szervezik ki a kódot. De ez produktív környezetben nem hasznos, sőt teljesítmény problémákhoz vezethet.
Ha tudjuk minimalizálni a betöltendő fájlok mennyiségét a böngészőkbe, az hatalmas teljesítmény növekedést tud eredményezni.
A problémát könnyen ellenőrizheted, valamely weboldal sebesség ellenőrző online alkalmazással, mint például a https://pagespeed.web.dev -el, de a Google Webmester eszközök is tud jelentést készíteni az oldal állapotáról.
A produktív oldaladon , azaz az éles környezetben használj olyan kiegészítőket, amik a JS fájljaidat minimalizálják és egy fájlba gyúrják azt automatikusan. Mint például a Webpack (https://webpack.js.org)
2. Kerüld a túlzott számú DNS kérést
Ha sok CDN-t használsz JS fájljaid betöltéséhez az túlzott számú DNS kérésekhez vezethet. A CDN hasznos dolog ugyan, de ha a több különböző helyről betöltött JS-t használunk, az több kárt okozhat, mint hasznot.
A fent is említett sebesség mérő oldalak a túlzott DNS kérések számának detektálásában is hasznos lehet.
Ha sok különböző JS könyvtárat használ webalkalmazásunk, akkor el kell gondolkodni azon, hogy a saját szerverünkkel kiszolgálni ezt, optimálisabb lenne.
3. Távolítsd el a nem hatékony JS kódokat és cseréld hatékonyabbra
A régi rossz minőségű kódok is teljesítmény problémát okozhatnak.
Elemezzük kódunkat. Ellenőrizzük, hogy mekkora CPU időt használnak, mekkora a memória igényük. A nagy igényű kódok lelassítják a felhasználó gépét, ezáltal a felhasználói élmény csökken, az oldallal szemben mutatott elégedetlenség növekszik.
Kerüljük a betöltődést blokkoló kódokat, amik megakadályozzák az oldal betöltését futásukkal. Ha lehetséges, az összes JS betöltését a lezáró body-tag elé tegyük. Kerüljük a fel nem használt függvények és változók használatát. Kerüljük a hibát okozó kódokat, amik bizonyos esetekben teljesen megakadályozhatják, hogy az oldal betöltésre kerüljön.
A megoldás a tudásunknak megfelelő optimális kód írása. Mindig kövessük a trendeket és tanuljunk. Sajnos ez egy akkora témakör, hogy sem a lenti videó, sem ez a cikk ezt most nem tárgyalja.
4. Kerüljük a fel nem használt JavaScriptet
Ha weboldalunk vagy webalkalmazásunk több lapból áll, akkor előfordulhat, hogy egyik kódra szükség van az egyik oldalon, viszont nincs a másik oldalon. Ekkor meg kell oldanunk azt, hogy azok a kódok, amikre nincs az adott oldalon szükség, ne töltődjenek be. Ez a hiba egyben a saját szerverünk és a felhasználó gépének erőforrásainak pazarlása is.
Megoldásként a Google a tree-shaking nevű technikát ajánlja, amellyel azonosítani lehet a meg nem hívott JavaScriptet, amely biztonságosan törölhető.
5. Tömörítsük a JS fájlokat.
A tömörített JS fájlok kitömörítése ugyan CPU igényes művelet, mégis összességében nyerhetünk a tömörítés alkalmazásával.
A Google PageSpeed Insights-nek van olyan funkciója, amely képes felismerni, hogy mely kódrészeket érdemes tömöríteni.
A legtöbb webböngésző vagy tartalomkezelő rendszer beépített támogatással rendelkezik a letöltések tömörítéséhez, ha megfelelően vannak konfigurálva.
6. Állítsuk be JS fájlok gyorsítótárazásának megfelelő időtartamát
Tegyünk róla, hogy a JS fájlok megfelelő lejárati idő fejléccel töltődjenek le a felhasználó gépére. Ezzel elkerülhető, hogy a felhasználó minden egye oldalbetöltés esetén újból és újból a szerverünkről töltse le a JS fájlt. A cachelt JS fájl lejárati idejének megadásával segíthetjük ezt a folyamatot, optimalizálhatjuk a működést.
A Chrome Developer Tools Hálózatkezelés lapján ellenőrizheted a letöltött JavaScript-fájlok HTTP-válaszfejléceit. Keress olyan fejléceket, mint például a Cache Control.
Fent ugyan említettem, hogy a CDN nem hasznos, ha több helyről töltődik be. (Ezért lehetőleg minden JS-t egy CDN-ről szerezzük be). Ezáltal előfordulhat az, hogy ha a felhasználó már volt olyan oldalon, ami használta a ugyanazt a CDN-t, amit mi is, akkor a mi oldalunk meglátogatásakor a felhasználó cache-ében benne van ez a JS fájl, így már tőlünk nem kell letölteni, az rendelkezésre áll. Természetesen amennyiben nem futott ki a lejárati időből. Például egy React.JS-t lehet nagy lejárati idővel is CDN-ről kiszolgálni.
VIDEO
Ha részletesebben akartok foglalkozni a témával, akkor ajánlom ezt a videót, amiben Alen Kent részletesebben beszél a témáról.
Ha érdekel a webfejlesztés, várlak a Discord-on
