Nginx'da statik fayllarni keshlash: Cache-Control, expires va versiyalash

Sayt sahifasining katta qismi har tashrifda o'zgarmaydigan fayllardan iborat: logotip, shriftlar, CSS uslublar, JavaScript kutubxonalar, mahsulot rasmlari. Agar server bu fayllarni brauzerga qanday saqlash kerakligini aytmasa, brauzer ularni har safar qayta so'raydi yoki hech bo'lmaganda o'zgarganmi deb tekshiradi. Keshlash sarlavhalari to'g'ri qo'yilganda esa foydalanuvchi saytga ikkinchi marta kirganda bu fayllar diskdan olinadi, tarmoqqa umuman murojaat qilinmaydi va sahifa sezilarli tezroq ochiladi.

Brauzer keshi qanday ishlaydi

Server javobida Cache-Control sarlavhasi orqali fayl qancha vaqt yangi hisoblanishini bildiradi, masalan Cache-Control: max-age=2592000 30 kunni anglatadi. Bu muddat ichida brauzer faylni serverdan so'ramaydi. Muddat tugagach, brauzer shartli so'rov yuboradi: If-None-Match sarlavhasida avvalgi ETag qiymatini yoki If-Modified-Since sarlavhasida sanani ko'rsatadi. Fayl o'zgarmagan bo'lsa, server faqat qisqa 304 Not Modified javobini qaytaradi va fayl qayta yuklanmaydi.

Eski Expires sarlavhasi ham shunga o'xshash vazifani bajaradi, lekin u aniq sanani ko'rsatadi. Zamonaviy brauzerlar ikkalasi bo'lganda Cache-Control ga ustunlik beradi. Nginx'dagi expires direktivasi qulay, chunki u ikkala sarlavhani ham bir vaqtda qo'yadi.

Asosiy muammo: faylni yangilaganda nima bo'ladi

Uzoq keshlashning yagona xavfi shundaki, siz CSS faylni o'zgartirsangiz, foydalanuvchi brauzeri eski nusxani kesh muddati tugaguncha ko'rsatishda davom etadi. Buning standart yechimi fayl nomini versiyalash. Vite, Webpack kabi vositalar yig'ish paytida fayl nomiga mazmun xeshini qo'shadi, masalan app.3f9a2c.css. Fayl o'zgarsa nomi ham o'zgaradi, HTML yangi nomga havola qiladi va brauzer yangi faylni yuklaydi. Bunday fayllarni bir yilga va immutable belgisi bilan keshlash mumkin.

Agar sayt yig'ish vositasidan foydalanmasa, oddiy usul so'rov parametri qo'shishdir: style.css?v=12. WordPress ham uslub va skriptlarga versiya parametrini avtomatik qo'shadi. HTML sahifaning o'zini esa uzoq keshlash kerak emas, aks holda foydalanuvchi yangi fayl nomlarini ko'rmay qoladi.

Nginx sozlamasi

Quyidagi bloklar sayt konfiguratsiyasidagi server bo'limiga yoziladi. Ular fayl kengaytmasiga qarab turli kesh muddatini belgilaydi:

