Gyorsítótárazás és HTTP-fejlécek: cache-alapok

Mi az a gyorsítótárazás (cache)?

A gyorsítótár több szinten is működhet: a felhasználó böngészőjében, egy közbülső CDN-en és a szerveren magán is. Minél közelebb van a másolat a felhasználóhoz, annál gyorsabb a kiszolgálás. A fenti ábra ezeket a szinteket szemlélteti a felhasználótól a szerverig.

A gyorsítótárazás az egyik leggyorsabban megtérülő sebességi eszköz, mert a visszatérő látogatóknak és a sok elemet betöltő oldalaknak érzékelhető gyorsulást ad. A kihívás nem a bekapcsolása, hanem a jó beállítása: úgy gyorsítani, hogy közben a frissített tartalom se ragadjon be a régi változatban.

Miért számít a gyorsítótárazás a gyakorlatban?

Egy tipikus weboldal betöltésekor a böngésző rengeteg különálló fájlt kér le: képeket, stílusokat, szkripteket, betűtípusokat. Ha ezeket minden látogatáskor újra le kellene tölteni, az minden alkalommal időbe és sávszélességbe kerülne. A gyorsítótárazással a visszatérő látogató szinte azonnal látja az oldalt, mert az elemek nagy része már nála van.

• Gyorsabb betöltés a visszatérő látogatóknak, mert kevesebb fájlt kell letölteni.
• Kisebb sávszélesség-használat, ami a felhasználónak és a szervernek is jó.
• Kevesebb szerverterhelés, ami csúcsforgalomban stabilabb működést ad.
• Jobb sebességi mutatók, amelyek az oldalélményt és a keresői megítélést is segítik.

A gyorsítótárazás tehát nem egyetlen látogatót gyorsít, hanem az egész rendszer hatékonyságát növeli. A jól beállított cache mellett a szerver csak a valóban szükséges, friss vagy dinamikus tartalmat állítja elő. Ez egyszerre javítja a sebességet és csökkenti az üzemeltetési terhelést.

A Cache-Control fejléc: meddig érvényes a tartalom?

A gyorsítótárazás viselkedését elsősorban a Cache-Control HTTP-fejléc vezérli, amely megmondja, meddig és hogyan tárolható egy tartalom. A legfontosabb irányelve a max-age, amely másodpercben adja meg, meddig tekinthető frissnek a másolat. Amíg ez az idő nem telik le, a böngésző a saját gyorsítótárából szolgál ki, új kérés nélkül.

A leggyakoribb Cache-Control irányelvek

• max-age: hány másodpercig tekinthető frissnek a tartalom.
• public: bármely gyorsítótár (böngésző, CDN) tárolhatja.
• private: csak a felhasználó böngészője tárolhatja, közbülső gyorsítótár nem.
• no-store: egyáltalán nem tárolható, mindig friss kérést igényel.
• immutable: a tartalom a lejáratig biztosan nem változik, felesleges újra ellenőrizni.

A fenti trendábra jól mutatja, hogy a hosszabb, de verziózott élettartam több kérést szolgál ki a gyorsítótárból, ami gyorsabb oldalt eredményez. A kulcs a verziózás: a hosszú max-age csak akkor biztonságos, ha a fájl neve változáskor is módosul, így a böngésző az új változatot új URL-ként tölti le.

ETag és Last-Modified: változott-e a tartalom?

Amikor egy gyorsítótárazott tartalom élettartama lejár, a böngészőnek el kell döntenie, kell-e újat letöltenie. Ebben segít az ETag és a Last-Modified fejléc: ezek a tartalom egyfajta ujjlenyomatát, illetve utolsó módosítási idejét hordozzák. A böngésző visszaküldi ezeket egy feltételes kérésben, és a szerver megmondja, változott-e valami.

Ha a tartalom nem változott, a szerver egy rövid „304 Not Modified” választ küld a teljes fájl helyett. Ez azt jelenti, hogy a böngésző nyugodtan használhatja a már nála lévő másolatot, és nem kell újra letöltenie a teljes adatot. Így a lejárat utáni ellenőrzés is gyors marad, mert a legtöbb esetben csak egy apró válasz utazik.

Az ETag és a Last-Modified tehát a gyorsítótárazás finomhangolásának eszköze: a felesleges újraletöltéseket előzi meg. Míg a max-age azt szabja meg, meddig ne kérdezz vissza egyáltalán, addig ezek a fejlécek a visszakérdezést teszik olcsóvá, amikor mégis szükség van rá.

Statikus és dinamikus tartalom eltérő kezelése

A jó gyorsítótárazás alapszabálya, hogy a különböző tartalomtípusokat különbözőképpen kell kezelni. A statikus, ritkán változó fájlokat - képeket, stílusokat, szkripteket - hosszan érdemes gyorsítótárazni, mert ezek sokáig ugyanazok maradnak. A gyakran változó vagy személyre szabott tartalmat viszont csak röviden vagy egyáltalán nem szabad tárolni.

• Statikus fájlok (kép, CSS, JS, betűtípus): hosszú max-age, de verziózott fájlnévvel.
• HTML-oldalak: rövidebb élettartam vagy feltételes ellenőrzés az ETag segítségével.
• Személyre szabott tartalom (kosár, fiók): private vagy no-store, hogy ne keveredjen.
• API-válaszok: a frissességi igény szerint finomhangolt, gyakran rövid élettartam.

A leggyakoribb hiba, ha a HTML-t is hosszan gyorsítótárazzák verziózás nélkül: ilyenkor a látogató a régi oldalt látja, hiába frissítetted a tartalmat. A helyes megközelítés a statikus elemek hosszú, verziózott tárolása és a HTML rövid vagy feltételes kezelése - így a frissítés azonnal látszik, a sebesség mégis megmarad.

