ttools
gzipAPIоптимизациясжатие

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.

Инструменты по теме