Kodėl naršyklės talpykla yra svarbi ir kaip ji veikia
Turbūt visi esame patyrę tą nemalonų jausmą, kai svetainė kraunasi amžinybę. Vartotojai tampa nervingi, o Google tai pastebi ir nubaudžia prastesne pozicija paieškoje. Vienas iš paprasčiausių būdų pagreitinti svetainės įkėlimą – tinkamai sukonfigūruoti naršyklės talpyklą (browser caching).
Principas paprastas: užuot kaskart atsisiųsdama tuos pačius failus (CSS, JavaScript, paveikslėlius), naršyklė juos išsaugo vartotojo kompiuteryje. Kai žmogus grįžta į svetainę ar pereina į kitą puslapį, naršyklė naudoja lokaliai išsaugotus failus vietoj to, kad siųstų naujus užklausimus serveriui. Rezultatas? Žymiai greitesnis įkėlimas ir mažesnė serverio apkrova.
Tačiau čia yra viena problema – kaip naršyklei pasakyti, kuriuos failus talpinti, kaip ilgai juos laikyti ir kada juos atnaujinti? Būtent čia ir prasideda konfigūravimo darbas.
HTTP antraščių magija: Cache-Control ir Expires
Naršyklės talpyklos valdymas vyksta per HTTP antraštes, kurias serveris siunčia kartu su kiekvienu failu. Dvi pagrindinės antraštės, su kuriomis dirbsime – Cache-Control ir Expires.
Cache-Control yra modernesnė ir lankstesnė. Ji leidžia nustatyti įvairius parametrus:
- max-age – nurodo, kiek sekundžių failas gali būti laikomas talpykloje
- public – failą gali talpinti bet kas (naršyklės, CDN, proxy serveriai)
- private – failą gali talpinti tik vartotojo naršyklė
- no-cache – naršyklė turi patikrinti su serveriu, ar failas nepasikeitė
- no-store – failo visiškai netalpinti (naudojama jautriems duomenims)
Pavyzdys: Cache-Control: public, max-age=31536000 reiškia, kad failas gali būti viešai talpinamas vienerius metus (31536000 sekundžių).
Expires antraštė veikia panašiai, tik nurodo konkrečią datą, kada failas taps pasenęs. Ji daugiau naudojama suderinamumui su senesnėmis naršyklėmis. Jei nustatytos abi antraštės, Cache-Control turi prioritetą.
Apache serverio konfigūracija praktikoje
Jei naudojate Apache serverį, talpyklos konfigūracija vyksta per .htaccess failą arba serverio konfigūracijos faile. Pirmiausia įsitikinkite, kad įjungtas mod_expires ir mod_headers moduliai.
Štai praktinis pavyzdys, kurį galite tiesiog nukopijuoti į savo .htaccess:
<IfModule mod_expires.c>
ExpiresActive On
# Paveikslėliai
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
# CSS ir JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
# Šriftai
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
# HTML
ExpiresByType text/html "access plus 0 seconds"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|webp|svg|woff|woff2|ttf|css|js)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
</IfModule>
Atkreipkite dėmesį, kad HTML failams nustatome labai trumpą talpyklos laiką arba jo visai nenustatome. Kodėl? Nes HTML dažniausiai yra dinaminis turinys, kuris keičiasi dažniau nei statiniai resursai.
Nginx konfigūracija – greičio entuziastams
Nginx vartotojai džiaugsis, nes čia viskas dar paprasčiau. Konfigūracija vyksta serverio bloke arba location direktyvose:
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location ~* \.(html)$ {
expires -1;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
Čia expires 1y automatiškai nustato ir Expires, ir Cache-Control antraštes. Parametras immutable yra ypač naudingas – jis naršyklei sako, kad failas tikrai niekada nepasikeis, todėl net perkrovus puslapį su Ctrl+F5, naršyklė nenaudos serverio resursų patikrinimui.
Versijų valdymas arba kaip atnaujinti talpyklą
Dabar iškyla klausimas: jei nustatėme, kad failai talpykloje gali būti saugomi metus, kaip vartotojai pamatys pakeitimus, kai atnaujinsime CSS ar JavaScript?
Atsakymas – versijų valdymas (cache busting). Yra keli būdai:
1. Query string metodas
Paprasčiausias būdas – pridėti versijos numerį ar laiką prie failo URL:
<link rel="stylesheet" href="styles.css?v=1.2.3"> <script src="app.js?v=20240115"></script>
Kai atnaujinate failą, pakeičiate versijos numerį, ir naršyklė laiko tai nauju failu.
2. Failo pavadinimo keitimas
Profesionalesnis būdas – įtraukti hash’ą į failo pavadinimą. Daugelis build įrankių (Webpack, Vite, Parcel) tai daro automatiškai:
styles.a3f2b1c8.css app.9d4e2f1a.js
Kai failas pasikeičia, pasikeičia ir hash’as, todėl naršyklė žino, kad tai naujas failas.
3. Service Workers
Progresyviose web aplikacijose galite naudoti Service Workers, kurie suteikia visišką kontrolę, kokie failai talpinami ir kaip jie atnaujinami. Tai sudėtingesnis metodas, bet suteikia maksimalų lankstumą.
CDN ir talpyklos sluoksniai
Jei naudojate CDN (Content Delivery Network) kaip Cloudflare, AWS CloudFront ar Fastly, turite papildomą talpyklos sluoksnį. CDN serveriai taip pat talpina jūsų failus ir turi savo taisykles.
Svarbu suprasti hierarchiją:
- Vartotojo naršyklės talpykla (browser cache)
- CDN edge serverių talpykla
- Jūsų origin serverio talpykla
Konfigūruojant CDN, atkreipkite dėmesį į šiuos dalykus:
Cache-Control antraštės respektavimas – dauguma CDN pagal nutylėjimą gerbia jūsų nustatytas antraštes, bet galite jas perrašyti CDN lygyje.
Query string elgesys – kai kurie CDN pagal nutylėjimą ignoruoja query string parametrus talpyklos tikslais. Tai gali sukelti problemų su versijų valdymu.
Purge funkcionalumas – geri CDN tiekėjai leidžia rankiniu būdu išvalyti talpyklą, kai reikia skubiai atnaujinti turinį.
Dažniausios klaidos ir kaip jų išvengti
Per daugelį metų esu matęs įvairiausių talpyklos konfigūravimo klaidų. Štai dažniausios:
Per ilgas HTML talpyklos laikas
Daugelis nustatę agresyvų caching’ą visiems failams, įskaitant HTML. Rezultatas – vartotojai nemato atnaujinimų. HTML turėtų būti talpinamas trumpai arba su no-cache direktyva.
Nepakankamas statinių resursų talpyklos laikas
Priešinga problema – nustatyti tik kelias minutes ar valandas paveikslėliams ir CSS. Jei turite versijų valdymą, drąsiai nustatykite metus ar daugiau.
Ignoruojamas Vary antraštė
Jei jūsų turinys skiriasi priklausomai nuo Accept-Encoding, User-Agent ar kitų antraščių, turite naudoti Vary antraštę:
Vary: Accept-Encoding
Tai naršyklei ir CDN pasako, kad failas gali skirtis priklausomai nuo šių parametrų.
Jautrių duomenų talpinimas
Asmeniniai duomenys, autentifikacijos atsakymai ir kitas jautrus turinys niekada neturėtų būti talpinami. Naudokite:
Cache-Control: private, no-cache, no-store, must-revalidate
Testavimas ir matavimas: ar tikrai veikia?
Konfigūracija be testavimo – tai tik spėliojimai. Štai kaip patikrinti, ar jūsų talpykla veikia teisingai:
Browser DevTools
Atidarykite Chrome DevTools (F12), eikite į Network tab ir perkraukite puslapį. Stulpelyje „Size” matysite:
- „disk cache” arba „memory cache” – failas paimtas iš talpyklos
- Faktinis dydis (pvz., „45.2 KB”) – failas atsisiųstas iš serverio
Stulpelyje „Time” talpinti failai turėtų rodyti tik kelis milisekundžius.
Response Headers tikrinimas
Tame pačiame Network tab spustelėkite ant bet kurio failo ir pažiūrėkite Response Headers. Turėtumėte matyti savo nustatytas Cache-Control ir Expires antraštes.
Online įrankiai
Naudokite tokius įrankius kaip:
- GTmetrix – rodo detalią talpyklos analizę
- WebPageTest – leidžia palyginti pirmą ir pakartotinį apsilankymą
- Google PageSpeed Insights – duoda rekomendacijas dėl talpyklos
cURL komanda
Techniniam patikrinimui naudokite cURL:
curl -I https://jusu-svetaine.lt/styles.css
Tai parodys visas HTTP antraštes, įskaitant talpyklos direktyvas.
Kai viskas sudėliota į vietas
Tinkamas naršyklės talpyklos konfigūravimas nėra vienkartinis darbas – tai procesas, kuris reikalauja supratimo, testavimo ir nuolatinio tobulinimo. Bet rezultatai to verti: greitesnis svetainės įkėlimas, laimingesni vartotojai, mažesnė serverio apkrova ir geresnis SEO.
Pradėkite nuo paprastos konfigūracijos: ilgas talpyklos laikas statiniams resursams su versijų valdymu, trumpas arba jokio talpyklos HTML failams. Išbandykite, pamatuokite rezultatus, koreguokite. Neužmirškite, kad skirtingi projektai gali reikalauti skirtingų strategijų – e-commerce svetainė turės kitokius poreikius nei korporacinis blog’as.
Ir dar vienas patarimas: dokumentuokite savo talpyklos strategiją. Po pusės metų, kai reikės kažką pakeisti, būsite dėkingi sau už tuos kelis sakinius, paaiškinus, kodėl pasirinkote būtent tokią konfigūraciją. Nes talpyklos problemos dažnai pasireiškia netikėčiausiu metu, ir greitai suprasti, kas ir kodėl sukonfigūruota tam tikru būdu, gali sutaupyti daug nervų ir laiko.