Скорость = деньги: практический гид по Core Web Vitals и доходу

Быстрые страницы конвертируют лучше. В этом тексте без лишней «академии» разбираем, как скорость (LCP, INP, CLS) связана с деньгами и
что реально сделать: оставить «припуск на рендер», вынести критический CSS, отложить «тяжёлый» JavaScript, подкрутить edge-кэш и привести картинки в порядок.

1. Три метрики, которые стоит помнить

LCP - когда появляется главный блок страницы (герой-картинка, заголовок, цена). Хорошо, когда до 2.5 секунды.

INP - как быстро страница отвечает на клик, ввод и т. п. Хорошо - до 200 миллисекунд.

CLS - прыгает ли верстка. Хорошо - до 0.1 (ничего не «скачет» после загрузки).

Связь простая: раньше видно главное - выше шанс, что человек продолжит. Быстрее отклик - меньше «брошенных» действий.
Стабильная верстка - меньше промахов по кнопкам и ошибок в заказе.

2. Где уходит время

• Тяжёлые картинки и отсутствие размеров - браузер не понимает, сколько места оставить.
• Стили приходят поздно - текст есть, но «красиво» станет через секунду.
• Ранний и лишний JavaScript - многое можно запускать после первого кадра или по клику.
• Шрифты и сторонние виджеты - ждут загрузки и блокируют отрисовку.
• Далёкий сервер - каждое обращение едет дольше, чем нужно.

3. «Припуск на рендер»: дайте странице выдохнуть

Идея в том, чтобы как можно быстрее показать человеку «суть» страницы, а второстепенное - догрузить чуть позже.

1. HTML - сразу: отдавайте страницу потоково. Браузер начнёт рисовать, не дожидаясь всего ответа.
2. Критические стили - в начале: небольшой кусок CSS для первого экрана вставьте прямо в head. Остальное подключите обычным файлом.
3. Главная картинка - с приоритетом: для LCP-изображения задайте размеры и «попросите» загрузить раньше.
4. Шрифты - без паузы: разрешите показать запасной шрифт, пока основной загружается.
5. Стороннее - после: всё аналитическое и рекламное можно подключить после появления первого кадра.

4. Критический CSS по-человечески

Нужен маленький набор правил, чтобы первый экран выглядел достойно. Его можно собрать плагином сборки или сервисом, а затем:
держать файл коротким (обычно до ~10-14 КБ), не дублировать в нём «общие» стили и обновлять при изменении шаблона.

5. JavaScript: позже и по делу

Большая часть задержек - из-за скриптов. Решение: интерактив - по требованию.

• Подгружайте виджеты, когда они попали в область видимости, или при первом действии пользователя.
• Разбейте код на части: то, что нужно сразу, и то, что можно потом.
• Не блокируйте рендер: подключайте скрипты с атрибутами, которые не мешают первому кадру.

6. Edge-кэш и география

Если сервер далеко, любая мелочь тормозит. CDN/edge держит копии страницы «рядом» с пользователем. Хорошо работает связка:
кэш HTML по важным вариантам (язык, валюта), быстрый ответ старой версии и тихое обновление в фоне.

7. Картинки: быстрый выигрыш

• Используйте современные форматы (например, AVIF/WebP) и несколько размеров для разных экранов.
• Не лените главную картинку страницы. Остальные - можно.
• Всегда указывайте ширину и высоту (или соотношение сторон) - это спасает от «прыжков» (CLS).
• Не перегружайте страницу невидимыми галереями: грузите по мере просмотра.

8. Что сделать сначала: короткий чек-лист

• Поставьте цели: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
• Дайте странице «вздохнуть»: критический CSS в head, главный визуал - с приоритетом и фиксированными размерами.
• Отложите «тяжёлый» JS на потом: по видимости/по клику. Разбейте бандлы.
• Включите edge-кэш для HTML, статики и изображений. Держите долгие TTL для файлов с версиями в имени.
• Проверьте шрифты: разрешите показ запасного шрифта, не тяните лишние начертания.
• Соберите «полевые» метрики: смотрите показатели не только в лаборатории, а на реальном трафике.

9. Итог

Скорость - это про внимание и ритм действия. Покажите главное раньше, отвечайте быстрее на клики и держите верстку стабильной -
и графики продаж начнут ползти вверх. Делайте по шагам: картинки, критический CSS, отложенный JS, edge-кэш. И проверяйте результат на живом трафике.