A verziózás: hogyan frissülj be azonnal?

A hosszú gyorsítótárazás és a friss tartalom látszólag ellentmond egymásnak, de a verziózás feloldja ezt. A lényeg, hogy a fájl neve vagy URL-je változzon meg, amikor a tartalma módosul. A böngésző az új nevet új fájlként tölti le, a régit pedig nyugodtan gyorsítótárazhatja hosszan, mert az soha többé nem változik.

A verziózás gyakorlati módjai

A leggyakoribb módszer a fájlnév kiegészítése egy tartalomfüggő ujjlenyomattal vagy egy verziószámmal, például a stíluslap URL-jében. Amikor a fájl módosul, az ujjlenyomat is megváltozik, így a böngésző kénytelen az új változatot letölteni. Ez teszi lehetővé az immutable, akár egy éves gyorsítótárazást is minden kockázat nélkül.

Fontos, hogy minden verziózandó elemre gondolj, ne csak a stíluslapra: a szkriptekre és a fontosabb képekre is. Ha egy fájlt kihagysz, a látogató a régi, gyorsítótárazott változatot kaphatja, és az új funkció vagy javítás nem jelenik meg nála. A következetes verziózás ezért a hosszú gyorsítótárazás feltétele.

Egy egyszerű, jól működő gyorsítótárazási stratégia

A jó stratégia rétegenként ad más szabályt, ahogy a fenti ábra is mutatja: a statikus és a változó tartalom külön kezelést kap. A cél, hogy a lehető legtöbb kérés a gyorsítótárból szolgáljon ki, miközben a frissítés mindig azonnal megjelenik. Ez a kettősség adja a jól beállított cache lényegét.

• Verziózott statikus fájlok: hosszú max-age, public, immutable.
• HTML: rövid vagy nulla élettartam, feltételes ellenőrzéssel (ETag).
• Személyes tartalom: private vagy no-store, hogy sose keveredjen más felhasználóéval.
• CDN és szerver: egymással összhangban lévő szabályok, hogy ne legyen ütközés.

Ez a felállás a legtöbb weboldalnál jól működik, és egyszerűen karbantartható. A visszatérő látogató szinte azonnal látja az oldalt, a frissítés mégis rögtön megjelenik, mert a verziózás gondoskodik róla. A finomhangolás mindig a valós tartalomtípusokhoz igazodjon, ne egyetlen szabály uralja az egészet.

Tipikus gyorsítótárazási hibák

A leggyakoribb hiba a verziózás nélküli hosszú gyorsítótárazás: ilyenkor a frissített fájl a régi, eltárolt változatban ragad, és a látogató elavult tartalmat lát. Ez különösen a szkripteknél okoz fejtörést, mert egy be nem frissülő JavaScript miatt egy új funkció úgy tűnhet, mintha nem is működne. A megoldás mindig a következetes verziózás.

A másik véglet, amikor semmit sem gyorsítótáraznak, így minden látogatáskor minden fájl újra letöltődik - feleslegesen lassítva az oldalt. Gyakori hiba az is, hogy a személyes tartalmat közbülső gyorsítótár tárolja, ami adatszivárgáshoz vezethet. A jó beállítás mindkét szélsőséget elkerüli: gyorsít, ahol lehet, és óvatos ott, ahol kell.

Mikor érdemes szakértőt bevonni?

A gyorsítótárazás alapjait érdemes megérteni, de a helyes beállítás - a fejlécszabályok, a verziózás, a statikus és dinamikus tartalom szétválasztása - gyakran szakértelmet kíván. Ha frissítés után elavult tartalmat látsz, vagy egy új funkció „nem működik” a látogatóknál, jó eséllyel a gyorsítótárazás a felelős. Ilyenkor egy üzemeltetéssel foglalkozó szakértő gyorsan a hiba forrásáig jut.

Cégünk a weboldal üzemeltetés keretében a gyorsítótárazási szabályokat eleve verziózással és tartalomtípus szerinti bontással állítja be. Így a webhely gyors marad, a frissítések mégis azonnal megjelennek, és nem ragad be elavult tartalom a látogatóknál.

Ajánlott forrás: az MDN útmutatója a HTTP-gyorsítótárazásról.

Összegzés: a cache-alapok röviden

A gyorsítótárazás a tartalom másolatát tárolja közelebb a felhasználóhoz, így a következő kérés gyorsabban kiszolgálható - mindezt a böngésző, a CDN és a szerver szintjén. A viselkedést HTTP-fejlécek vezérlik: a Cache-Control adja meg, meddig érvényes a tartalom, az ETag és a Last-Modified pedig segít eldönteni, változott-e.

A jó gyakorlat rétegenként más szabályt ad: a verziózott statikus fájlokat hosszan, immutable módon gyorsítótárazd, a HTML-t rövid vagy feltételes ellenőrzéssel kezeld, a személyes tartalmat pedig private vagy no-store fejléccel óvd. A hosszú gyorsítótárazás feltétele a következetes verziózás, hogy a frissítés mindig azonnal megjelenjen.

A leggyakoribb hibák - a verziózatlan hosszú tárolás, a teljes tárolás hiánya és a személyes tartalom közbülső gyorsítótárazása - mind elkerülhetők egy egyszerű, tartalomtípus szerinti stratégiával. Ha frissítés után elavult tartalmat látsz, egy rövid üzemeltetési átvizsgálás megmutatja, hol akadt el a cache.