Jelenítsd meg a statikus eszközöket hatékony cache beállításokkal

Cache — létfontosságú stratégia az oldal sebességének növelésére

A cache webhelyen és a webböngészőben való használata segít javítani a teljesítményt, például a betöltési időt, és hozzájárul a jobb felhasználói élmény megteremtéséhez. A cache egy létfontosságú stratégia az oldal sebességének javításához, de csak akkor hatékony, ha a megfelelő típust használod.

Íme egy hatékony módszer a webhely teljesítményének növelésére: a statikus eszközök megjelenítése hatékony cache beállításokkal.

Nagy eséllyel lefuttattál már egy oldalsebesség-tesztelő eszközt és találkoztál a „statikus eszközök kiszolgálása hatékony gyorsítótár-szabályzattal (serve static assets with an efficient cache policy)” kifejezéssel. Mi is ez valójában? Hogyan lehet ezt jól csinálni? Ebben a cikkben erről lesz szó és a hatékony cache policy fontosságáról. Végigvesszük a webes cachelés négy különböző típusát, hogy mikor érdemes használni őket, és hogyan kell beállítani őket.

Jelenítsd meg a statikus eszközöket hatékony cache beállításokkal

Amikor meglátogatsz egy webhelyet, a böngésződ az oldal egyes részeit a számítógép merevlemezén tárolja. A böngésződ többek között a következőket tárolja:

• Képek, logók, hátterek…
• HTML
• CSS
• JavaScript

Röviden, a böngészők jellemzően cache-elik az úgynevezett „statikus eszközöket” – azaz a webhely olyan részeit, amelyek nem változnak látogatásról látogatásra.

Azt, hogy mi és mennyi ideig tárolódik a cache-ben, a weboldal határozza meg. Egyes elemek néhány nap alatt eltűnnek a gépről, míg mások akár egy évig is a cache-ben (gyorsítótárban) maradhatnak.

A cache előnyei

Amikor először látogatsz meg egy webhelyet, a böngésződ gyors kommunikációt folytat a webhelynek otthont adó távoli szerverrel. A böngésző kérést küld, a szerver pedig visszaküldi a weboldal egyik eszközét. Az oldal HTML-je töltődik le elsőként, és ez alapján épül fel a webhely. Ahogy a böngésző elolvassa a HTML-kódot, további kéréseket küld a kiszolgálónak, hogy az oldal további részeit, főként a fent említett statikus eszközöket küldje el.

Vizuálisan ez valahogy így néz ki:

A cache-elés során a korábban már meglátogatott webhely statikus elemeit nem kéri le a böngészőnk újra minden egyes oldalmegnyitáskor, hanem egy korábbi látogatás alapján azt a számítógépünkre elhelyezett cache-fájlból szolgálja ki.

Ez a cache-elés eljárás a weboldalak optimalizálása szempontjából kulcsfontosságú, mivel gyorsabban töltődnek be az elemek.

Egyes weboldalak teljes letöltése és működőképessé, interaktívvá válása sok időt vesz igénybe, mert sok részből állnak, vagy túl méretesek az eszközeik.

Észreveheted például, hogy amikor először megnyitsz egy weboldalt, a szöveg előbb jelenik meg, mint a képek. Ez azért van így, mert a szöveg esetében kevés időt vesz igénybe a letöltés, míg egy jó minőségű kép betöltése több másodpercig (számítási időben egy örökkévalóságig) is eltarthat.

Cache használatával javul és gyorsul a böngészés. Miután letöltesz egy eszközt, az (egy ideig) a gépen továbbra is megtalálható marad. A fájlok letöltése a merevlemezről mindig gyorsabb lesz, mint egy távoli szerverről, függetlenül attól, hogy milyen gyors az internetkapcsolat.

Vegyünk például egy tipikus e-kereskedelmi oldalt. Bizonyos eszközök, mint például a logó, minden oldalon pontosan ugyanott jelennek meg, függetlenül attól, hogy a weboldalon éppen melyik aloldalon tartózkodunk. Tárolás nélkül a gépednek minden alkalommal le kellene töltenie ezt a logót, amikor egy új termékoldalra kattintasz.

A gyors, gördülékeny böngészési élmény elengedhetetlen ahhoz, hogy a vásárlók kényelmesen érezzék magukat, és ösztönözze a konverziót. Ráadásul, amikor a felhasználó legközelebb meglátogatja a cachelt weboldalt, ezek az eszközök még mindig elérhetőek lesznek az eszközén, így gyorsabban betöltődnek.

A mobil eszközök sávszélessége gyakran korlátozott. Egyes mobil adatátviteli csomagok sávszélesség-korlátozással vagy díjakkal is rendelkeznek. Minél kevesebbet kell a felhasználónak letöltenie egy weboldalról, annál jobb neki.

