GZIP-сжатие: как браузер разархивирует ответы API автоматически
Узнайте, почему сервер отправляет сжатые данные, как это экономит трафик и как проверить сжатие в DevTools
Когда вы делаете запрос к API, сервер часто отправляет не просто JSON, а его сжатую версию — на 70-90% меньше. Браузер или HTTP-клиент автоматически распаковывает данные, и вы даже не замечаете этого процесса. Разберёмся, как работает GZIP-сжатие, почему оно экономит трафик и как его проверить.
Зачем серверы сжимают ответы
API-ответы часто содержат повторяющиеся структуры: имена полей в JSON, стандартные фразы в XML, пробелы и переносы строк. GZIP умеет находить эти повторения и заменять их короткими ссылками.
Пример неcжатого JSON (размер ~450 байт):
{
"users": [
{"id": 1, "name": "Alice", "email": "alice@example.com"},
{"id": 2, "name": "Bob", "email": "bob@example.com"},
{"id": 3, "name": "Charlie", "email": "charlie@example.com"}
]
}
После GZIP тот же ответ занимает ~180 байт — экономия 60%. Для больших ответов разница ещё заметнее: файл на 100 КБ может сжаться до 10-15 КБ.
Преимущества:
- Меньше трафика — важно для мобильных устройств и лимитированных тарифов
- Быстрее загрузка — данные передаются по сети в 3-5 раз быстрее
- Снижение нагрузки на CDN и серверы — меньше платите за исходящий трафик
Как браузер понимает, что ответ сжат
Когда браузер запрашивает страницу или API, он отправляет заголовок Accept-Encoding:
GET /api/users HTTP/1.1
Host: example.com
Accept-Encoding: gzip, deflate, br
Этим браузер сообщает: «Я умею распаковывать gzip, deflate и brotli». Сервер выбирает метод сжатия и возвращает заголовок Content-Encoding:
HTTP/1.1 200 OK
Content-Type: application/json
Content-Encoding: gzip
Content-Length: 180
Браузер видит Content-Encoding: gzip и автоматически распаковывает тело ответа. Вы в DevTools и в JavaScript получаете уже готовый JSON — процесс полностью прозрачный.
Что если браузер не поддерживает сжатие
Современные браузеры поддерживают GZIP с 1990-х годов. Даже очень старые версии Firefox, Chrome и Safari умеют работать со сжатием. Если вдруг клиент не отправит Accept-Encoding, сервер вернёт несжатые данные — никакой ошибки не будет.
Проверка сжатия в DevTools
Откройте Chrome DevTools (F12), вкладку Network. Обновите страницу или выполните запрос к API. В таблице запросов найдите интересующий ответ и посмотрите на колонку Size.
Вы увидите две цифры: 15.2 KB / 89.7 KB. Первая — размер сжатых данных по сети, вторая — размер после распаковки. Разница показывает эффективность сжатия.
Кликните на запрос и откройте вкладку Headers. В разделе Response Headers ищите:
content-encoding: gzip
content-type: application/json; charset=utf-8
Если content-encoding отсутствует — сжатия нет. Возможные причины:
- Сервер не настроен на сжатие (редко, но бывает)
- Ответ слишком маленький (меньше 1-2 КБ), сжатие невыгодно
- Тип контента исключён из правил сжатия (например, уже сжатые изображения)
Сжатие в fetch и других HTTP-клиентах
Браузерный fetch() автоматически добавляет Accept-Encoding и распаковывает ответы. Вы работаете с готовыми данными:
const response = await fetch('https://api.example.com/users');
const data = await response.json(); // Уже распакованный JSON
console.log(data);
То же самое в Node.js с нативным fetch (Node 18+) или с библиотекой node-fetch. Стандартные HTTP-клиенты вроде axios тоже поддерживают автоматическую распаковку:
const axios = require('axios');
const response = await axios.get('https://api.example.com/users');
console.log(response.data); // Распаковано
Если используете низкоуровневые библиотеки (http.get в Node.js), возможно, придётся обрабатывать сжатие вручную через модуль zlib. Но современные клиенты делают это за вас.
Brotli — альтернатива GZIP
Кроме GZIP серверы могут использовать Brotli — алгоритм от Google с ещё лучшим сжатием. Для текстовых данных Brotli даёт на 15-25% меньший размер, чем GZIP.
Браузеры поддерживают Brotli с 2016-2017 годов. Если сервер видит в Accept-Encoding значение br, он может вернуть:
Content-Encoding: br
Для вас как разработчика это не меняет ничего — распаковка происходит автоматически. Единственное отличие — ещё меньше трафика.
Когда стоит включать Brotli:
- Статические файлы (HTML, CSS, JS) — сжимаете один раз при сборке
- API с предсказуемыми ответами — экономия трафика окупает затраты CPU
- CDN поддерживает Brotli — Cloudflare, Fastly, AWS CloudFront умеют
Для динамических API-ответов иногда предпочитают GZIP — он быстрее сжимает на лету.
Настройка сжатия на стороне сервера
Большинство веб-серверов поддерживают GZIP из коробки. Пример для Nginx:
gzip on;
gzip_types application/json text/css text/javascript;
gzip_min_length 1000;
Для Apache:
AddOutputFilterByType DEFLATE application/json text/html text/css
В Node.js можно использовать middleware compression:
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
app.get('/api/users', (req, res) => {
res.json({ users: [...] }); // Автоматически сжато
});
Проверяйте настройки сервера, если видите, что крупные JSON-ответы не сжимаются — возможно, тип application/json не добавлен в список разрешённых.
Инструменты для работы с API
Если вы часто работаете с API, пригодятся специализированные инструменты. JSON Formatter поможет отформатировать сжатый ответ для удобного чтения, а Base64 Encoder — закодировать бинарные данные для передачи в JSON. Для проверки корректности структуры используйте JSON Validator, а JWT Decoder пригодится для работы с токенами авторизации.
GZIP-сжатие работает незаметно, но экономит гигабайты трафика. Убедитесь, что ваш сервер отдаёт сжатые ответы, проверяйте заголовки в DevTools и не забывайте про Brotli для статических файлов — это бесплатное ускорение API.