AVIF и WebP на сайте с кэшем: разметка без современных форматов замерзает на неделю

AVIF и WebP весят в разы меньше JPEG и PNG, и все современные плагины миниатюр их умеют. Но генерировать их долго, поэтому обычно это делается в фоне: страница получает JPEG сразу, а современные форматы появляются через минуту. На сайте с кэшем страниц эта минута может растянуться на неделю.

Это двадцать восьмая часть цикла «PageSpeed без мифов».

Как это происходит

1. После выката кэш страниц сбрасывается, и обходчик (или первый посетитель) рендерит страницу заново.
2. Новые миниатюры нарезаются сразу, но только в исходном формате. AVIF и WebP встают в очередь — фоновый обработчик сделает их через минуту-другую.
3. Разметка, отрендеренная в эту минуту, содержит только JPEG или PNG — без <source type="image/avif">.
4. Эта разметка уходит в кэш страниц. Если кэш живёт неделю, неделю все посетители получают тяжёлые файлы, хотя AVIF давно лежит рядом на диске.

Мы поймали это на рабочем сайте: картинки первого экрана отдавались PNG на 122 и 224 КБ, а рядом лежали готовые AVIF на 14 и 42 КБ. В отчёте — «задержка отрисовки 2070 мс» и «используйте современные форматы, экономия 324 КБ».

Как проверить свой сайт

# сколько <source> с avif в разметке, которую получают посетители
curl -s https://example.ru/ | grep -c 'type="image/avif"'

Сравните с тем же запросом через несколько минут после выката и через день. Если число растёт только после сброса кэша — у вас та же история.

Лечение

Перед записью страницы в кэш проверить разметку: есть ли картинки без современных форматов, для которых они ещё в очереди.

• Разметка неполная — отдаём её посетителю, но кэшируем ненадолго (у нас — две минуты через заголовок X-Accel-Expires: 120) и ставим страницу в очередь на перегрев через три минуты, когда форматы будут готовы.
• Разметка полная — кэшируем как обычно, на неделю.

Проверка стоит около 0,5 мс на страницу — это поиск по уже готовому HTML.

Сколько стоит AVIF для сервера

Почему форматы вообще делаются в фоне: AVIF очень дорогой в кодировании. С хорошим сжатием одна картинка кодируется 10–18 секунд. Однажды очередь форматов на каталоге из тысяч товаров составила около 24 тысяч задач — это больше 50 часов работы одного ядра на небольшом сервере, примерно 276 картинок в час днём и 456 ночью, когда нет посетителей.

Практические выводы:

• сначала делайте все WebP (быстро), потом AVIF: WebP закроет основную экономию, пока AVIF догоняет;
• новый размер миниатюры на большом каталоге — это не «поменять одну цифру», а тысячи новых задач в очереди; выкатывайте его в спокойное время;
• следите, чтобы фоновая обработка не мешала посетителям: ограничивайте её по нагрузке.