Nginx'да статик файлларни кешлаш: Cache-Control, expires ва версиялаш

Сайт саҳифасининг катта қисми ҳар ташрифда ўзгармайдиган файллардан иборат: логотип, шрифтлар, CSS услублар, JavaScript кутубхоналар, маҳсулот расмлари. Агар сервер бу файлларни браузерга қандай сақлаш кераклигини айтмаса, браузер уларни ҳар сафар қайта сўрайди ёки ҳеч бўлмаганда ўзгарганми деб текширади. Кешлаш сарлавҳалари тўғри қўйилганда эса фойдаланувчи сайтга иккинчи марта кирганда бу файллар дискдан олинади, тармоққа умуман мурожаат қилинмайди ва саҳифа сезиларли тезроқ очилади.

Браузер кеши қандай ишлайди

Сервер жавобида Cache-Control сарлавҳаси орқали файл қанча вақт янги ҳисобланишини билдиради, масалан Cache-Control: max-age=2592000 30 кунни англатади. Бу муддат ичида браузер файлни сервердан сўрамайди. Муддат тугагач, браузер шартли сўров юборади: If-None-Match сарлавҳасида аввалги ETag қийматини ёки If-Modified-Since сарлавҳасида санани кўрсатади. Файл ўзгармаган бўлса, сервер фақат қисқа 304 Not Modified жавобини қайтаради ва файл қайта юкланмайди.

Эски Expires сарлавҳаси ҳам шунга ўхшаш вазифани бажаради, лекин у аниқ санани кўрсатади. Замонавий браузерлар иккаласи бўлганда Cache-Control га устунлик беради. Nginx'даги expires директиваси қулай, чунки у иккала сарлавҳани ҳам бир вақтда қўяди.

Асосий муаммо: файлни янгилаганда нима бўлади

Узоқ кешлашнинг ягона хавфи шундаки, сиз CSS файлни ўзгартирсангиз, фойдаланувчи браузери эски нусхани кеш муддати тугагунча кўрсатишда давом этади. Бунинг стандарт ечими файл номини версиялаш. Vite, Webpack каби воситалар йиғиш пайтида файл номига мазмун хешини қўшади, масалан app.3f9a2c.css. Файл ўзгарса номи ҳам ўзгаради, HTML янги номга ҳавола қилади ва браузер янги файлни юклайди. Бундай файлларни бир йилга ва immutable белгиси билан кешлаш мумкин.

Агар сайт йиғиш воситасидан фойдаланмаса, оддий усул сўров параметри қўшишдир: style.css?v=12. WordPress ҳам услуб ва скриптларга версия параметрини автоматик қўшади. HTML саҳифанинг ўзини эса узоқ кешлаш керак эмас, акс ҳолда фойдаланувчи янги файл номларини кўрмай қолади.

Nginx созламаси

Қуйидаги блоклар сайт конфигурациясидаги server бўлимига ёзилади. Улар файл кенгайтмасига қараб турли кеш муддатини белгилайди:

# 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 жавобга Expires санасини ва Cache-Control: max-age=31536000 қўшади. add_header эса қўшимча Cache-Control қатори қўшади, браузерлар иккала қаторни бирлаштириб ўқийди. expires -1 эса HTML'ни кешдан фойдаланмасдан ҳар сафар текширишга мажбур қилади. Статик файллар учун кириш логини ўчириш (access_log off) диск ёзувини камайтиради ва логларни ўқишни осонлаштиради.

add_header билан боғлиқ тузоқ

Nginx'да муҳим нозик жиҳат бор: агар ички location блокида бирорта add_header ёзилса, юқори даражадаги (server ёки http блокидаги) барча add_header директивалари шу блок учун мерос бўлиб ўтмайди. Масалан, хавфсизлик сарлавҳалари (X-Content-Type-Options, Strict-Transport-Security) сервер даражасида қўйилган бўлса, улар расмлар ва CSS жавобларидан йўқолиб қолади. Бу ҳолатда керакли сарлавҳаларни ҳар бир location ичида такрорлаш ёки уларни алоҳида файлга чиқариб include қилиш керак.

Сервернинг ўз кеши: open_file_cache

Браузер кешидан ташқари, Nginx тез-тез сўраладиган файллар ҳақидаги маълумотни (файл дескрипторлари, ҳажми, ўзгариш вақти) хотирада сақлай олади. Бу кўп файл тарқатадиган сайтларда диск мурожаатларини камайтиради. Созлама http блокига ёзилади:

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

Бу созлама файл мазмунини эмас, фақат унинг метамаълумотларини кешлайди. Мазмунни тез бериш учун операцион тизимнинг ўз саҳифа кеши ва sendfile on; директиваси жавоб беради, улар одатда стандарт созламада ёқилган бўлади.

Мисол: Намангандаги хусусий клиника сайти

Намангандаги хусусий клиника сайтида шифокорлар расмлари, хизматлар рўйхати, қабулга ёзилиш формаси ва харита бор. Беморлар сайтга тез-тез қайтади: қабул вақтини текшириш, нархларни кўриш ёки манзилни топиш учун. Кеш сарлавҳалари бўлмаганда ҳар ташрифда расмлар ва скриптлар қайта юкланади. Расмларга 30 кун, версияланган CSS ва JavaScript'га бир йил кеш қўйилгач, қайта ташрифда браузер фақат HTML саҳифани сервердан олади, қолган ҳамма нарса кешдан очилади. Сайт администратори услубни янгилаганда версия рақамини оширади ва беморлар дарҳол янги дизайнни кўради.

Виртуал хостингда: .htaccess орқали

Агар сайт Apache билан ишлайдиган виртуал хостингда бўлса ва сервер созламаларига кириш бўлмаса, худди шу натижага mod_expires модули орқали эришиш мумкин. Қуйидаги қоидалар сайт илдизидаги .htaccess файлига ёзилади:

<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>

Кўп виртуал хостинг серверларида статик файллар Nginx томонидан тўғридан-тўғри берилади ва Apache фақат PHP сўровларини қайта ишлайди. Бундай схемада .htaccess қоидалари статик файлларга таъсир қилмаслиги мумкин. Шунинг учун натижани албатта қуйидаги усул билан текширинг, керак бўлса sayt.uz техник ёрдамидан сизнинг тарифингизда кешлаш қандай созланганини сўранг.

Натижани текшириш

Жавоб сарлавҳаларини curl билан кўриш энг ишончли усул:

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

Биринчи буйруқ узоқ муддатли max-age қийматини, иккинчиси эса HTML учун қисқа ёки нол муддатни кўрсатиши керак. Браузернинг дастурчи воситаларида Network бўлимида саҳифани қайта юклаганда кешдан олинган файллар "disk cache" ёки "memory cache" деб белгиланади. Агар Cloudflare каби CDN ишлатилса, унинг ўз кеш қоидалари ҳам борлигини ва сарлавҳаларни ўзгартириши мумкинлигини ёдда тутинг.