Gzip ва Brotli сиқиш: сайт ҳажмини камайтириб, саҳифани тезлаштириш

Ҳар сафар фойдаланувчи сайтингизни очганда, сервер унга HTML саҳифа, CSS услублар, JavaScript скриптлар, шрифтлар ва расмларни юборади. Матнли файллар одатда жуда кўп такрорланувчи белгилардан иборат бўлади: бир хил теглар, синф номлари, бўш жойлар. Сиқиш алгоритми айнан шу такрорланишлардан фойдаланиб, файлни тармоқ орқали юборишдан олдин кичрайтиради, браузер эса уни қабул қилгач бир зумда асл ҳолига қайтаради. Натижада саҳифа камроқ маълумот билан, демак тезроқ юкланади, айниқса мобил интернетда.

Сиқиш қандай келишилади

Браузер ҳар бир сўровда Accept-Encoding сарлавҳаси орқали қайси сиқиш усулларини тушунишини айтади, масалан gzip, deflate, br. Сервер бу рўйхатдан ўзи қўллаб-қувватлайдиган энг яхшисини танлайди, файлни сиқади ва жавобда Content-Encoding: gzip ёки Content-Encoding: br сарлавҳасини қўяди. Агар браузер сиқишни қўллаб-қувватламаса, сервер файлни оддий ҳолатда юборади, шунинг учун сиқишни ёқиш эски қурилмаларга зарар етказмайди.

Gzip ва Brotli: фарқи нимада

Gzip ўнлаб йиллардан бери ишлатилади ва деярли барча серверлар ҳамда браузерларда бор. У тез ишлайди ва матнли файлларни кўпинча бир неча баробар кичрайтиради. Brotli эса Google томонидан ишлаб чиқилган янгироқ алгоритм бўлиб, матнли контентда одатда gzip'дан ҳам кичикроқ натижа беради. Барча замонавий браузерлар Brotli'ни қўллаб-қувватлайди, лекин фақат HTTPS уланишларда, шунинг учун сайтда SSL бўлиши шарт.

Амалда иккаласини бирга ёқиш энг тўғри йўл: Brotli'ни тушунадиган браузер br олади, қолганлари gzip билан қониқади. Шуни ҳам билиш керакки, юқори сиқиш даражаси кўпроқ процессор вақтини талаб қилади. Ҳар бир сўровда динамик сиқиладиган контент учун ўрта даража танланади, олдиндан сиқиб қўйиладиган статик файллар учун эса энг юқори даража ишлатилиши мумкин.

Нималарни сиқиш керак, нималарни эмас

Сиқиш фақат матнли форматларда фойда беради: HTML, CSS, JavaScript, JSON, XML, SVG ва баъзи шрифт форматлари. JPEG, PNG, WebP расмлар, MP4 видео, ZIP архивлар ва WOFF2 шрифтлар аллақачон сиқилган бўлади. Уларни қайта сиқиш ҳажмни деярли камайтирмайди, лекин серверни беҳуда юклайди. Шунинг учун Nginx созламасида сиқиладиган турлар аниқ рўйхат билан кўрсатилади.

Жуда кичик файлларни сиқиш ҳам маъносиз: бир неча юз байтлик жавобга сиқиш сарлавҳалари қўшилганда фойда деярли қолмайди. Бу учун gzip_min_length параметри ишлатилади.

Nginx'да gzip'ни ёқиш

Gzip модули Nginx'нинг стандарт йиғилмасида мавжуд, уни фақат ёқиш кифоя. Қуйидаги созлама одатда /etc/nginx/nginx.conf файлидаги http блокига ёзилади:

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 турини рўйхатга ёзиш шарт эмас, чунки Nginx уни gzip ёқилганда доим сиқади. gzip_vary on жавобга Vary: Accept-Encoding сарлавҳасини қўшади, бу эса оралиқ кешлар сиқилган ва сиқилмаган нусхаларни аралаштириб юбормаслиги учун керак. gzip_proxied any эса Nginx reverse proxy сифатида ишлаганда ҳам жавобларни сиқишга рухсат беради.

