Аудит сжатия и кэширования

Короткий обмен в заголовках

С каждым запросом браузер объявляет форматы сжатия, которые умеет распаковывать:

Accept-Encoding: gzip, deflate, br, zstd

Сервер с включённым сжатием выбирает один из них, ужимает файл и помечает ответ Content-Encoding: br (Brotli) или gzip. HTML, CSS и JavaScript представляют собой повторяющийся текст и обычно теряют 70-85% размера. Файлы JPEG, PNG, WebP, AVIF и WOFF2 уже сжаты собственным форматом, поэтому отправлять их как есть правильно.

Вторая половина дела в кэшировании. Cache-Control: max-age=31536000 разрешает браузеру использовать файл повторно целый год, ничего не спрашивая. Когда срок истёк, заголовок ETag или Last-Modified позволяет браузеру задать дешёвый вопрос «это изменилось?», и сервер отвечает 304 Not Modified без тела.

Какие файлы проверяются

Мы начинаем с самой страницы, после перенаправлений, затем берём найденные в её HTML файлы с того же зарегистрированного домена: до четырёх таблиц стилей, пяти скриптов, трёх изображений и двух шрифтов. Неиспользованные места отдаются оставшимся файлам, всего до пятнадцати, а шрифты, на которые ссылаются ваши таблицы стилей, добавляются, если есть место. Каждый файл запрашивается так, как это сделал бы браузер, с предложением Brotli и gzip, по HTTP/2, если сервер его поддерживает.

Файлы с других доменов, например Google Fonts или скрипт аналитики, не учитываются. Их заголовки задаёте не вы.

Как оценивается каждый столбец

Сжатие

Зелёный, когда текстовый файл приходит с Content-Encoding. Красный, когда страница или текстовый файл больше 20 KB приходит несжатым. Оранжевый для несжатых файлов поменьше, а к файлам меньше 1 KB мы претензий не имеем. Для каждого несжатого файла аудит сам сжимает содержимое gzip и показывает, какой размер вы бы получили. Для изображений и шрифтов WOFF2 стоит «не нужно».

Кэш

Срок жизни берётся из max-age или из Expires, если max-age нет. Таблица стилей, скрипт, изображение или шрифт помечается, если срока нет или он короче семи дней. no-store и no-cache считаются нулём. HTML-страница показывается только для сведения, с предупреждением, если её можно хранить больше часа, ведь тогда вернувшиеся посетители могут видеть устаревшую версию.

Протокол

Проходит с HTTP/2, который передаёт все файлы параллельно по одному соединению. HTTP/3 определяется по заголовку alt-svc, в котором сервер объявляет h3.

Экономия

Переданные байты против распакованных для всей выборки.

Сайт, который везде использует gzip, получает заметку о Brotli, который делает текстовые файлы примерно на 15-20% меньше. Считайте это улучшением, которое стоит запланировать. Без него ничего не сломано.

Как настроить это безопасно

Когда что-то нужно исправить, результат содержит готовые блоки для Apache и nginx. За CDN вроде Cloudflare сжатие происходит на краю сети, а сроки кэширования задаются в панели управления. В WordPress те же правила за вас пишут плагины кэширования.

Со сроком жизни всё решает одно правило. Долгий кэш безопасен, только если адрес файла меняется всякий раз, когда меняется его содержимое. Сборщики выдают имена вроде app.3f9a1c.js, а WordPress добавляет ?ver=6.8. Такие файлы могут нести:

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

Файлам с постоянным именем лучше подходит срок от недели до месяца. Для HTML Cache-Control: no-cache сохраняет копию и сверяет её с сервером перед каждым использованием.

Чтобы проверить изменение из терминала:

curl -sI -H "Accept-Encoding: br, gzip" https://example.com/ | grep -iE "content-encoding|cache-control"

Что аудит не охватывает

Это выборка из пятнадцати файлов одной страницы, поэтому проблема, которая касается только другого шаблона, может проскочить. Аудит не предлагает Zstandard. Он читает max-age и игнорирует s-maxage, который касается только общих кэшей. И он пропускает файлы, которые ваш собственный CDN отдаёт с другого домена. Каждый файл загружается до 3 MB.