Перевірка стиснення

Перевірка gzip і Brotli: як читати результат

Інструмент двічі запитує вказану адресу. Уперше — як браузер, що готовий прийняти стиснену відповідь: у заголовку Accept-Encoding перелічено алгоритми, і сервер обирає один. Удруге — з Accept-Encoding: identity, тобто без стиснення. Порівняння двох відповідей дає три цифри: розмір без стиснення, розмір, переданий мережею, і відсоток економії.

• Позначка алгоритму (GZIP, Brotli чи Deflate) — те, що сервер записав у Content-Encoding. Підсвічується один алгоритм, бо відповідь завжди стискається одним способом. Якщо сервер підтримує і gzip, і Brotli, він обере Brotli, а позначка gzip лишиться сірою — це не помилка.
• Економія. Для HTML нормально 70–90%. Якщо стиснення увімкнене, а економія менша за 30%, імовірно, сторінка майже порожня або стискається слабким рівнем.
• Позначки не горять, але «зі стисненням» помітно менше, ніж «без стиснення». Найпевніше, сервер відповів алгоритмом zstd, для якого окремої позначки немає. Так робить, наприклад, Cloudflare. Перевірте заголовок через curl (команди нижче).

Перевіряється лише документ за вказаною адресою. Щоб переконатися, що стискаються CSS, JS і SVG, введіть пряме посилання на файл.

Gzip, Brotli і zstd: у чому різниця

Стискати варто текстові формати: HTML, CSS, JS, JSON, XML, SVG, шрифти TTF/OTF. JPEG, PNG, WebP, AVIF, MP4 і WOFF2 уже стиснені — повторне стиснення лише навантажує процесор.

Як увімкнути стиснення

nginx: gzip

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

text/html додавати не треба — він стискається завжди. gzip_vary on додає заголовок Vary: Accept-Encoding, щоб проксі й CDN не віддали стиснену копію клієнтові, який її не розуміє.

nginx: Brotli

У стандартній збірці nginx Brotli немає — потрібен модуль ngx_brotli. У деяких дистрибутивах він є готовим пакетом, інакше його збирають як динамічний модуль під вашу версію nginx.

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

brotli on;
brotli_comp_level 5;
brotli_static on;
brotli_types text/css application/javascript application/json
             application/xml image/svg+xml font/ttf font/otf;

brotli_static on віддає заздалегідь підготовлені файли .br (наприклад, app.js.br, стиснений на рівні 11 під час збирання), а динамічний HTML стискається на льоту на рівні 4–6. gzip залиште: він потрібен клієнтам без Brotli.

Apache і .htaccess

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

mod_brotli є в Apache від версії 2.4.26. Попри назву, mod_deflate віддає саме gzip. На віртуальному хостингу модулі інколи вимкнені — тоді стиснення вмикають у панелі хостингу або через підтримку.

Cloudflare та інші CDN

Cloudflare сам стискає текстові відповіді для відвідувачів (gzip, Brotli, zstd), детальні налаштування — у Compression Rules. Зважайте: перевірка показує відповідь CDN, а не вашого сервера, і з'єднання «сервер → CDN» може лишатися нестисненим. Щоб перевірити сам сервер, звертайтеся до нього напряму.

CMS

У WordPress стиснення краще вмикати на сервері, а не плагіном: плагіни кешування зазвичай лише дописують правила в .htaccess, а на nginx вони не діють. На Tilda та інших конструкторах стисненням керує платформа.

Як перевірити Brotli і gzip через curl

Щоб побачити, що сервер відповідає на конкретний алгоритм, робіть GET-запит (на HEAD деякі сервери відповідають без стиснення):

curl -s -o /dev/null -D - -H 'Accept-Encoding: br' https://example.com/ | grep -i content-encoding
curl -s -o /dev/null -D - -H 'Accept-Encoding: gzip' https://example.com/ | grep -i content-encoding
curl -s -o /dev/null -D - -H 'Accept-Encoding: zstd' https://example.com/ | grep -i content-encoding

Обсяг, переданий мережею, покаже curl -s -o /dev/null -H 'Accept-Encoding: br' -w '%{size_download}\n' https://example.com/. Той самий запит без заголовка дасть нестиснений розмір. У браузері це видно в DevTools → Network: стовпець Content-Encoding і різниця між переданим розміром та розміром ресурсу.

Попереднє стиснення статики

CSS, JS і SVG вигідніше стиснути один раз під час збирання на максимальному рівні, ніж щоразу на льоту. Поруч з оригіналом кладуть версії .br і .gz, а сервер (brotli_static on і gzip_static on у nginx) віддає готовий файл тим клієнтам, що його підтримують:

brotli -q 11 -k dist/app.js      # створить dist/app.js.br
gzip -9 -k dist/app.js           # створить dist/app.js.gz
zstd -19 -k dist/app.js          # створить dist/app.js.zst

Прапорець -k зберігає оригінал — він потрібен клієнтам без підтримки стиснення. У збирачах те саме роблять плагіни (для Vite і webpack є плагіни компресії). Стиснені копії треба перезбирати разом з оригіналом: застарілий .br поруч із новим app.js — часта причина ситуації «в одному браузері працює, в іншому ні».

Що стиснення дає для SEO: менше байтів — швидше надходить HTML, раніше браузер знаходить CSS і зображення першого екрана, а це прямо скорочує LCP у повільних мобільних мережах. Googlebot теж запитує стиснені відповіді, тож сервер швидше віддає йому сторінки.

Типові проблеми

• Стиснення ввімкнене не для всіх типів. HTML стискається, а JS і CSS — ні, бо їхніх MIME-типів немає в gzip_types. Перевірте пряме посилання на великий скрипт.
• Подвійне стиснення. Застосунок (скажімо, PHP з zlib.output_compression) стискає відповідь, а сервер намагається стиснути її ще раз. Залиште стиснення на одному рівні — краще на вебсервері.
• Немає Vary: Accept-Encoding. Кешувальний проксі може віддати стиснену копію клієнтові без підтримки. Усі заголовки відповіді видно в перевірці HTTP-заголовків.
• Завеликий рівень на льоту. Brotli 11 чи gzip 9 для динамічних сторінок збільшують час відповіді сервера більше, ніж заощаджують на передаванні.

Стиснення — один із найдешевших способів пришвидшити завантаження: менше байтів — швидше надходить HTML і раніше починається відмальовування. Загальну картину дасть перевірка швидкості сторінки, версію протоколу — перевірка HTTP/2, а зв'язок швидкості з ранжуванням пояснено в статті про Core Web Vitals.