Как проверить скорость сайта и улучшить показатели Core Web Vitals?

• SEO
• Гайды & How-to

• 
  Редакторка блогу Webpromo
  Олена Гайдак

Скорость сайта — это основа, без которой все остальные маркетинговые усилия просто не сработают. Пользователь не готов ждать, пока страница загрузится, если это занимает больше пары секунд. Низкая скорость также влияет на ранжирование — Google регулярно оценивает продуктивность веб-страницы по набору показателей Core Web Vitals.

В статье рассмотрим:

• Что такое Core Web Vitals?
• Как проверить скорость загрузки сайта?
• Какими сервисами воспользоваться?
• Что сделать, чтобы улучшить результаты?

Что такое Core Web Vitals?

Core Web Vitals — это набор метрик Google, которые оценивают скорость работы и производительность страницы с учётом возможных действий пользователя на ней: как быстро она загружается и реагирует на действия, как отображаются элементы. Показатели используются алгоритмами Google для ранжирования веб-сайтов, об этом прямо указано в его официальной документации.

Однако получение хороших результатов по Core Web Vitals в Search Console не гарантирует, что ваши веб-страницы будут ранжироваться в топе поисковых результатов Google. Быстрая загрузка необходима для улучшения пользовательского опыта на сайте в целом, а не только для SEO.

Метрики Core Web Vitals

1. INP (Interaction to Next Paint) — время отклика веб-страницы на определённое действие пользователя (клик, тап, нажатие клавиши). INP фиксирует, через какой промежуток времени браузер отображает результаты этих изменений на экране пользователя. Эта метрика заменила устаревшую FID и оценивает задержку в течение всего времени пребывания на странице, а не только при первом взаимодействии. Нормой считается до 200 мс. Сегодня INP — самый важный показатель Core Web Vitals.
2. LCP (Largest Contentful Paint) — время, за которое на экране появляется самый большой видимый элемент страницы (главное изображение, баннер или блок текста). Хороший показатель — до 2,5 секунды.
3. CLS (Cumulative Layout Shift) — стабильность верстки, то есть насколько сильно «прыгают» элементы во время загрузки страницы (например, когда текст смещается из-за изображения, загрузившегося с задержкой). Хороший показатель — до 0,1.

Если все три метрики находятся в «зеленой» зоне, Google считает страницу удобной для пользователя. Если хотя бы одна выходит за пределы нормы — это сигнал о том, что на сайте есть технические проблемы, которые стоит исправить.

Как измерить скорость загрузки сайта: лабораторные и полевые данные

Существует два типа данных, которые используют сервисы анализа:

• Лабораторные данные (Lab Data) — результаты, полученные в контролируемой среде при симуляции определённого устройства и скорости соединения. Такие данные предоставляет, например, Lighthouse. Они удобны для диагностики конкретных проблем и тестирования страниц, которые ещё не имеют реального трафика, а также помогают найти и устранить конкретную техническую причину
• Полевые данные (Field Data / CrUX) — реальные показатели, собранные на устройствах реальных пользователей через Chrome User Experience Report (CrUX). Именно эти данные Google использует при ранжировании, поскольку они отражают фактический опыт посетителей, а не тестовую среду. Они показывают, действительно ли улучшение ощутили реальные пользователи.

Почему мобильная скорость сайта важнее десктопной

Показатели скорости на мобильных устройствах и на десктопе часто различаются. Смартфоны могут иметь менее мощный процессор по сравнению с компьютерами, а мобильный интернет, даже 4G или 5G, редко обеспечивает такую же стабильную скорость соединения, как Wi-Fi или кабельный Ethernet. Поэтому сайт, который на десктопе загружается за 1,5 секунды, на телефоне может показывать LCP в 3–4 секунды.

Google с 2021 года полностью перешел mobile-first индексацию — для ранжирования использует именно мобильную версию сайта. Если её скорость низкая, это влияет на позиции в поиске даже тех пользователей, которые заходят с компьютера.

Почему мобильная версия работает медленнее:

• Более тяжелые изображения и шрифты, которые не адаптированы под меньший экран, а также более медленное соединение.
• Избыток JavaScript, который мобильный процессор обрабатывает дольше.
• Сторонние скрипты (реклама, виджеты, аналитика), которые особенно сильно «проседают» именно в мобильных сетях.
• Отсутствие адаптивных изображений (srcset), из-за чего телефон загружает ту же самую тяжелую картинку, что и настольный компьютер.

