Core Web VitalsскоростьтехникаFAQ

Как ускорить сайт для Core Web Vitals в 2026

Скорость = ранжирование + конверсия. Объясняю 20 проверенных техник ускорения сайта для Core Web Vitals.

Коновалов Д.19 июня 2026 г.8 мин чтения

Цели Core Web Vitals в 2026

LCP (Largest Contentful Paint) < 2.5s
INP (Interaction to Next Paint) < 200ms
CLS (Cumulative Layout Shift) < 0.1

Подробнее про метрики →.

Дальше — 20 техник для попадания в зелёную зону.

Часть 1. Картинки (LCP)

1. WebP/AVIF вместо JPEG/PNG

Экономия 30-80% веса при том же качестве.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="...">
</picture>

2. Responsive Images

Отдавайте картинку нужного размера под устройство:

<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="...">

3. Lazy loading для below-fold

<img src="..." loading="lazy" alt="...">

Важно: НЕ ставьте lazy на LCP-элемент (главную картинку выше складки).

Lazy loading правильно →.

4. Preload главного изображения

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

LCP-картинка загрузится приоритетно.

5. Указывайте width и height

<img src="..." width="800" height="600" alt="...">

Без этого — CLS (картинка «прыгает» при загрузке).

Часть 2. CSS (LCP + CLS)

6. Critical CSS inline

Минимальный CSS для above-fold контента — в <head> напрямую:

<style>
  /* критический CSS */
</style>

Остальной CSS — асинхронно.

7. Асинхронная загрузка некритичного CSS

<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

8. Минификация CSS

Удаление пробелов и комментариев — экономия 10-30% размера.

Инструменты: cssnano, esbuild, postcss-minify.

9. Удаление неиспользуемого CSS

Chrome DevTools → Coverage → найти неиспользуемые селекторы.

Инструмент: PurgeCSS, UnCSS.

Часть 3. JavaScript (INP + LCP)

10. Минификация и uglify

esbuild, swc, terser — сокращают размер на 30-60%.

11. Code splitting

Делите большой бандл на чанки. Загружайте только нужное:

// Next.js
const Component = dynamic(() => import('./HeavyComponent'));

12. Async / defer

<script src="analytics.js" async></script>
<script src="non-critical.js" defer></script>

async — независимо от парсинга HTML. defer — после парсинга HTML.

13. Уменьшение Third-Party скриптов

Каждый внешний скрипт = блокирующий ресурс + потенциальный INP-удар.

Удалите ненужные
Загружайте с задержкой
Используйте легковесные альтернативы

14. Web Workers для тяжёлых задач

Длинные вычисления — в Worker, не блокирующий main thread.

15. requestIdleCallback

Запускайте некритичные задачи когда браузер свободен:

requestIdleCallback(() => {
  // тяжёлая работа
});

Часть 4. Шрифты (LCP + CLS)

16. font-display: swap

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Текст показывается сразу с fallback шрифтом, потом меняется.

17. Preload шрифтов

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

18. WOFF2 формат

Самый компактный (на 30% меньше WOFF).

19. Subset шрифтов

Если используете только латиницу — не грузите кириллические глифы. Тулзы: glyphhanger, subfont.

Часть 5. Серверная сторона

20. CDN

Cloudflare, Selectel CDN, Yandex Cloud CDN — отдают статику с ближайшего узла.

Сокращение TTFB
Снижение нагрузки на сервер
Бесплатно базовый план (Cloudflare)

CDN для SEO →.

21. HTTP/2 и HTTP/3

Multiplexing запросов. Поддерживается всеми современными серверами.

HTTP/2 и HTTP/3 →.

22. Cache headers

Cache-Control: public, max-age=31536000, immutable

Для статики — кешировать на год.

23. Gzip / Brotli

Сжатие на сервере. Brotli лучше Gzip на 15-25%.

24. SSR vs SSG

SSG быстрее SSR. Если контент редко меняется — рендерите при билде.

SSR vs SSG vs CSR →.

25. Edge functions

Cloudflare Workers, Vercel Edge — функции на edge-узлах CDN. Быстрее, чем origin.

Часть 6. Database & Backend

26. Кеширование запросов

Redis для горячих запросов. Уменьшает TTFB.

27. Indexes в DB

Без индексов — медленные запросы. Проверьте EXPLAIN ANALYZE.

28. Connection pooling

Особенно для serverless и edge.

29. CDN для API

Cloudflare кеш для API responses (где можно).

Часть 7. HTML

30. Минификация HTML

Удаление пробелов между тегами — 10-20% размера.

31. preconnect и dns-prefetch

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://api.example.com">

Предварительно резолвится DNS и устанавливается соединение.

Часть 8. CLS-специфичные

32. Резервируем место для динамического контента

Не вставляйте контент сверху уже загруженного → сдвиг.

33. Размеры для embeds

YouTube, Twitter embeds — задавайте aspect-ratio через CSS:

.embed-container {
  aspect-ratio: 16 / 9;
}

34. Skeleton screens

Вместо «прыгающих» элементов — показывать placeholder с правильными размерами.

Часть 9. INP-специфичные

35. Breaking up long tasks

Разбивайте задачи > 50ms на части через setTimeout(0) или scheduler.yield().

36. Debouncing input handlers

const debouncedHandler = debounce(handler, 100);
input.addEventListener('input', debouncedHandler);

37. Virtualization для длинных списков

Не рендерите 10000 элементов сразу. Используйте react-window, virtual-scroll.

Часть 10. Инструменты замеров

38. PageSpeed Insights

Real CWV + Lighthouse audit.

39. Chrome DevTools Performance

Подробный трейс выполнения.

40. Web Vitals extension

Real-time метрики в браузере.

41. GSC Core Web Vitals report

Реальные данные с пользователей.

42. Я.Метрика — скорость

Аналогичный отчёт от Яндекса.

Чек-лист быстрого старта

Шаг 1. Измерить (10 мин)

PageSpeed Insights → текущие метрики

Шаг 2. Quick wins (1 час)

WebP/AVIF
Lazy loading
Preload главной картинки
font-display: swap

Шаг 3. Средние (1 день)

Critical CSS
Code splitting
Минификация
CDN

Шаг 4. Сложные (1 неделя)

SSR/SSG переход
Web Workers
Backend оптимизация
Edge functions

Результат: с 40 PageSpeed до 90+ обычно достижимо.

Реальный кейс

E-commerce сайт. Цель: вернуть в зелёную зону.

До:

LCP: 4.2s 🟥
INP: 380ms 🟥
CLS: 0.18 🟧
PageSpeed: 32

После:

LCP: 1.8s 🟩
INP: 110ms 🟩
CLS: 0.04 🟩
PageSpeed: 91

Что сделали:

WebP всех картинок (−58% веса)
Critical CSS inline
Lazy loading
Preload hero
font-display: swap
Удалили 3 third-party скрипта
Cloudflare CDN
Brotli сжатие

Эффект:

+25% органического трафика за 2 мес
+18% конверсия

Итог

Скорость — это деньги. 100ms улучшения LCP = +1% конверсии (data Amazon).

Начните с WebP + lazy + preload + critical CSS — 80% эффекта за 20% усилий.

Прогнать бесплатный SEO-аудит →

Получить SEO-аудит своего сайта

Бесплатно. Без регистрации. Топ-проблемы и план роста позиций за 60 секунд.

Проверить сайт →