Néhány buktató

Egyes esetekben azonban kellemetlenségeket is tud okozni a cache.

Tegyük fel, hogy engedélyezted az eszközök cachelését a weboldalon. Másnap úgy döntesz, hogy megváltoztatod a logó színét. Kicseréled a régi logót az új logóra, és ellenőrzöd a weboldalon, hogy hogyan néz ki. Meglepetésedre a régi logó van még mindig ott.

Feltételezve, hogy a képcserét helyesen hajtottad végre, a probléma forrása a cachelésben keresendő.

A géped merevlemezén még ott van a logó egy korábbi cachelt változata. A géped addig nem kapja meg az új logót, amíg a cacheben tárolt fájl le nem jár.

A böngészők, illetve az internetet elosztó otthoni vagy irodai router-ek a cache-elés során például nem mindig mutatják egy változtatás hatását azonnal. Ennek kiküszöbölésére ajánlott:

• a böngészők cookie- és cache tárának (előzmények) ürítése
• a router-cache kiürítése, vagy a router újraindítása
• privát böngésző ablakban való újramegtekintés

A cachelt fájlok régi verziói mindenféle problémát tudnak okozni a felhasználóknak, ha az eszközeik nem rendelkeznek a fájl legújabb verziójával – a nem megfelelő formázás, a hibás JavaScript és a hibás képek csak néhány ilyen probléma.

A legtöbbször ez nem történik meg, mert a kiszolgáló tudja, hogy mely eszközök frissültek, és melyeket kell kicserélni a felhasználó gépén. Ha azonban valamelyik ügyfeled panaszkodik, hogy a webhely nála hibásan jelenik meg, és senki másnál nem problémás, akkor azt kell tanácsolnod neki, hogy törölje ki a böngésző gyorsítótárát.

Minden nagyobb böngésző rendelkezik a „cache/gyorsítótár törlése” gombbal. Néhányat könnyebb megtalálni, mint másokat. A gomb megnyomásával az összes gyorsítótárban tárolt fájl törlődik. Próbáld ki. Látogass el egy általad gyakran látogatott oldalra, és figyeld meg, mennyi időbe telik a betöltés. Töröld a gyorsítótárat. Látogass el újra az oldalra, és figyeld meg, mennyivel tovább fog tartani az oldal betöltése.

A böngészők lehetővé teszik, hogy a gyorsítótárat csak bizonyos webhelyek esetében töröld. Ha csak egy weboldalon van gond a cache-el, töröld a problémás oldal cache-ét, a többit pedig hagyd érintetlenül, hogy a böngészés gyors és gördülékeny maradjon.

A cachelés különböző típusai

Többféle cache létezik.

1. Oldal cache vagy page cache
2. Böngésző cache
3. Szerver cache
4. Micro cache

Most már tudod, hogy a cachelés (gyorsítótárazás) olyan technika, amely egy adott erőforrásod másolatát tárolja, és kérésre visszatölti. Amikor tehát egy webes gyorsítótár tárolja a kért erőforrást, akkor a kérésre visszaküldi a másolatot, ahelyett, hogy újra letöltené azt a kiindulási szerverről.

Ezzel több célt is elérünk: tehermentesítjük a szervert, amelynek nem kell minden egyes ügyfelet egyesével kiszolgálnia, és javítjuk a teljesítményt, mivel kevesebb időt vesz igénybe az erőforrás visszaküldése. Egy webhely esetében ez a jó teljesítmény elérésének egyik fő összetevője. Fontos persze megfelelően konfigurálnunk, mivel nem minden erőforrás marad örökre azonos: fontos, hogy egy erőforrást csak addig cacheljünk, amíg az nem változik és nem tovább.

A megfelelő típusú cachelés kiválasztásával növelheted az oldal betöltési sebességét és javíthatod az oldalad felhasználói élményét (UX).

A megfelelő típusú cache kiválasztásához jó, ha ezeket tudod:

Oldal cache / Page cache: Ideális statikus tartalmakhoz.
Böngésző cache: Népszerű és hatékony kliensoldali cachelés.
Szerver cache: A legjobb a nagy forgalmú weboldalak számára, amelyeknek csökkenteniük kell a szerver terheltségét.
Micro cache: Célzott lehetőség a rendkívül dinamikus webhelyek számára.

Oldal cache / Page cache

Az oldal cache vagy page cache a weboldal adatait a weboldal első betöltésekor tárolja. Minden további alkalommal, amikor a felhasználó visszatér a webhelyre, a mentett elemek gyorsabban elérhetők és megjeleníthetők lesznek.

