Скорость сайта: что такое Core Web Vitals и как их починить
Медленный сайт теряет посетителей ещё до того, как они увидели предложение. Разбираем, что именно измеряют метрики скорости, какие значения считаются нормой, какие причины тормозов встречаются чаще всего и что можно исправить без переписывания сайта заново.
Скорость сайта обсуждают либо слишком технически, либо слишком поверхностно. На практике владельцу бизнеса достаточно понимать три вещи: как быстро человек видит содержимое, не прыгает ли вёрстка во время загрузки и реагирует ли страница на нажатия. Именно это измеряют метрики Core Web Vitals, и именно это чувствует посетитель.
Три метрики и их пороги
| Метрика | Что измеряет | Хорошо | Плохо |
|---|---|---|---|
| LCP | Через сколько виден главный блок экрана | до 2,5 с | больше 4 с |
| CLS | Насколько «прыгает» вёрстка при загрузке | до 0,1 | больше 0,25 |
| INP | Задержка отклика на нажатие | до 200 мс | больше 500 мс |
Особенно раздражает вторая проблема: человек целится в кнопку, в этот момент подгружается баннер, всё сдвигается и нажатие приходится не туда. Формально сайт «загрузился быстро», а пользоваться им неприятно — и именно это фиксирует CLS.
Отдельно стоит смотреть время ответа сервера (TTFB). Оно не входит в тройку, но задаёт потолок: если сервер думает секунду, LCP быстрее полутора секунд не станет никакими правками вёрстки.
Причина №1: изображения
Самый частый случай — фотография весом в несколько мегабайт, которая на экране отображается размером с визитку. Браузер всё равно скачивает её целиком. Исправление даёт кратный выигрыш и не требует программирования.
- Загружайте изображения в том размере, в котором они показываются, плюс запас на ретину
- Используйте современные форматы: WebP или AVIF вместо JPEG и PNG
- Включите отложенную загрузку для всего, что ниже первого экрана
- Указывайте ширину и высоту в разметке — это убирает «прыжки» вёрстки
- Картинку первого экрана, наоборот, грузите приоритетно и без ленивой загрузки
На типовом сайте малого бизнеса половина веса страницы — это одна неоптимизированная фотография из первого экрана.
Практический ориентир: фотография на всю ширину экрана после правильного сжатия весит 100–200 КБ, а не 2–3 МБ. Разница в десять раз достигается сжатием и сменой формата, без потери качества, заметной глазу.
Причина №2: чужие скрипты
Виджеты чатов, счётчики, карты, всплывающие окна, пиксели рекламных систем — каждый из них тянет свой код. Пять сервисов на сайте легко добавляют секунду ожидания и портят INP: браузер занят исполнением чужого кода и не успевает отвечать на нажатия.
Ревизия простая: откройте вкладку Network в инструментах разработчика, отсортируйте по домену и честно ответьте, каким из этих сервисов вы пользовались за последний месяц. На сайтах, которые ведут несколько лет, обычно находится два-три мёртвых пикселя от давно закрытых кампаний.
То, что нужно, можно грузить отложенно: карта подключается по клику на заглушку, чат — через несколько секунд после загрузки страницы или при первой прокрутке, а не одновременно с содержимым.
Причина №3: сервер и кэширование
Если сервер отвечает медленно, никакая фронтенд-оптимизация не спасёт. Ориентир для времени ответа — до 600 мс; всё, что выше секунды, требует разбирательства. Для сайтов на популярных CMS это чаще всего вопрос настройки, а не переезда на дорогой хостинг.
- Включить кэширование страниц — на WordPress это плагин, на Битриксе штатный композит
- Включить сжатие ответа (gzip или brotli) на уровне сервера
- Проверить, не тормозит ли база: тяжёлые запросы в каталоге с фильтрами — частая причина
- Отдавать статику с длинным сроком кэширования в браузере
- Убедиться, что сайт не делает лишних редиректов на каждом запросе
Что учитывать при выборе площадки — в материале про хостинг и домен.
Причина №4: шрифты
Недооценённый пункт. Шрифт, подключённый с внешнего сервиса, добавляет обращение к чужому домену, а без параметра отображения текст до его загрузки просто невидим — человек смотрит на пустой блок. Решение: хостить шрифты у себя, подключать только используемые начертания и включать показ запасным шрифтом на время загрузки.
Порядок работ, который даёт результат быстрее
| Шаг | Что делаем | Типовой выигрыш |
|---|---|---|
| 1 | Сжать и правильно подать картинки первого экрана | LCP минус 1–2 с |
| 2 | Убрать неиспользуемые виджеты, остальные отложить | INP заметно лучше, минус 0,3–1 с |
| 3 | Включить кэш и сжатие на сервере | TTFB кратно ниже |
| 4 | Задать размеры всем медиаэлементам и рекламным блокам | CLS почти до нуля |
| 5 | Самохостинг шрифтов, показ запасным на время загрузки | Текст виден сразу |
| 6 | Убрать неиспользуемые стили и скрипты | Десятые доли секунды |
Как измерять правильно
Тестируйте мобильную версию и на медленном соединении — именно так сайт видит большинство посетителей. Лабораторные замеры (PageSpeed Insights, Lighthouse) удобны для поиска причин, но решает не они, а полевые данные реальных пользователей: их показывают Search Console и отчёт по скорости в Яндекс Метрике.
Расхождение между лабораторией и полем — нормально. Если в лаборатории «зелёно», а в поле «плохо», значит у ваших посетителей устройства и сети хуже тестового стенда, и ориентироваться надо на поле.
Сколько скорость стоит в деньгах
Влияние на позиции есть, но оно не решающее: медленная страница с лучшим ответом на запрос обгонит быструю пустышку. А вот на конверсию скорость влияет напрямую и измеримо — часть посетителей уходит, не дождавшись загрузки, и на мобильном трафике эта часть больше. Именно поэтому ускорение окупается даже там, где SEO не приоритет.
Что сделать сегодня
Откройте главную страницу на телефоне с мобильным интернетом и засеките, через сколько секунд вы видите заголовок и кнопку. Если больше трёх — начните с картинки первого экрана: в большинстве случаев это одна правка, которая сокращает время загрузки вдвое.
Частые вопросы
Насколько скорость влияет на позиции?
Скорость — один из факторов, но не решающий: медленная страница с лучшим ответом на запрос обгонит быструю пустышку. Зато скорость сильно влияет на конверсию — часть посетителей уходит, не дождавшись загрузки, и это потеря денег независимо от позиций.
Какая скорость считается нормальной?
Ориентиры Core Web Vitals: основной контент виден за 2,5 секунды (LCP), вёрстка почти не смещается (CLS до 0,1), отклик на нажатие до 200 мс (INP). Время ответа сервера — до 600 мс. Проверять нужно на мобильном интернете, а не на офисном Wi-Fi.
Что даёт наибольший эффект при оптимизации?
В большинстве случаев — изображения: правильный формат, размер и отложенная загрузка. Дальше идут лишние скрипты сторонних сервисов и отсутствие кэширования. Эти три пункта закрывают основную часть проблем на типовом сайте.
Почему PageSpeed показывает 90, а сайт всё равно медленный?
Потому что это лабораторный замер на условном устройстве и канале. Реальные посетители заходят с разных телефонов и сетей, и их данные показывают Search Console и Метрика. При расхождении верить надо полевым данным.
Что такое CLS и почему он важен, если сайт грузится быстро?
CLS измеряет смещение вёрстки во время загрузки. Формально страница может открыться быстро, но если в момент нажатия подгружается баннер и всё сдвигается, человек попадает не туда, куда целился. Лечится заданием ширины и высоты всем картинкам, видео и рекламным блокам.
Поможет ли переезд на более дорогой хостинг?
Только если проблема действительно в сервере — то есть время ответа стабильно выше секунды при простой странице. Гораздо чаще дело в неоптимизированных картинках, десятке сторонних скриптов и выключенном кэше, и тогда переезд не изменит ничего, кроме счёта.