# Versiyalangan CSS va JS: bir yil, o'zgarmas
location ~* \.(?:css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

# Rasmlar va shriftlar: 30 kun
location ~* \.(?:png|jpe?g|gif|webp|avif|svg|ico|woff2?)$ {
    expires 30d;
    add_header Cache-Control "public";
    access_log off;
}

# HTML: har safar tekshirilsin
location ~* \.html$ {
    expires -1;
}

expires 1y javobga Expires sanasini va Cache-Control: max-age=31536000 qo'shadi. add_header esa qo'shimcha Cache-Control qatori qo'shadi, brauzerlar ikkala qatorni birlashtirib o'qiydi. expires -1 esa HTML'ni keshdan foydalanmasdan har safar tekshirishga majbur qiladi. Statik fayllar uchun kirish logini o'chirish (access_log off) disk yozuvini kamaytiradi va loglarni o'qishni osonlashtiradi.

add_header bilan bog'liq tuzoq

Nginx'da muhim nozik jihat bor: agar ichki location blokida birorta add_header yozilsa, yuqori darajadagi (server yoki http blokidagi) barcha add_header direktivalari shu blok uchun meros bo'lib o'tmaydi. Masalan, xavfsizlik sarlavhalari (X-Content-Type-Options, Strict-Transport-Security) server darajasida qo'yilgan bo'lsa, ular rasmlar va CSS javoblaridan yo'qolib qoladi. Bu holatda kerakli sarlavhalarni har bir location ichida takrorlash yoki ularni alohida faylga chiqarib include qilish kerak.

Serverning o'z keshi: open_file_cache

Brauzer keshidan tashqari, Nginx tez-tez so'raladigan fayllar haqidagi ma'lumotni (fayl deskriptorlari, hajmi, o'zgarish vaqti) xotirada saqlay oladi. Bu ko'p fayl tarqatadigan saytlarda disk murojaatlarini kamaytiradi. Sozlama http blokiga yoziladi:

open_file_cache max=10000 inactive=60s;
open_file_cache_valid 120s;
open_file_cache_min_uses 2;
open_file_cache_errors on;

Bu sozlama fayl mazmunini emas, faqat uning metama'lumotlarini keshlaydi. Mazmunni tez berish uchun operatsion tizimning o'z sahifa keshi va sendfile on; direktivasi javob beradi, ular odatda standart sozlamada yoqilgan bo'ladi.

Misol: Namangandagi xususiy klinika sayti

Namangandagi xususiy klinika saytida shifokorlar rasmlari, xizmatlar ro'yxati, qabulga yozilish formasi va xarita bor. Bemorlar saytga tez-tez qaytadi: qabul vaqtini tekshirish, narxlarni ko'rish yoki manzilni topish uchun. Kesh sarlavhalari bo'lmaganda har tashrifda rasmlar va skriptlar qayta yuklanadi. Rasmlarga 30 kun, versiyalangan CSS va JavaScript'ga bir yil kesh qo'yilgach, qayta tashrifda brauzer faqat HTML sahifani serverdan oladi, qolgan hamma narsa keshdan ochiladi. Sayt administratori uslubni yangilaganda versiya raqamini oshiradi va bemorlar darhol yangi dizaynni ko'radi.

Virtual xostingda: .htaccess orqali

Agar sayt Apache bilan ishlaydigan virtual xostingda bo'lsa va server sozlamalariga kirish bo'lmasa, xuddi shu natijaga mod_expires moduli orqali erishish mumkin. Quyidagi qoidalar sayt ildizidagi .htaccess fayliga yoziladi:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/webp "access plus 30 days"
  ExpiresByType image/jpeg "access plus 30 days"
  ExpiresByType image/png "access plus 30 days"
  ExpiresByType font/woff2 "access plus 30 days"
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

Ko'p virtual xosting serverlarida statik fayllar Nginx tomonidan to'g'ridan-to'g'ri beriladi va Apache faqat PHP so'rovlarini qayta ishlaydi. Bunday sxemada .htaccess qoidalari statik fayllarga ta'sir qilmasligi mumkin. Shuning uchun natijani albatta quyidagi usul bilan tekshiring, kerak bo'lsa sayt.uz texnik yordamidan sizning tarifingizda keshlash qanday sozlanganini so'rang.

Natijani tekshirish

Javob sarlavhalarini curl bilan ko'rish eng ishonchli usul:

curl -sI https://example.uz/assets/app.3f9a2c.css | grep -iE "cache-control|expires|etag"
curl -sI https://example.uz/ | grep -i cache-control

Birinchi buyruq uzoq muddatli max-age qiymatini, ikkinchisi esa HTML uchun qisqa yoki nol muddatni ko'rsatishi kerak. Brauzerning dasturchi vositalarida Network bo'limida sahifani qayta yuklaganda keshdan olingan fayllar "disk cache" yoki "memory cache" deb belgilanadi. Agar Cloudflare kabi CDN ishlatilsa, uning o'z kesh qoidalari ham borligini va sarlavhalarni o'zgartirishi mumkinligini yodda tuting.