0Pricing
Web Performance Optimization & Lighthouse · Урок

Сжатие и кодирование при передаче

Уменьшайте объём передаваемых данных с помощью сжатия gzip и Brotli, правильных типов содержимого и предварительного сжатия, чтобы ответы быстрее поступали при любом подключении.

«Сжатие и кодирование при передаче» — бесплатный урок Web Performance Optimization & Lighthouse на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Performance Optimization & Lighthouse, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Performance Optimization & Lighthouse содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Why Compress?

Text assets like HTML, CSS, JS, JSON, and SVG are highly compressible. Compressing them before transfer can cut payloads by 70-90%, directly speeding up load on every network.

How Negotiation Works

The browser advertises supported algorithms with the Accept-Encoding header; the server responds with the chosen one in Content-Encoding.

Accept-Encoding: br, gzip
Content-Encoding: br

gzip

gzip is universally supported and a safe baseline. It offers good compression with low CPU cost and is enabled on virtually every server and CDN.

Brotli

Brotli (br) typically compresses text 15-25% smaller than gzip. It is supported in all modern browsers over HTTPS, making it the preferred choice today.

Compress the Right Types

Compress text-based MIME types only. Already-compressed binaries like JPEG, PNG, WebP, MP4, and woff2 fonts gain nothing and waste CPU if recompressed.

Static Precompression

For static assets, precompress at build time at the highest level. The server then serves the .br or .gz file directly, avoiding per-request CPU.

# nginx serving precompressed files
brotli_static on;
gzip_static on;

Dynamic Compression Levels

For dynamic responses, use a lower compression level so CPU cost does not delay the response. High levels are best reserved for static, build-time compression.

Express Example

In Node, the compression middleware adds gzip/Brotli to dynamic responses with sensible defaults.

const compression = require('compression');
app.use(compression());

Verifying Compression

Inspect a response in the Network panel: check Content-Encoding: br or gzip and compare transferred size to resource size. Lighthouse flags uncompressed text assets.

Compression and HTTPS

Modern compression for sensitive content is served over HTTPS, which also avoids historic attacks. Brotli in browsers is only offered on secure connections.

Strategy Summary

  • Prefer Brotli, fall back to gzip.
  • Compress text types only.
  • Precompress static assets at max level.
  • Use lower levels for dynamic responses.

Quick Check

You enable maximum-level compression on dynamically generated API responses and notice slower responses under load. What is the better approach?

Recap

You learned to shrink transfers with gzip and Brotli, negotiated via Accept-Encoding. Compress text types only, precompress static assets at max level, use lower levels for dynamic responses, and verify with the Network panel.

Часто задаваемые вопросы

Урок «Сжатие и кодирование при передаче» бесплатный?

Да — полный текст урока «Сжатие и кодирование при передаче» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Performance Optimization & Lighthouse, подпишись на CoddyKit PRO. Курс Web Performance Optimization & Lighthouse содержит 4 уроков всего.

Чему я научусь в уроке «Сжатие и кодирование при передаче»?

Уменьшайте объём передаваемых данных с помощью сжатия gzip и Brotli, правильных типов содержимого и предварительного сжатия, чтобы ответы быстрее поступали при любом подключении. Ты практикуешь Web Performance Optimization & Lighthouse с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Web Performance Optimization & Lighthouse?

Предыдущий опыт не требуется. Web Performance Optimization & Lighthouse на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Сжатие и кодирование при передаче»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Web Performance Optimization & Lighthouse?

Да. Каждый урок Web Performance Optimization & Lighthouse включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основы HTTP/2 и HTTP/3
  2. Кэширование в браузере и на сервере
  3. Сети доставки контента (CDN)
  4. Сжатие и кодирование при передаче
← Назад к Web Performance Optimization & Lighthouse