Brotli модулини ўрнатиш

Brotli Nginx'нинг расмий стандарт йиғилмасига кирмайди, у алоҳида модул сифатида уланади. Баъзи дистрибутивларнинг янги версияларида тайёр пакет мавжуд, масалан Debian ва Ubuntu'нинг сўнгги релизларида модулни пакет менежери орқали ўрнатиш мумкин. Пакет номи ва мавжудлигини аввал текшириб кўринг:

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

Агар сизнинг тизимингизда бундай пакет бўлмаса, модулни Nginx версиянгизга мос равишда манба коддан компиляция қилишга тўғри келади. Модул ўрнатилгач, http блокига қуйидагилар қўшилади:

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;

Ҳар икки созламадан кейин sudo nginx -t билан текшириб, sudo systemctl reload nginx билан қайта юклаш керак.

Олдиндан сиқилган статик файллар

Агар сайт Vite ёки Webpack каби восита билан йиғилса, йиғиш босқичида app.js.gz ва app.js.br файлларини олдиндан яратиб қўйиш мумкин. Шунда Nginx ҳар сўровда сиқиш билан банд бўлмайди, тайёр файлни беради. Бунинг учун gzip_static on; ва brotli_static on; директивалари ишлатилади. Бу усул энг юқори сиқиш даражасини процессорга юк туширмасдан қўллаш имконини беради.

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

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

<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 шарти модул йўқ бўлган серверда сайт хато бермаслигини таъминлайди. Агар сизнинг хостинг тарифингизда сиқиш ҳолатини билмасангиз, sayt.uz техник ёрдамига мурожаат қилиб аниқлаштириш мумкин.

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

Сиқиш ишлаётганини энг осон текшириш усули curl буйруғидир. Қуйидаги сўровлар браузер каби сиқишни сўрайди ва жавоб сарлавҳаларини кўрсатади:

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

Жавобда content-encoding: gzip ёки content-encoding: br кўринса, ҳаммаси жойида. Браузерда эса дастурчи воситаларининг Network бўлимида ҳар бир файл учун узатилган ва асл ҳажмни солиштириш мумкин. Google PageSpeed Insights ҳам сиқилмаган матнли ресурслар ҳақида алоҳида огоҳлантириш беради.

Мисол: Самарқанддаги онлайн кийим дўкони

Самарқанддаги кичик кийим дўкони сайтини олайлик. Бош саҳифа катта CSS фреймворки, бир нечта JavaScript кутубхонаси ва маҳсулотлар рўйхатини JSON кўринишида юклайди. Сиқиш ўчиқ бўлса, харидор ҳар бир ташрифда бу матнли файлларни тўлиқ ҳажмда юклаб олади, мобил интернетда эса бу саҳифанинг кўринишини сезиларли кечиктиради. Gzip ва Brotli ёқилгач, айнан шу файллар анча кичик ҳажмда келади, расмларга эса тегилмайди, чунки улар аллақачон сиқилган. Дўкон эгаси кодга ҳеч қандай ўзгартириш киритмасдан, фақат сервер созламаси орқали саҳифани тезлаштиради.

Эҳтиёт бўлиш керак бўлган жойлар

Сиқиш даражасини энг юқорига қўйиш ҳар доим ҳам яхши эмас. Динамик саҳифаларда Brotli'нинг 11-даражаси gzip'нинг ўрта даражасига нисбатан процессорни анча кўп юклайди ва юқори трафикда жавоб вақтини ошириб юбориши мумкин. Шунингдек, сир сақланадиган маълумотлар (масалан CSRF токени) ва фойдаланувчи киритган матн бир жавобда бирга сиқилганда назарий ҳужумлар мавжудлигини ёдда тутинг. Оддий сайтлар учун стандарт созламалар хавфсиз, лекин махфий маълумот билан ишлайдиган API'ларда бу масалани алоҳида кўриб чиқиш фойдали.