Ez egyfajta kliensoldali gyorsítótárazást jelent, ami azt jelenti, hogy az összes tárolt elemet a végfelhasználó vezérli. Webhelytulajdonosként az egyetlen beleszólása az, hogy mennyi ideig marad a tartalom a cacheben/gyorsítótárban.

Ha egy oldalnak olyan elemei vannak, amelyek soha nem változnak, akkor a cache lejárati dátumát állíthatod 1 évre. A rendszeresen változó elemeknek azonban rövidebb lejárati idővel kell rendelkezniük, hogy rendszeresen frissüljenek. Ellenkező esetben a webhelyed továbbra is elavult tartalmat fog megjeleníteni a visszatérő felhasználók számára, még a frissítések közzététele után is.

Emiatt a page cache ideális a sok statikus tartalommal rendelkező webhelyek számára. Mivel a webhelyed ritkán változik, a felhasználók továbbra is gyorsan betölthetik oldalait, miközben továbbra is webhelyednek legfrissebb verzióját láthatják. A sok dinamikus funkciót tartalmazó webhelyek jobban profitálhatnak a cachelés más típusaiból.

Böngésző cache

Mi az a böngésző cache, a böngésző gyorsítótárazása? A böngésző gyorsítótárazása a végfelhasználó webböngészőjébe van beépítve. A weboldal elemeit a böngésző a látogató számítógépén tárolja, és a webhelyhez kapcsolódó más fájlokkal együtt csoportosítja. A böngésző cache tartalmazhat HTML-oldalakat, CSS stíluslapokat, képeket és egyéb multimédiás tartalmakat.

Minden alkalommal, amikor a böngésző betölti a weboldalt, le kell töltenie az összes webfájlt, hogy megfelelően megjelenítse az oldalt. Ez magában foglalja az összes HTML-t, CSS-t, JavaScriptet és képet. Egyes oldalak esetleg csak néhány fájlból állnak, és kis méretűek – talán néhány kilobájtosak. Mások esetében ez azonban temérdek sok fájl is lehet, és ezek összességében több megabájtnyi méretűek lehetnek. Az ilyen nagy fájlok betöltése hosszabb időt vesz igénybe, és különösen fájdalmas lehet, ha lassú internetkapcsolaton (vagy mobileszközön) van a felhasználó. Mivel cache használata nélkül minden egyes fájl külön kérést intéz a szerverhez. Minél több kérés érkezik egyszerre a szerverre, annál több munkát kell elvégeznie, ami tovább csökkenti az oldal sebességét.

A böngésző cache használata segít azáltal, hogy néhány ilyen fájlt helyben, a felhasználó böngészőjében tárol. Az első látogatáskor ugyanannyi időbe telik a betöltés, azonban amikor a felhasználó újra meglátogatja a webhelyet, vagy frissíti az oldalt, vagy akár átmegy a webhely egy másik oldalára, akkor a szükséges fájlok egy része már a cacheből fog betöltődni.

Ez azt jelenti, hogy a felhasználó böngészőjének kevesebb adatot kell letöltenie, és kevesebb kérést kell intéznie a szerverhez. Az eredmény? Csökken az oldalbetöltési idő.

Hogyan működik a böngésző cache?

A böngésző cache úgy működik, hogy bizonyos oldalakat vagy oldalrészeket különböző időközönként frissít. A weboldalon található logó például valószínűleg nem változik napról napra. A logó képének gyorsítótárazásával megmondhatjuk a felhasználó böngészőjének, hogy csak hetente egyszer töltse le ezt a képet.

Azzal, hogy a webszerver megmondja a böngészőnek, hogy tárolja ezeket a fájlokat, és ne töltse le újra őket, amikor a felhasználó visszatér az oldalra, időt takarít meg a felhasználóknak és kedvezően hat a webszerver sávszélességére.

A böngésző cachet manuálisan is bekapcsolhatod. Ehhez lépj be a weboldal .htaccess fájljába. A szerver eléréséhez FTP (File Transfer Protocol) protokollt és FTP-klienst kell használnod. A lejárati időt tetszés szerint frissítheted. Ha több dinamikus funkciója van az oldaladnak, mint statikus eleme, a lejárati időnek rövidnek kell lennie, hogy ne elavult tartalmat mutass a felhasználóidnak.

Miért fontos a böngésző gyorsítótárazása?

A böngésző cache használata csökkenti a webszerver terhelését, ami végső soron csökkenti a betöltési időt a felhasználók számára.

Szerver cache

