Разбор
Как улучшить Core Web Vitals за 48 часов: чеклист из 14 шагов + инструменты
53% мобильных посетителей уходят, если страница грузится дольше 3 секунд. Пошаговый чеклист: что чинить в первую очередь, какие инструменты использовать и как не сломать сайт в процессе.
Ты читаешь очередной отчёт по скорости сайта и видишь красные метрики. PageSpeed Insights показывает 38 из 100. Тебе говорят «оптимизируйте» — но никто не говорит что конкретно делать и в каком порядке.
Антагонист этой истории — хаотичная оптимизация. Когда команда одновременно жмёт картинки, переписывает CSS и ставит CDN — и через неделю ничего не меняется, потому что настоящее узкое горлышко было в JavaScript.
Перевёртыш
Старое убеждение: «Оптимизация скорости — это работа на месяцы, нужен DevOps»
Новая реальность: 80% прироста Core Web Vitals даёт 20% действий. Самые результативные фиксы — изображения, шрифты и блокирующий JS — можно сделать за 48 часов без единого DevOps-инженера.
Что ты получишь: 14 конкретных шагов с приоритетами (что чинить первым), инструменты для диагностики и интерактивный чеклист, чтобы ничего не забыть. Посчитай, сколько денег теряет твой сайт прямо сейчас — в калькуляторе потерь от скорости.
Три метрики CWV: что именно измеряем
По данным HTTP Archive Web Almanac 2024, только 39% мобильных сайтов проходят все три порога Core Web Vitals одновременно. Три метрики — три разных аспекта пользовательского опыта.
LCP (Largest Contentful Paint) — скорость загрузки
Время до отрисовки главного элемента: hero-изображения, заголовка, видео. Порог: до 2.5 секунд — хорошо, больше 4 — плохо.
Что обычно является LCP-элементом:
- Hero-картинка (60% случаев)
- Видео-постер
- Большой текстовый блок на фоне кастомного шрифта
CLS (Cumulative Layout Shift) — визуальная стабильность
Суммарный сдвиг элементов при загрузке. Когда ты целишься нажать кнопку, а она уезжает вниз — это CLS. Порог: до 0.1 — хорошо.
Главные виновники:
- Картинки без
width/height - Динамически подгружаемая реклама
- Шрифты, которые меняют размер текста при загрузке (FOUT)
INP (Interaction to Next Paint) — отзывчивость
Заменил FID в марте 2024. Измеряет задержку между кликом/тапом пользователя и визуальным откликом. Порог: до 200 мс — хорошо.
Частая причина: тяжёлый JavaScript, который блокирует главный поток.
Сделай за 5 минут
Открой PageSpeed Insights, вбей URL главной страницы. Запиши три числа: LCP, CLS, INP. Это твоя точка отсчёта. Без неё не поймёшь, помогли ли твои действия.
Час 0—4: диагностика и приоритизация
По данным CrUX, 72% проблем с LCP связаны с изображениями и шрифтами. Не начинай оптимизацию, пока не знаешь, что именно сломано.
Инструменты диагностики
| Инструмент | Что показывает | Когда использовать |
|---|---|---|
| PageSpeed Insights | Полевые данные CrUX + лабораторный аудит | Первый шаг: общая картина |
| Chrome DevTools (Performance) | Точный waterfall загрузки, Long Tasks | Когда нужно найти конкретный файл-виновник |
| WebPageTest.org | Waterfall из разных локаций, filmstrip | Проверка из региона целевой аудитории |
| Search Console (CWV report) | Реальные данные пользователей по URL-группам | Оценка масштаба: сколько страниц проваливают |
| Lighthouse CI | Автоматический аудит при деплое | Защита от регрессий |
Алгоритм приоритизации
- Если LCP > 4 сек — начинай с изображений и шрифтов (Час 4—16)
- Если CLS > 0.25 — начинай с размеров картинок и рекламных блоков (Час 16—24)
- Если INP > 500 мс — начинай с JavaScript-аудита (Час 24—40)
- Если всё плохо — начинай с LCP (даёт максимальный эффект на конверсию)
Кстати, мы замеряли скорость сайтов по 37 нишам российского бизнеса в большом исследовании — посмотри бенчмарки для своей отрасли.
Час 4—16: убиваем LCP
Google Developers называют LCP главной метрикой конверсии: каждые 100 мс прироста LCP — это минус 1.3% конверсии в e-commerce.
Шаг 1. Конвертируй изображения в WebP / AVIF
AVIF на 50% легче JPEG при том же качестве. WebP — на 30%. Если ты до сих пор раздаёшь PNG — это первый фикс.
Инструменты: Squoosh (ручное сжатие), Sharp (Node.js, batch), Cloudflare Polish (автоматическое).
Шаг 2. Добавь loading="lazy" ко всем картинкам ниже фолда
Но не к LCP-элементу. Hero-картинку грузи с fetchpriority="high" и без lazy.
<!-- Hero (LCP) -- грузи сразу -->
<img src="hero.webp" fetchpriority="high" width="1200" height="630" alt="..." />
<!-- Остальные -- лениво -->
<img src="photo.webp" loading="lazy" width="600" height="400" alt="..." />Шаг 3. Preload критических ресурсов
В <head> добавь preload для LCP-изображения и основного шрифта:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<link rel="preload" as="font" href="/fonts/main.woff2" type="font/woff2" crossorigin />Шаг 4. Оптимизируй шрифты
- Используй
font-display: swap(текст виден сразу) - Подмножествуй кириллицу:
unicode-range: U+0400-04FF - Самохости шрифты вместо Google Fonts (экономишь DNS-lookup + connect)
Шаг 5. Включи CDN или проверь его настройки
Без CDN пользователь из Владивостока ждёт ответа от московского сервера ~120 мс только на RTT. CDN сокращает это до 10—20 мс.
Сделай за 5 минут
Открой DevTools → Network. Найди LCP-элемент (он подсвечен во вкладке Performance). Посмотри его размер. Если больше 200 КБ — конвертируй в WebP/AVIF прямо сейчас через Squoosh.
Час 16—24: убиваем CLS
По данным HTTP Archive, 75-й перцентиль CLS в мобильном вебе — 0.15. Это выше порога «хорошо» (0.1), и большинство сайтов проваливаются именно на мобильных.
Шаг 6. Задай width и height всем <img> и <video>
Браузер резервирует место до загрузки. Без этих атрибутов он рисует элемент с нулевой высотой, а потом сдвигает всё вниз.
Шаг 7. Зарезервируй место под рекламу
Если на сайте есть баннеры — оберни их в контейнер с фиксированным min-height:
.ad-slot { min-height: 250px; background: var(--surface); }Шаг 8. Используй font-display: optional для некритичных шрифтов
swap решает проблему невидимого текста, но создаёт CLS при замене fallback → кастомный шрифт. Для декоративных шрифтов используй optional — если шрифт не загрузился за 100 мс, браузер остаётся на fallback без сдвига.
Шаг 9. Не вставляй элементы выше видимой области динамически
Баннеры «подпишись» и нотификации, которые появляются вверху страницы после загрузки — классический источник CLS. Используй position: fixed или sticky, не сдвигай контент.
Час 24—40: убиваем INP
INP — самая коварная метрика. Её нельзя увидеть в Lighthouse (он измеряет только TBT как прокси). Реальные данные — только из CrUX или RUM.
Шаг 10. Найди и разбей Long Tasks
Откройте Chrome DevTools → Performance → Record. Взаимодействуй с сайтом. Красные полосы сверху — это Long Tasks (>50 мс). Именно они блокируют INP.
Типичные виновники:
- Analytics-скрипты (GA4, Метрика, пиксели)
- Тяжёлые слайдеры и карусели
- Инициализация чат-виджетов
Шаг 11. Перенеси некритичный JS на defer или async
<!-- Блокирует рендер -->
<script src="analytics.js"></script>
<!-- Не блокирует -->
<script src="analytics.js" defer></script>Порядок: критичный JS для above-the-fold → defer для интерактива → async для аналитики.
Шаг 12. Используй requestIdleCallback для тяжёлых операций
Инициализацию чата, подгрузку рекомендаций, пиксели ретаргетинга — всё это можно отложить до момента, когда браузер свободен.
Шаг 13. Проверь обработчики событий
Если на каждый скролл висит тяжёлый обработчик — добавь passive: true и debounce. Это прямо влияет на INP.
Сделай за 5 минут
Открой DevTools → Performance → Record → кликни 5 раз по сайту на разных элементах → Stop. Посмотри вкладку Interactions. Если любой interaction длиннее 200 мс — это твой первый кандидат на оптимизацию.
Час 40—48: проверка и защита от регрессий
Шаг 14. Настрой мониторинг
Разовая оптимизация бесполезна без мониторинга. Через месяц кто-то добавит новый скрипт — и всё вернётся.
- Search Console → Core Web Vitals — бесплатный мониторинг раз в 28 дней
- CrUX Dashboard (Looker Studio) — визуализация динамики
- Lighthouse CI — автоматическая проверка при каждом деплое
Мы также публикуем ежемесячные замеры скорости по индустриям. Посмотри, как выглядит твоя ниша: банки, e-commerce, клиники, EdTech.
Интерактивный чеклист: отметь что сделано
Core Web Vitals: 14 шагов за 48 часов
Квиз: проверь понимание CWV
LCP сайта — 3.8 секунды. Главный элемент — hero-картинка 1.2 МБ в PNG. Какой фикс даст максимальный эффект?
CLS сайта — 0.35. В PageSpeed видишь, что сдвиг происходит при загрузке шрифта. Что поможет?
INP сайта — 450 мс. В Performance видишь Long Task на 380 мс при клике на кнопку «Добавить в корзину». Что делать?
Сколько денег ты теряешь прямо сейчас
Связь между скоростью и деньгами прямая. По данным Google, ускорение с 3 до 1.5 секунд увеличивает конверсию на 20—30%. Посчитай свои потери: калькулятор потерь от скорости сайта. А если нужно обосновать бюджет на оптимизацию перед руководством — калькулятор ROI покажет окупаемость.
Следи за свежими данными по скорости и рынку в разделе новостей — мы регулярно публикуем обновления бенчмарков.
«Скорость — это не техническая метрика. Это бизнес-метрика. Каждые 100 мс задержки — это потерянные деньги, которые вы не увидите ни в одном отчёте.»
— Addy Osmani, Google Chrome Team
Что дальше
Ты прошёл 14 шагов за 48 часов — основная работа сделана. Но Web Vitals — это не разовый проект, а процесс. Регрессии будут: новый скрипт аналитики, обновление CMS, баннер к акции. Lighthouse CI и мониторинг в Search Console — твоя страховка.
Если хочешь понять, как твой сайт выглядит на фоне конкурентов — загляни в наш рейтинг скорости сайтов по отраслям. А для расчёта влияния скорости на рекламный бюджет используй калькулятор CPM и калькулятор CR.
Что дальше?
В Telegram-канале @lexamarketolog выходят оперативные разборы скорости сайтов по индустриям — с конкретными цифрами и рекомендациями. Подпишись, чтобы не пропустить.
Также: видео на MAX · разборы в ВК · сторис @loading_express
Источники
Читайте также
- Скорость сайта и SEO в 2026: Core Web Vitals, Яндекс и российские CDN ·
- Этапы загрузки сайта: от DNS до LCP — что происходит за 2 секунды ·
- AEO 2026: как оптимизировать сайт под ответы поисковиков и GigaChat ·
- Яндекс «Тайфун» 2025–2026: как не попасть под фильтр и восстановить позиции ·
- Топ-20 инструментов для маркетинга и дизайна: полный гид по лучшим подборкам ·
- Скорость сайта и SEO в 2026: Core Web Vitals, Яндекс и российские CDN ·
Пока без комментариев. Будьте первым.