Gzip va Brotli siqish: sayt hajmini kamaytirib, sahifani tezlashtirish

Har safar foydalanuvchi saytingizni ochganda, server unga HTML sahifa, CSS uslublar, JavaScript skriptlar, shriftlar va rasmlarni yuboradi. Matnli fayllar odatda juda ko'p takrorlanuvchi belgilardan iborat bo'ladi: bir xil teglar, sinf nomlari, bo'sh joylar. Siqish algoritmi aynan shu takrorlanishlardan foydalanib, faylni tarmoq orqali yuborishdan oldin kichraytiradi, brauzer esa uni qabul qilgach bir zumda asl holiga qaytaradi. Natijada sahifa kamroq ma'lumot bilan, demak tezroq yuklanadi, ayniqsa mobil internetda.

Siqish qanday kelishiladi

Brauzer har bir so'rovda Accept-Encoding sarlavhasi orqali qaysi siqish usullarini tushunishini aytadi, masalan gzip, deflate, br. Server bu ro'yxatdan o'zi qo'llab-quvvatlaydigan eng yaxshisini tanlaydi, faylni siqadi va javobda Content-Encoding: gzip yoki Content-Encoding: br sarlavhasini qo'yadi. Agar brauzer siqishni qo'llab-quvvatlamasa, server faylni oddiy holatda yuboradi, shuning uchun siqishni yoqish eski qurilmalarga zarar yetkazmaydi.

Gzip va Brotli: farqi nimada

Gzip o'nlab yillardan beri ishlatiladi va deyarli barcha serverlar hamda brauzerlarda bor. U tez ishlaydi va matnli fayllarni ko'pincha bir necha barobar kichraytiradi. Brotli esa Google tomonidan ishlab chiqilgan yangiroq algoritm bo'lib, matnli kontentda odatda gzip'dan ham kichikroq natija beradi. Barcha zamonaviy brauzerlar Brotli'ni qo'llab-quvvatlaydi, lekin faqat HTTPS ulanishlarda, shuning uchun saytda SSL bo'lishi shart.

Amalda ikkalasini birga yoqish eng to'g'ri yo'l: Brotli'ni tushunadigan brauzer br oladi, qolganlari gzip bilan qoniqadi. Shuni ham bilish kerakki, yuqori siqish darajasi ko'proq protsessor vaqtini talab qiladi. Har bir so'rovda dinamik siqiladigan kontent uchun o'rta daraja tanlanadi, oldindan siqib qo'yiladigan statik fayllar uchun esa eng yuqori daraja ishlatilishi mumkin.

Nimalarni siqish kerak, nimalarni emas

Siqish faqat matnli formatlarda foyda beradi: HTML, CSS, JavaScript, JSON, XML, SVG va ba'zi shrift formatlari. JPEG, PNG, WebP rasmlar, MP4 video, ZIP arxivlar va WOFF2 shriftlar allaqachon siqilgan bo'ladi. Ularni qayta siqish hajmni deyarli kamaytirmaydi, lekin serverni behuda yuklaydi. Shuning uchun Nginx sozlamasida siqiladigan turlar aniq ro'yxat bilan ko'rsatiladi.

Juda kichik fayllarni siqish ham ma'nosiz: bir necha yuz baytlik javobga siqish sarlavhalari qo'shilganda foyda deyarli qolmaydi. Bu uchun gzip_min_length parametri ishlatiladi.

Nginx'da gzip'ni yoqish

Gzip moduli Nginx'ning standart yig'ilmasida mavjud, uni faqat yoqish kifoya. Quyidagi sozlama odatda /etc/nginx/nginx.conf faylidagi http blokiga yoziladi:

gzip on;
gzip_vary on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_proxied any;
gzip_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml;

text/html turini ro'yxatga yozish shart emas, chunki Nginx uni gzip yoqilganda doim siqadi. gzip_vary on javobga Vary: Accept-Encoding sarlavhasini qo'shadi, bu esa oraliq keshlar siqilgan va siqilmagan nusxalarni aralashtirib yubormasligi uchun kerak. gzip_proxied any esa Nginx reverse proxy sifatida ishlaganda ham javoblarni siqishga ruxsat beradi.

Brotli modulini o'rnatish

Brotli Nginx'ning rasmiy standart yig'ilmasiga kirmaydi, u alohida modul sifatida ulanadi. Ba'zi distributivlarning yangi versiyalarida tayyor paket mavjud, masalan Debian va Ubuntu'ning so'nggi relizlarida modulni paket menejeri orqali o'rnatish mumkin. Paket nomi va mavjudligini avval tekshirib ko'ring:

apt search libnginx-mod-http-brotli
sudo apt install libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-static

Agar sizning tizimingizda bunday paket bo'lmasa, modulni Nginx versiyangizga mos ravishda manba koddan kompilyatsiya qilishga to'g'ri keladi. Modul o'rnatilgach, http blokiga quyidagilar qo'shiladi:

brotli on;
brotli_comp_level 5;
brotli_min_length 256;
brotli_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    image/svg+xml;

Har ikki sozlamadan keyin sudo nginx -t bilan tekshirib, sudo systemctl reload nginx bilan qayta yuklash kerak.

Oldindan siqilgan statik fayllar

Agar sayt Vite yoki Webpack kabi vosita bilan yig'ilsa, yig'ish bosqichida app.js.gz va app.js.br fayllarini oldindan yaratib qo'yish mumkin. Shunda Nginx har so'rovda siqish bilan band bo'lmaydi, tayyor faylni beradi. Buning uchun gzip_static on; va brotli_static on; direktivalari ishlatiladi. Bu usul eng yuqori siqish darajasini protsessorga yuk tushirmasdan qo'llash imkonini beradi.

Virtual xostingda: Apache va .htaccess

Agar saytingiz virtual xostingda joylashgan bo'lsa, server sozlamalariga kirish imkoningiz bo'lmaydi va ko'p hollarda siqish allaqachon server darajasida yoqilgan bo'ladi. Avval quyida ko'rsatilgan usul bilan tekshirib ko'ring. Agar sayt Apache orqali ishlasa va siqish yo'q bo'lsa, .htaccess fayliga mod_deflate qoidalarini qo'shish mumkin:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE image/svg+xml application/xml
</IfModule>

IfModule sharti modul yo'q bo'lgan serverda sayt xato bermasligini ta'minlaydi. Agar sizning hosting tarifingizda siqish holatini bilmasangiz, sayt.uz texnik yordamiga murojaat qilib aniqlashtirish mumkin.

Natijani tekshirish

Siqish ishlayotganini eng oson tekshirish usuli curl buyrug'idir. Quyidagi so'rovlar brauzer kabi siqishni so'raydi va javob sarlavhalarini ko'rsatadi:

curl -sI -H "Accept-Encoding: gzip" https://example.uz/ | grep -i content-encoding
curl -sI -H "Accept-Encoding: br" https://example.uz/assets/app.css | grep -i content-encoding

Javobda content-encoding: gzip yoki content-encoding: br ko'rinsa, hammasi joyida. Brauzerda esa dasturchi vositalarining Network bo'limida har bir fayl uchun uzatilgan va asl hajmni solishtirish mumkin. Google PageSpeed Insights ham siqilmagan matnli resurslar haqida alohida ogohlantirish beradi.

Misol: Samarqanddagi onlayn kiyim do'koni

Samarqanddagi kichik kiyim do'koni saytini olaylik. Bosh sahifa katta CSS freymvorki, bir nechta JavaScript kutubxonasi va mahsulotlar ro'yxatini JSON ko'rinishida yuklaydi. Siqish o'chiq bo'lsa, xaridor har bir tashrifda bu matnli fayllarni to'liq hajmda yuklab oladi, mobil internetda esa bu sahifaning ko'rinishini sezilarli kechiktiradi. Gzip va Brotli yoqilgach, aynan shu fayllar ancha kichik hajmda keladi, rasmlarga esa tegilmaydi, chunki ular allaqachon siqilgan. Do'kon egasi kodga hech qanday o'zgartirish kiritmasdan, faqat server sozlamasi orqali sahifani tezlashtiradi.

Ehtiyot bo'lish kerak bo'lgan joylar

Siqish darajasini eng yuqoriga qo'yish har doim ham yaxshi emas. Dinamik sahifalarda Brotli'ning 11-darajasi gzip'ning o'rta darajasiga nisbatan protsessorni ancha ko'p yuklaydi va yuqori trafikda javob vaqtini oshirib yuborishi mumkin. Shuningdek, sir saqlanadigan ma'lumotlar (masalan CSRF tokeni) va foydalanuvchi kiritgan matn bir javobda birga siqilganda nazariy hujumlar mavjudligini yodda tuting. Oddiy saytlar uchun standart sozlamalar xavfsiz, lekin maxfiy ma'lumot bilan ishlaydigan API'larda bu masalani alohida ko'rib chiqish foydali.