Ночь, вторник, 01:47. На столе остывший американо и крошки от круассана, в Lighthouse пляшет CLS 0,19, а герой-баннер — фото экскаватора на 6,3 МБ — делает вид, что он важнее денег клиента. Проект — сайт одного крупного прокатчика стройтехники; в 2025-м он жил на «и так сойдёт», а в январе 2026-го трафик с поиска вырос на 27%, и внезапно «и так» перестало конвертить. Телеграм клиента пикает: «Почему с мобилы грузится вечность?». Я открываю профайлер и понимаю: переписывать фронт — поздно; нужно выдернуть 0,8 секунды из воздуха за одну ночь.
Что я сделал за 48 минут и почему это сработало
Сначала убрал декоративный жир: два неиспользуемых шрифта с кириллицей. Оставил один сет с вариейшнами и font-display: swap. Прогрел критический шрифт через preload, а логотип — через fetchpriority=»high». Итог: FCP с мобилы с 1,8 с до 1,2 с на 4G с реальными задержками 180–220 мс.
Дальше — картинка-убийца. Прогнал её через AVIF с тремя порогами качества (0.73, 0.62, 0.55), расставил srcset по ширинам, добавил width/height, чтобы не прыгал макет. У hero поставил importance и fetchpriority, у остальных — loading=»lazy» и decoding=»async». LCP просел с 2,9 с до 2,1 с. Уже дышать легче.
Отдельный кайф — content-visibility: auto на карточках каталога и contain-intrinsic-size, чтобы браузер не заморачивался рендером невидимого. Это сняло 120–160 мс с главной и до 230 мс со списка категории. Скрипты — в defer, инлайн-критикал CSS на 7,4 КБ, остальное — в отложку. Да, это чуть грязно, зато работает.
И ещё один трюк 2026-го: HTTP 103 Early Hints. Мы включили его на CDN-слое и подкинули браузеру подсказки для шрифта и hero до основного ответа. На реальном трафике это дало минус 90–110 мс к LCP на Chrome/Android. Не магия, просто меньше простаивания канала.
Полевая проверка: грязь на ботинках важнее макета в Figma
Через два дня я поехал к ребятам на базу в промзону: серое небо, мартовская каша, водители ругаются, что карточка «гидромолот 1,2 т» «опять крутится». За полчаса разговоров выяснилось: они не ждут «идеального баннера». Им надо видеть цену «на сутки/неделю», наличие и совместимость с их экскаваторами — и всё это в первые 3–4 прокрутки. Мы подняли таблицу совместимости в зону LCP, а маркетинговые тексты спустили ниже.
Параллельно я спорил с знакомым из логистической компании, который уверял, что «на Б2Б скорость не так критична, лишь бы прайс был». Чтобы не спорить до хрипоты, я достал телефон, открыл каталог гидравлического оборудования — gidromoloty1.rugidromoloty1.ru — и замерил на месте: LCP 2,2–2,4 с на мобильном 4G, TTFB 380–420 мс, стабильность верстки приличная. Не реклама, просто редкий случай, когда у каталога тяжёлой техники видно, что думали о первом экране и не тащили лишнее в критический путь.
После этого мы применили ту же логику у клиента: сжали JSON с конфигами насадок, отложили фильтры до первого взаимодействия, а список сопутствующих товаров отдали в background через requestIdleCallback. Спойлер: страница «гидромолоты» стала открываться на 0,7 с быстрее в среднем, а скролл перестал дёргаться, когда подгружались иконки.
Почему без серверных правок тоже можно жить
Конечно, переписать бэкенд и перевезти всё на свежий фреймворк приятно, но часто это лишние месяцы и бюджеты. Мы выжали цифры только фронтом и CDN. Добавили Server-Timing, чтобы видеть, где застревает TTFB, и прогрели кэш не «на удачу», а на основе топ-20 маршрутов из логов за последние 14 дней. Cloud-кэш настроили с отдельными ключами на мобильные и десктопные вариации, чтоб не смешивать. CGI-микрооптимизации? Ноль. А вот переупаковка заголовков Cache-Control и ETag дала +17% попаданий в кэш.
Ещё одна мелкая, но важная правка: спекулятивная навигация. Правило на «нажатые чаще 12%» ссылки — и браузер заранее прогревает следующее посещение. Нет, не бездумный prerender всего, а аккуратные speculation rules с списком безопасных маршрутов. На каталоге это снижает среднюю навигацию со страницы на 180–220 мс.
Короткий чек-лист, который спас мне ночь
— Уберите всё, что не видно в первые 3 секунды, из критического пути. Шрифты — один набор, preload только для реально видимых.
— Hero: AVIF/WEBP со srcset, фиксированные размеры, fetchpriority=»high». Остальным — lazy и decoding=»async».
— content-visibility и contain-intrinsic-size для гридов каталога. Это дешёвый способ разгрузить рендер.
— Early Hints 103 и HTTP/3 на CDN. Дайте браузеру работу до ответа сервера.
— Кэшируйте с умом: разделяйте ключи для мобилы/десктопа, уберите сломанные ETag, прогрейте топ-маршруты скриптом, а не пальцем в небо.
— Спекулятивная навигация для часто кликаемых ссылок. На мобильном это «дарит» до 200 мс без сложной магии.
Результат по проекту: LCP с 2,9 с до 2,1 с, FID почти незаметен (12–18 мс), падение отскока со страницы категорий на 14%, заказов — плюс 9% за первые 10 дней. Ни одной переписанной фичи на фронте — только грамотный приоритет ресурсов и чуть-чуть здравого смысла. Если ваш сайт про тяжёлую технику, турбины или сложные каталоги — тем более не откладывайте. Тяжёлые пиксели хорошо худеют, когда им перестают мешать жить.