База знаний

27.08.2026

Оптимизация скорости загрузки и Core Web Vitals

Что такое Core Web Vitals в 2026 году: Google оценивает три пользовательских сигнала, чтобы понять, насколько страница кажется быстрой, стабильной и отзывчивой :
Оптимизация скорости загрузки и Core Web Vitals

Что такое Core Web Vitals в 2026 году: Google оценивает три пользовательских сигнала, чтобы понять, насколько страница кажется быстрой, стабильной и отзывчивой :

1.    LCP (Largest Contentful Paint) — время загрузки самого крупного видимого элемента (обычно — герой-изображение или заголовок). Хороший показатель: < 2.5 секунд. Плохой: > 4.0 секунд .

2.    INP (Interaction to Next Paint) — заменил FID (First Input Delay) в марте 2024. Если FID измерял только задержку перед регистрацией первого клика, то INP отслеживает отзывчивость на все взаимодействия пользователя на странице — клики, нажатия клавиш. Хороший показатель: < 200 миллисекунд .

3.    CLS (Cumulative Layout Shift) — измеряет визуальную стабильность: насколько элементы на странице двигаются во время загрузки. Хороший показатель: < 0.1 .

Критическое понимание для SEO-специалиста: Google оценивает не среднее или «лучшее» посещение, а 75-й перцентиль реальных пользователей. Это значит, что 25% ваших посетителей с самыми медленными устройствами и плохим соединением определяют, пройдёт ли страница «зелёный» порог. Если на телефоне вы всё открываете быстро, а на старом Android-устройстве с 3G сайт тормозит — Google засчитает плохую оценку .

Два типа данных для измерения:

·      Field data (Real User Monitoring, CrUX) — данные от реальных пользователей за последние 28 дней. Это то, на что Google опирается для ранжирования. Отображается в Search Console (отчёт Core Web Vitals) и PageSpeed Insights в верхней части .

·      Lab data (Lighthouse) — симулированная загрузка в контролируемой среде. Полезна для диагностики и тестирования исправлений, но не является прямым ранжирующим сигналом. Важно: INP в лабораторных условиях не измеряется вообще, потому что INP требует реальных взаимодействий .

Самые частые причины плохих Core Web Vitals и методы исправления :

Плохой LCP:

·      Причина: Тяжёлый контент в видимой части экрана — полноэкранное видео, слайдер, чат-виджет. Браузер должен загрузить все эти ресурсы, прежде чем нарисовать главный элемент.

·      Исправление: Добавить атрибут fetchpriority="high" на главное изображение. Это говорит браузеру загружать его в первую очередь .

·      Причина: Web-шрифты загружаются поздно и блокируют рендеринг текста.

·      Исправление: Использовать font-display: swap и предварительную загрузку (preload) основного шрифта .

·      Причина: Неоптимизированные изображения — JPEG/PNG без сжатия и без современных форматов.

·      Исправление: Конвертировать изображения в WebP или AVIF, использовать адаптивные изображения с srcset.

Плохой INP:

·      Причина: Третьи стороны — скрипты аналитики, пиксели ретаргетинга, чат-виджеты — работают в главном потоке браузера и блокируют обработку кликов. Один медленный скрипт может «убить» INP даже на быстром сайте .

·      Исправление: Аудировать загрузку сторонних скриптов. Отложить (defer) загрузку некритичных скриптов или использовать async и web workers. В Chrome DevTools (вкладка Coverage) посмотреть, какие скрипты реально используются на странице, и убрать неиспользуемый код .

·      Причина: Слишком много JavaScript-кода, выполняемого в главном потоке (особенно актуально для SPA и сложных визуальных конструкторов).

·      Исправление: Использовать SSR (Server Side Rendering) или SSG (Static Site Generation) вместо клиентского рендеринга (CSR).

Плохой CLS:

·      Причина: Изображения без указанных размеров (width / height). Браузер не резервирует место, а когда картинка загружается, «сдвигает» контент вниз .

·      Исправление: Всегда задавать явные размеры для изображений (width="…" height="…") или использовать CSS aspect-ratio. Это позволяет браузеру зарезервировать правильную область .

·      Причина: Всплывающие окна, баннеры cookie, рекламные блоки, которые появляются после загрузки и сдвигают контент.

·      Исправление: Зарезервировать для них место заранее, либо вызывать их с задержкой, которая не влияет на CLS.

·      Причина: Web-шрифты, которые подгружаются с задержкой и меняют размер текста при загрузке.

·      Исправление: Использовать font-display: swap и предзагрузку шрифтов — чтобы браузер сразу отрисовал текст с запасным шрифтом, а потом «свопнул» на красивый без сдвига.

Статистика по Core Web Vitals в 2026: по данным CrUX, только 51% мобильных сайтов полностью «зелёные» по всем трём показателям. Это значит, что «зелёный» статус автоматически ставит ваш сайт выше более чем половины конкурентов .

Рубрика: Техническая оптимизация сайта