Какие HTTP-заголовки важны для производительности фронтенда?

Производительность и безопасность сети

Заголовки управляют кешированием, сжатием и приоритетами загрузки. Правильные значения заметно сокращают трафик и время загрузки.

Кеширование

`Cache-Control` — главный заголовок. max-age=31536000, immutable для файлов с хешем в имени; no-cache для HTML, который нужно проверять; no-store для чувствительных данных.
`ETag` и `Last-Modified` — валидаторы: клиент присылает If-None-Match или If-Modified-Since, сервер отвечает 304 Not Modified без тела.
`Vary` — по каким заголовкам запроса кеш различает ответы (например, Accept-Encoding).

Cache-Control: public, max-age=31536000, immutable

Сжатие

`Accept-Encoding` (запрос) и `Content-Encoding` (ответ): br (Brotli), gzip. Сжимает текстовые ресурсы в 3–5 раз.

Загрузка ресурсов

`Link: <...>; rel=preload` и `103 Early Hints` — подсказывают браузеру, что загрузить заранее.
`Content-Length`/`Transfer-Encoding` — размер и способ передачи.
`Content-Type` — правильный MIME-тип, иначе браузер тратит время на определение.

Соединения и безопасность

`Strict-Transport-Security` — сразу ходить по HTTPS без редиректов.
`Timing-Allow-Origin` — разрешает читать тайминги в Resource Timing.
`Connection: keep-alive` (HTTP/1.1) — повторное использование соединения.

Типичная схема

HTML — Cache-Control: no-cache (проверка по ETag). JS/CSS/изображения с хешем в имени — max-age на год и immutable. Всё текстовое — Brotli.

Коротко для собеседования

Основные заголовки: Cache-Control с ETag, Content-Encoding (Brotli/gzip), Vary, Link: preload. Статику с хешем кешируют на год, HTML проверяют на каждый запрос.