A kiszolgálói gyorsítótár a gyorsítótárazás számos különböző típusát lefedi. Ide tartozik a tartalomszolgáltató hálózat (CDN) gyorsítótárazása, az objektum gyorsítótárazása és az opcode gyorsítótárazása. Mindegyik más-más tartalmat tárol a webhely kiszolgálóján. Ezt a fajta gyorsítótárazást a webhelytulajdonosok kezelik a végfelhasználók hozzájárulása nélkül.

A szerver gyorsítótárazása az egyik legjobb módszer a szerverterhelés csökkentésére. Amikor egy kérés érkezik, a szerver ellenőrzi az ideiglenes tárolóját a szükséges tartalomért, mielőtt teljes egészében feldolgozná a kérést.

Ha a kért tartalom elérhető a szerver gyorsítótárában, akkor az azonnal visszakerül a böngészőhöz. Ez lehetővé teszi, hogy a szerver nagyobb forgalmat tudjon kezelni, és gyorsabban adja vissza a weboldalakat.

A szerver cache beállításához használt módszerek sokfélék. A Cloudflare egy népszerű CDN a WordPress felhasználók számára. Ha objektum gyorsítótárazást szeretne aktiválni, a WordPress rendelkezik egy beépített rendszerrel, amelyet használhat.

Az opkódok gyorsítótárazásához egy WordPress bővítményre, például a WP Rocketre vagy W3Total Cachere lesz szükséged. Telepítése és aktiválása után az opcode cachingnek automatikusan el kell indulnia. A gyorsítótárat a bővítmény beállításaiban frissítheted vagy törölheted.

Micro cache

A micro cache-elés során bizonyos tartalmakat ideiglenesen, nagyon rövid időre helyezünk a gyorsítótárba. Ez alatt az idő alatt az összes többi, ugyanarra a tartalomra irányuló kérés a szerver helyett a gyorsítótárból kapja meg a tartalmat. A micro cache-elés ugyanúgy működik, mint a hagyományos cache-elés, csupán két különbség van: 1) a cache-elés időtartama (nagyon rövid) és 2) a típusa (eseményvezérelt, amit gyakran tévesen dinamikusnak tekintenek).

Hogyan működik a micro cache?

A micro cache-elés korlátozza a szerverhez érkező kérések mennyiségét azáltal, hogy a cache-kiszolgálók nagyon rövid ideig tárolják a tartalmat. A micro cache-elés engedélyezése az útvonal (path) beállítását és a gyorsítótár paramétereinek konfigurálását jelenti a proxy_cache_path direktívában. A folyamatot a proxy_cache direktívával aktiválhatod.

Amikor a felhasználók lekérnek egy eszközt, a tartalom a gyorsítótárba kerül, így a következő felhasználó, aki ugyanazt az eszközt kéri, ebből a gyorsítótárból fogja megkapni. A micro cache-elés eredményeként, ha 200 felhasználó 5 másodpercen belül kéri le ugyanazt az eszközt, akkor 40 felhasználóból csak 1 felhasználónak kell hozzáférnie az eredeti tartalomhoz (másodpercenként 40 felhasználóval kalkulálva).

Hol használnak micro-cachelést?

Leginkább a híroldalak, a tőzsdei kereskedési weboldalak és a sportszámlák weboldalai használják a mikrocache-elést. A CDN nagy forgalmú webhelyek esetében eseményvezérelt tartalmak gyorsítótárazására is használható. Ezeken a webhelyeken a tartalom kiszámíthatatlan ideig statikus marad, amíg egy esemény bekövetkezik vagy valami történik.

Híroldalak: A tartalmat a híreknek megfelelően, kiszámíthatatlan módon frissítik. Ezenkívül előfordulhat, hogy a tartalmat frissíteni kell, ha új hozzászólások érkeznek.

Tőzsdei kereskedési webhelyek: A részvényárak gyakran változnak a kereskedés során, és csak nagyon rövid ideig maradnak statikusak. Az árak azonban hosszabb ideig statikusak maradnak éjszaka, hétvégén, ünnepnapokon és egyéb olyan időszakokban, amikor nincs kereskedés.

Sportértékelési weboldalak: A pontszámok száma és a pontszámok időpontja általában kiszámíthatatlan, és az eredményeket minden alkalommal frissíteni kell, amikor egy csapat pontot szerez.

A gyorsítótárazással biztosítható, hogy a látogatók továbbra is gyorsan hozzáférjenek a legfrissebb tartalomhoz. Biztosítja, hogy amikor a weboldal vagy webhely nagy terhelés alatt áll, a látogatók többsége az oldal másolatát a statikus tartalom gyorsítótárából kapja meg, nem pedig az eredeti szerverről. Az eljárás csökkenti a szerver terhelését, és javítja a weboldal általános teljesítményét.