Скорость сайта и Core Web Vitals: как проверить и ускорить сайт
· 4 мин чтения · Команда maeTtI
Коротко
- Core Web Vitals — три метрики Google о скорости и удобстве страницы: LCP (загрузка), INP (отклик) и CLS (стабильность вёрстки).
- Хорошие значения: LCP до 2,5 секунды, INP до 200 миллисекунд, CLS до 0,1 — для 75% посещений страницы.
- Проверить сайт можно бесплатно в PageSpeed Insights, отчёте Core Web Vitals в Google Search Console и в инструментах браузера.
- Чаще всего сайт тормозят тяжёлые изображения, сторонние скрипты, внешние шрифты и медленный сервер.
- Быстрый сайт удобнее посетителям, лучше конвертирует рекламу и получает преимущество в поиске.
Посетитель не ждёт: если первый экран грузится долго, он возвращается в поиск и открывает сайт конкурента. Поисковые системы это учитывают, поэтому скорость влияет и на продажи, и на позиции. Разберёмся, как измерить скорость по-честному и что делать, если сайт медленный.
Что такое Core Web Vitals
Core Web Vitals — набор метрик, которыми Google оценивает, насколько быстро и удобно работает страница для реальных посетителей.
| Метрика | Что измеряет | Хорошо | Плохо |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Когда появился самый крупный элемент первого экрана: картинка или блок текста | до 2,5 с | больше 4 с |
| INP (Interaction to Next Paint) | Как быстро страница реагирует на нажатия, клики и ввод | до 200 мс | больше 500 мс |
| CLS (Cumulative Layout Shift) | Насколько «прыгает» вёрстка во время загрузки | до 0,1 | больше 0,25 |
Оценка считается по 75-му процентилю: страница проходит проверку, если хорошие значения получают как минимум три четверти посещений. В 2024 году INP заменил прежнюю метрику FID, которая учитывала только первое действие пользователя.
Как проверить скорость сайта
- PageSpeed Insights (pagespeed.web.dev) — показывает и реальные данные посетителей из Chrome, если трафика достаточно, и лабораторный тест с конкретными рекомендациями.
- Google Search Console — отчёт «Основные интернет-показатели» группирует страницы сайта по статусу: хорошие, требующие улучшения и медленные.
- Инструменты разработчика в браузере — вкладки Lighthouse и Performance помогают найти, что именно тормозит.
- Яндекс Метрика — показывает время загрузки страниц у реальных посетителей.
Лабораторный тест полезен для поиска проблем, но ориентироваться нужно на данные реальных пользователей: у них разные телефоны и мобильный интернет.
Что замедляет сайт и как это исправить
Изображения
Самая частая причина медленного LCP — огромные картинки на первом экране.
- Сжимайте изображения и используйте современные форматы WebP или AVIF.
- Готовьте несколько размеров: телефону не нужна картинка шириной 2500 пикселей.
- Главное изображение первого экрана загружайте с высоким приоритетом, а всё, что ниже, — лениво, по мере прокрутки.
- Всегда задавайте размеры изображений, чтобы под них заранее резервировалось место — это убирает скачки вёрстки.
Шрифты
- Подключайте шрифты со своего сервера, а не с внешних CDN: это быстрее и заодно решает вопрос с передачей IP посетителей за границу, о котором мы писали в статье «Сайт и 152-ФЗ».
- Загружайте только нужные начертания и наборы символов, например латиницу и кириллицу.
- Используйте font-display: swap, чтобы текст был виден сразу, а не после загрузки шрифта.
Скрипты
Для INP главный враг — тяжёлый JavaScript, который занимает браузер и не даёт ему отвечать на действия пользователя.
- Уберите неиспользуемые скрипты и виджеты: чаты, пиксели, счётчики, которые никто не смотрит.
- Сторонние скрипты загружайте отложенно, после основного контента.
- Разбивайте код на части, чтобы каждая страница загружала только своё.
- Тяжёлые вычисления и анимации переносите с главного потока — например, на видеокарту через CSS-трансформации.
Сервер и доставка
- Статическая генерация. Если страницы можно собрать заранее, сервер отдаёт готовый HTML мгновенно — так работает и этот сайт.
- Кэширование. Файлы, которые не меняются, браузер должен хранить у себя долго.
- Сжатие текстовых файлов и протокол HTTP/2 или HTTP/3.
- Близкий к аудитории сервер или CDN — для российской аудитории лучше сервер в России или рядом.
Стабильность вёрстки
Чтобы CLS был низким, резервируйте место под всё, что появляется позже: изображения, баннеры, встраиваемые видео, cookie-баннер. Не вставляйте новые блоки над уже видимым контентом.
Пример: 100 из 100
Для вокальной академии Académie des Talents из Швейцарии мы сделали мультиязычный сайт с записью на диагностику и добились 100/100 по Core Web Vitals. Такой результат не требует магии — только последовательно применённых мер из этой статьи: лёгкие изображения, аккуратная работа со шрифтами и скриптами, быстрая отдача страниц. Кейс — на странице кейсов.
Когда ускорять, а когда переделывать
Если сайт в целом устраивает, обычно достаточно технической оптимизации: сжать изображения, убрать лишние скрипты, настроить кэширование. Если же сайт построен на тяжёлой теме с десятками плагинов, иногда дешевле пересобрать его на современном стеке, чем бороться с каждым плагином по отдельности.
Ускорение и техническая оптимизация входят в наши работы с готовыми сайтами — подробнее на странице услуг.
Частые вопросы
Какие значения Core Web Vitals считаются хорошими?
LCP — до 2,5 секунды, INP — до 200 миллисекунд, CLS — до 0,1. Страница проходит оценку, если такие значения получают как минимум 75% посещений.
Как бесплатно проверить скорость сайта?
В PageSpeed Insights (pagespeed.web.dev), в отчёте «Основные интернет-показатели» Google Search Console, во вкладке Lighthouse инструментов разработчика браузера и в Яндекс Метрике.
Влияет ли скорость сайта на позиции в поиске?
Да. Google использует Core Web Vitals как один из сигналов ранжирования, а медленный сайт хуже удерживает посетителей, что отражается на поведенческих факторах и в Яндексе.
Что чаще всего замедляет сайт?
Тяжёлые изображения без сжатия, сторонние скрипты и виджеты, шрифты с внешних серверов и медленный хостинг.