Core Web Vitals простым языком: почему скорость сайта важна
Core Web Vitals без жаргона: что такое LCP, INP и CLS, как скорость сайта влияет на продажи и SEO, как бесплатно проверить сайт и что его тормозит.
Скорость сайта важна, потому что люди не ждут. Если страница долго появляется, с опозданием реагирует на нажатие или «прыгает» во время загрузки, посетитель уходит — часто ещё до того, как увидел ваше предложение. Core Web Vitals — это три метрики Google ровно про эти проблемы: как быстро появляется основной контент, как быстро страница откликается и насколько стабильно она выглядит. Google учитывает их при оценке удобства страниц, но главное — они показывают, приятно ли вообще пользоваться вашим сайтом.
Ниже — без жаргона разработчиков: что означает каждая метрика, какие значения считаются хорошими, как проверить свой сайт и что чаще всего его замедляет.
Почему скорость сайта важна для бизнеса
Представьте сайт как магазин. Медленный сайт — это тугая дверь: кто-то толкнёт сильнее, но многие просто пойдут к соседям. Скорость влияет на бизнес в трёх вещах:
- Конверсия. Каждая лишняя секунда ожидания — шанс, что человек отвлечётся, вернётся в Google и кликнет по конкуренту. Особенно это касается рекламного трафика: за клик вы платите независимо от того, загрузилась страница или нет.
- SEO. Google использует сигналы удобства страницы, в том числе Core Web Vitals, при ранжировании. Сами по себе они не победят сильный контент, но из двух похожих страниц у более быстрой и плавной есть преимущество.
- Доверие. Сайт, который открывается мгновенно и не дёргается, выглядит профессионально. Тормозящий — кажется заброшенным, даже если бизнес отличный.
Большинство посетителей сайтов малого бизнеса заходят с телефона, нередко через мобильный интернет. Поэтому вопрос не «быстро ли на моём ноутбуке в офисе?», а «быстро ли на обычном телефоне в троллейбусе?».
Core Web Vitals простым языком: три метрики
Google подробно описывает метрики на web.dev. Вот человеческая версия:
| Метрика | Что измеряет | Простыми словами | Хорошо | Плохо |
|---|---|---|---|---|
| LCP — Largest Contentful Paint | Загрузка | Когда появляется главное — первый экран, фото, заголовок? | ≤ 2,5 с | > 4 с |
| INP — Interaction to Next Paint | Отклик | Нажал кнопку или открыл меню — как быстро страница реагирует? | ≤ 200 мс | > 500 мс |
| CLS — Cumulative Layout Shift | Стабильность | Прыгает ли содержимое при загрузке, из-за чего я жму не туда? | ≤ 0,1 | > 0,25 |
Всё, что между, — зона «нужно улучшить». Google смотрит на опыт реальных пользователей, и страница проходит проверку, когда не менее 75% визитов (75-й процентиль) укладываются в хорошие значения — отдельно для мобильных и для компьютеров.
LCP: первое впечатление
LCP — момент, когда становится виден самый крупный элемент первого экрана: обычно главное фото или заголовок. Если главная открывается огромной несжатой фотографией, LCP страдает. Типичные решения: сжать и уменьшить изображения, использовать современные форматы WebP или AVIF, загружать главную картинку в приоритете, выбрать быстрый хостинг и CDN.
INP: откликается ли сайт
В марте 2024 года INP заменил старую метрику FID. INP измеряет задержку между нажатием и видимой реакцией. Меню, которое открывается с опозданием, или кнопка «В корзину», которая будто зависла, — это плохой INP. Обычная причина — слишком много JavaScript: тяжёлые темы, слайдеры, виджеты чатов, несколько систем аналитики и трекеров, которые дерутся за процессор телефона.
CLS: ничего не должно прыгать
Вы начинаете читать, сверху подгружается баннер, текст съезжает вниз — и вы нажимаете на рекламу вместо ссылки. Это и есть сдвиг макета. Решения: заранее резервировать место под изображения и встраиваемые блоки (задавать ширину и высоту), не вставлять баннеры над уже загруженным контентом, аккуратно подключать шрифты.
Как проверить скорость сайта бесплатно
Для первой картины специальные инструменты не нужны:
- PageSpeed Insights (pagespeed.web.dev) — вставьте адрес сайта. Сверху будут данные реальных пользователей (если посетителей достаточно для общедоступной статистики Chrome), ниже — лабораторный тест с конкретными рекомендациями. Сначала смотрите вкладку для мобильных.
- Google Search Console → отчёт «Основные интернет-показатели» — показывает, какие группы страниц в порядке, какие требуют улучшения, а какие плохи, по данным реальных посетителей.
- Ваш собственный телефон. Выключите Wi-Fi, откройте сайт через мобильный интернет и честно оцените ощущения. Если есть возможность — попробуйте на старом недорогом смартфоне: у ваших клиентов такие тоже есть.
Совет: не гонитесь за идеальными 100 баллами в лабораторном тесте. Цель — хорошие Core Web Vitals у реальных пользователей и ощущение быстрого сайта. Перейти из «красной» зоны в «зелёную» гораздо важнее, чем с 92 до 100.
Что обычно тормозит сайт компании
По опыту, подозреваемые одни и те же:
- Огромные изображения. Фото прямо с камеры или фотостока по несколько мегабайт, показанные в маленьком размере.
- Тяжёлые темы и конструкторы. Тема, которая «умеет всё», загружает код для всего — на каждой странице.
- Слишком много плагинов и сторонних скриптов. Чаты, всплывающие окна, несколько трекеров, ленты соцсетей, карты на каждой странице.
- Автовоспроизведение видео и слайдеры на первом экране.
- Дешёвый или далёкий хостинг без кэширования и CDN.
- Неправильно подключённые шрифты — много начертаний, загрузка, блокирующая текст.
Чек-лист быстрых улучшений
- Сжать изображения и перевести их в WebP/AVIF.
- Указать ширину и высоту картинок и видео, чтобы ничего не прыгало.
- Включить ленивую загрузку для изображений ниже первого экрана — но не для главного.
- Удалить плагины, виджеты и скрипты, без которых можно обойтись.
- Загружать чаты и тяжёлые виджеты с задержкой или после действия пользователя.
- Включить кэширование и CDN.
- Ограничиться одним-двумя шрифтами и парой начертаний.
- Перепроверять мобильную версию после каждого крупного изменения.
Скорость решается на этапе разработки
Медленный сайт можно ускорить, но гораздо проще сразу сделать быстрый. Выбор технологий, объём JavaScript, работа с изображениями и шрифтами — всё это определяется в самом начале. Когда я делаю сайт, производительность — требование с первого дня: заранее отрендеренные страницы, минимум скриптов, оптимизированные изображения и вёрстка с приоритетом телефона — подробнее в статье про mobile-first дизайн.
Скорость — лишь часть общей картины, о ней в статье зачем бизнесу SEO. А если посетители приходят, но не покупают, загляните в разбор почему посетители не покупают.
Частые вопросы
Какое время загрузки считается хорошим?
По Core Web Vitals основной контент должен появляться примерно за 2,5 секунды (LCP) у большинства реальных посетителей. На практике — чем быстрее, тем лучше, особенно на мобильных.
Влияют ли Core Web Vitals на позиции в Google?
Они входят в сигналы удобства страницы, так что да, роль играют — но релевантность и качество контента важнее. Считайте скорость решающим аргументом при прочих равных и способом поднять конверсию, а не заменой хорошему контенту.
Оценка PageSpeed низкая, но сайт кажется быстрым. Это проблема?
Сначала посмотрите на данные реальных пользователей и отчёт в Search Console. Лабораторная оценка — инструмент диагностики. Если у реальных посетителей Core Web Vitals в зелёной зоне, всё в порядке, а рекомендации используйте для быстрых улучшений.
Можно ли ускорить медленный сайт на WordPress без переделки?
Часто его можно заметно улучшить: изображения, кэш, отказ от лишних плагинов. Но если тяжёлая сама тема, есть предел — иногда переделать дешевле, чем бороться с ней бесконечно.
Хотите сайт, который быстрый по умолчанию?
Выберите нужные страницы и функции в конструкторе и получите предварительную оценку сайта, который строится с упором на скорость с первой строчки кода. Посетители с телефонов почувствуют разницу.
