Представьте: ваш сайт загружается за 5 секунд, но LCP — 4.5 с. Google уже пометил страницу как медленную, и трафик проседает на 20%. Мы сталкивались с этим десятки раз: виноват не хостинг, а неоптимизированный hero-элемент, медленный TTFB или render-blocking CSS. Наша команда за многолетний опыт оптимизировала Core Web Vitals для десятков проектов и знает, как выжать зелёные метрики на любом стеке. В этой статье разберём, как улучшить LCP, INP и CLS, используя современные техники. Вы узнаете, какие инструменты помогут отслеживать прогресс и сколько времени занимает типичная оптимизация. Мы не используем волшебные палочки — только точные настройки сервера, прелоады и оптимизацию шрифтов. Каждая секунда задержки снижает конверсию на 7%, а оптимизация Core Web Vitals может увеличить её на 10-15%. Ускорение сайта и соответствие Google Page Experience — обязательный минимум для конкурентоспособности.
Три метрики и целевые значения
| Метрика | Хорошо | Требует улучшения | Плохо |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 с | 2.5–4.0 с | > 4.0 с |
| INP (Interaction to Next Paint) | ≤ 200 мс | 200–500 мс | > 500 мс |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 |
INP пришёл на смену FID в последней версии Core Web Vitals. FID измерял только первое взаимодействие; INP — все взаимодействия за сессию. Подробнее — в документации MDN.
Стратегия оптимизации Core Web Vitals
Когда стоит задуматься об оптимизации?
Если хотя бы одна метрика попадает в красную зону — теряете до 20% трафика. Зелёные показатели дают преимущество в ранжировании. Особенно важно для интернет-магазинов: каждая секунда задержки снижает конверсию на 7%.
Почему LCP — главная метрика?
LCP — момент, когда самый крупный элемент (обычно hero-изображение или H1) появляется на экране. Плохой LCP — главная причина потери посетителей: исследование Google показывает, что 53% мобильных пользователей уходят, если загрузка дольше 3 секунд.
Основные причины плохого LCP: отсутствие preload hero-изображения, медленный TTFB, render-blocking CSS и JS, а также неоптимизированные изображения. Preload изображения снижает LCP в 2 раза эффективнее, чем просто оптимизация изображений.
Preload LCP-изображения — один из самых эффективных приёмов:
<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w" imagesizes="100vw"> <img src="/images/hero.webp" fetchpriority="high" loading="eager" width="1200" height="630" alt="Core Web Vitals: оптимизация LCP"> Как INP влияет на пользовательский опыт?
INP измеряет задержку между действием пользователя (клик, нажатие клавиши) и следующей отрисовкой. Плохой INP — признак перегруженного main thread.
Для INP типичны длинные JavaScript-задачи и синхронные обработчики. Основные приёмы:
async function processLargeList(items) { for (let i = 0; i < items.length; i++) { processItem(items[i]); if (i % 50 === 0) { await new Promise(r => setTimeout(r, 0)); } } } import { startTransition } from 'react'; function handleSearch(query) { setInputValue(query); startTransition(() => { setSearchResults(filterResults(query)); }); } CLS: стабильность макета без сюрпризов
CLS — сумма смещений элементов при загрузке. Каждое смещение раздражает пользователя и снижает конверсию.
CLS страдает из-за изображений без размеров и динамических вставок. Решения:
<img src="photo.webp" width="800" height="600" alt="стабильность макета"> <style> .hero-image { aspect-ratio: 16 / 9; width: 100%; } </style> @font-face { font-family: 'Inter'; font-display: optional; src: url('/fonts/inter.woff2') format('woff2'); } Инструменты измерения и мониторинга
| Инструмент | Тип данных | Назначение |
|---|---|---|
| PageSpeed Insights | Лабораторные | Быстрая проверка |
| Lighthouse (DevTools) | Лабораторные | Детальный аудит |
| CrUX (Search Console) | Полевые | Реальные пользователи |
| web-vitals npm | Полевые | Сбор в аналитику |
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals'; function sendToAnalytics({ name, value, rating, id }) { gtag('event', name, { event_category: 'Web Vitals', event_label: id, value: Math.round(name === 'CLS' ? value * 1000 : value), non_interaction: true, custom_map: { metric_rating: rating } }); } onCLS(sendToAnalytics); onINP(sendToAnalytics); onLCP(sendToAnalytics); onFCP(sendToAnalytics); onTTFB(sendToAnalytics); Как мы оптимизируем Core Web Vitals: пошаговый план
- Аудит всех страниц через PageSpeed Insights, CrUX и Lighthouse.
- Выявление быстрых побед (preload, размеры, шрифты) и глубоких проблем (JS-оптимизация, серверные задержки).
- Внедрение изменений с приоритетом по влиянию на LCP, INP, CLS.
- Мониторинг в реальном времени после деплоя.
- Документирование результатов и рекомендаций.
Что входит в работу
- Полный аудит Core Web Vitals с отчётом по каждой странице.
- Устранение блокирующих ресурсов, оптимизация изображений и шрифтов.
- Настройка серверного кеширования и CDN при необходимости.
- Оптимизация JavaScript (разбивка длинных задач, ленивая загрузка).
- Предоставление готового кода с комментариями для вашей команды.
- Мониторинг метрик в течение 3 месяцев и корректировка.
Процесс работы
- Аудит: анализ всех страниц, выявление узких мест.
- Реализация: внесение изменений в код, настройка серверного кеширования.
- Мониторинг: отслеживание через CrUX и web-vitals после деплоя.
- Гарантия: документация и поддержка зелёных показателей в течение 3 месяцев.
Сроки и стоимость
Типичная оптимизация Core Web Vitals занимает от 2 до 4 недель. Стоимость рассчитывается индивидуально после аудита.
Закажите бесплатный аудит Core Web Vitals, чтобы узнать точный план оптимизации и сроки. Получите консультацию нашего инженера по вашим метрикам.