Сервисы для проверки скорости сайта

PageSpeed Insights: что это за сервис?

Это бесплатный инструмент от Google, который позволяет проверить скорость загрузки страницы — как настольной, так и мобильной версии, показывает значения LCP, INP и CLS, а также дает конкретные рекомендации по улучшению — например, сжать изображения или сократить время отклика сервера.

Регистрация на сервисе не требуется — достаточно ввести URL-адрес страницы и нажать «Анализировать». Через несколько секунд инструмент выдаст общую оценку (от 0 до 100) и подробный перечень проблем с пояснениями и рекомендациями.

Помимо основных метрик, здесь можно увидеть дополнительные параметры, среди которых, например, доступность для ИИ-агентов.

Google Search Console

Инструмент Google для контроля основных характеристик сайта после подтверждения прав на него.

В разделе «Основные показатели взаимодействия с пользователем» (Core Web Vitals) отображаются реальные данные пользователей (CrUX) на основе показателей за последние 28 дней, отдельно для мобильных устройств и ПК.

Отчет группирует страницы по URL-шаблонам и статусу (хорошо, требует улучшения, плохо), что удобно для масштабной диагностики, а не анализа одной страницы.

GTmetrix

Сервис, сочетающий данные Lighthouse с собственной аналитикой и наглядными графиками waterfall (последовательность загрузки всех ресурсов страницы). Позволяет выбрать локацию тестового сервера и тип устройства, а также сохраняет историю проверок, что удобно для отслеживания динамики после внесенных изменений.

В бесплатной версии доступен ограниченный функционал, который можно расширить с помощью регистрации.

Сервис отслеживает изменения производительности во времени, может отправлять уведомления, если показатели достигли критических значений, анализировать скорость на разных устройствах и в разных странах. Удобно для тех, кто работает на международных рынках.

WebPageTest

Один из самых подробных инструментов для технического анализа. Позволяет тестировать сайт из разных точек мира, с разных браузеров и при разных скоростях соединения, а также сравнивать несколько URL-адресов между собой. Подходит для разработчиков и SEO-специалистов, которые хотят глубоко разобраться в причинах медленной загрузки.

Помимо базовых функций здесь есть:

• Waterfall (Водопад) — графическое отображение последовательности и продолжительности загрузки каждого файла на конкретной странице.
• Режим Filmstrip — серия скриншотов в процессе загрузки.

Инструменты помогают зафиксировать, что именно и на какой секунде видит пользователь, а также найти файлы, которые замедляют работу сайта.

Платный тариф позволяет «виртуально» провести оптимизацию, чтобы узнать, как новые изменения повлияют на сайт.

Lighthouse у Chrome DevTools

Если нужно быстро проверить скорость загрузки сайта, не выходя из браузера, воспользуйтесь встроенным инструментом Chrome DevTools. Чтобы воспользоваться им, откройте нужную страницу и нажмите F12 (или щелкните правой кнопкой мыши → «Просмотреть код»). После этого откроется вкладка Lighthouse с возможностью запуска анализа.

Инструмент оценивает качество сайта по сто-балльной шкале, которая включает до 5 категорий и содержит советы по исправлению ошибок.  Удобно тем, что не требует перехода на сторонние сайты и дает мгновенный результат прямо в браузере.

Pingdom Tools

Программа сочетает бесплатную базовую проверку и множество платных функций для разработчиков, которые позволяют всесторонне оценить веб-сайт. Инструменты сервиса делятся на две категории:

• синтетический мониторинг (роботы-симуляторы);
• анализ действий реальных пользователей.

В бесплатной версии можно ввести адрес сайта, выбрать регион тестирования (например, Европа или США) и получить отчет о скорости загрузки страницы с точностью до миллисекунд. Waterfall Analysis показывает время загрузки каждого отдельного элемента (изображения, скрипта, шрифта), что позволяет найти элемент, замедляющий работу сайта.

Среди платных функций:

• Мониторинг доступности — проверка сайта из локаций по всему миру;
• Мониторинг транзакций — алгоритм имитирует действия пользователя на вашем сайте (вход в личный кабинет, поиск товара, добавление в корзину и оплата). Это позволяет мгновенно отследить любой сбой.

Как выбрать сервис для проверки скорости сайта

Каждый из рассмотренных инструментов решает несколько разные задачи, поэтому выбор зависит от того, что именно вам нужно:

• Тип данных. Если нужны реальные данные пользователей для SEO и ранжирования — ориентируйтесь на Google Search Console (CrUX). Если нужно протестировать страницу, у которой ещё нет трафика, или локализовать конкретную техническую проблему — используйте лабораторные данные (PageSpeed Insights, Lighthouse, GTmetrix, WebPageTest).
• Скорость проверки vs глубина анализа. Для быстрого одноразового чек-апа достаточно PageSpeed Insights или Lighthouse — они не требуют регистрации и дают результат за секунды. Если нужна подробная диагностика с waterfall-анализом, filmstrip и тестированием из разных локаций — выбирайте WebPageTest или GTmetrix.
• Регулярный мониторинг. Если важно отслеживать динамику показателей во времени и получать уведомления о критических изменениях — подойдут GTmetrix и Pingdom Tools с функциями мониторинга.
• Бюджет. Бесплатных возможностей PageSpeed Insights, Google Search Console и Lighthouse обычно достаточно для базового аудита. Платные тарифы GTmetrix, WebPageTest и Pingdom имеют смысл, если речь идет о постоянном мониторинге крупного сайта или работе в нескольких регионах.
• Кто будет пользоваться. Маркетологам и владельцам бизнеса удобнее работать с PageSpeed Insights и Search Console — там представлены простые отчеты с рекомендациями. Разработчикам и SEO-специалистам, которые хотят разобраться в первопричинах, лучше подойдет WebPageTest с его техническими деталями.

Оптимальный подход — комбинировать несколько инструментов: полевые данные из Search Console для понимания реального опыта пользователей и лабораторные данные из PageSpeed Insights или WebPageTest для точечной диагностики и устранения проблем.

Чек-лист для улучшения Core Web Vitals

Когда проблемные места определены, можно переходить к конкретным шагам по оптимизации:

• Сжимайте изображения. Уменьшайте размер файлов и используйте современные форматы WebP или AVIF. Для изображений, которые пользователь увидит не сразу, включите отложенную загрузку (lazy loading) — они будут загружаться только тогда, когда это необходимо.
• Минимизируйте CSS и JavaScript. Удаляйте неиспользуемый код, объединяйте файлы по мере необходимости и сжимайте их, чтобы уменьшить объем данных, которые загружает браузер. Критический CSS для содержимого первого экрана можно встроить непосредственно в HTML, чтобы браузер мог быстрее отобразить страницу.
• Улучшайте загрузку ресурсов. Скрипты и стили, которые не нужны для отображения первого экрана, не должны блокировать загрузку страницы. Для JavaScript используйте defer (откладывает выполнение до завершения парсинга HTML) или async (загружает скрипт параллельно и выполняет его сразу после загрузки). Выполнение второстепенных скриптов по возможности откладывайте до того момента, когда основной контент уже отображен.
• Настройте кэширование и CDN. Кэширование сохраняет копии ресурсов в браузере или на сервере, поэтому при повторной загрузке их не нужно загружать заново. CDN (сеть доставки контента) распределяет статические файлы между серверами в разных регионах и предоставляет их с сервера, расположенного ближе к пользователю, что может сократить время отклика.
• Оптимизируйте загрузку шрифтов. Подключайте только те шрифты и их варианты, которые используются на сайте. По возможности храните шрифты на собственном сервере, чтобы уменьшить количество внешних запросов. Используйте font-display: swap, чтобы текст отображался сразу, не дожидаясь загрузки шрифта.
• Резервируйте место для динамического контента. Заранее задавайте размеры для баннеров, рекламных блоков и других элементов, которые загружаются с задержкой. Это помогает избежать смещений текста, кнопок и других элементов страницы во время загрузки контента.
• Ускорьте время отклика сервера (TTFB). Проверьте время отклика сервера и, при необходимости, оптимизируйте хостинг, серверные запросы и работу базы данных. Используйте Gzip или Brotli для сжатия данных и настройте серверное кэширование, чтобы браузер быстрее получал нужные ресурсы.
• Ограничьте количество сторонних скриптов. Виджеты, рекламные теги, системы аналитики и другие сторонние скрипты могут увеличивать количество сетевых запросов и время загрузки страницы. Оставляйте только необходимые и, по возможности, загружайте второстепенные скрипты после основного контента.
• Регулярно проверяйте показатели. Не ограничивайтесь однократным тестированием скорости. Повторяйте проверку после значительных изменений на сайте — обновления дизайна, добавления новых блоков, смены хостинга или других технических изменений, которые могут повлиять на скорость.