Как проверить скорость сайта: Lighthouse и Core Web Vitals
Материал подготовлен редакцией Techologi.ru.
Сайт может казаться быстрым на компьютере и тормозить на телефоне. Чтобы понять причину, мало посмотреть на один балл: нужно отдельно проверить лабораторный тест и данные реальных посетителей. Lighthouse помогает найти технические узкие места, а PageSpeed Insights показывает отчёт Lighthouse и, если данных достаточно, полевые показатели Chrome UX Report.
Ниже разберём, как провести проверку, что означают LCP, INP и CLS и с чего начинать исправления.
СУТЬ ЗА 30 СЕКУНД
- Lighthouse запускает лабораторную проверку страницы в заданных условиях.
- PageSpeed Insights дополняет такой тест полевыми данными CrUX, если они доступны.
- Core Web Vitals оценивают загрузку, отзывчивость и визуальную стабильность.
- Хорошие ориентиры: LCP до 2,5 секунды, INP до 200 мс, CLS до 0,1.
- Сначала найдите причину проблемы, затем повторите тест при похожих условиях.
Что измеряют Core Web Vitals
Для оценки пользовательского опыта Google использует три основные метрики. Пороговые значения ниже применяются к 75-му процентилю просмотров, то есть учитывают опыт большинства посетителей, а не только самый удачный запуск.
| Метрика | Что показывает | Хороший результат |
|---|---|---|
| LCP | Скорость появления главного видимого содержимого страницы | до 2,5 секунды |
| INP | Отзывчивость страницы на нажатия, ввод и другие действия | до 200 мс |
| CLS | Насколько неожиданно смещаются элементы во время загрузки | до 0,1 |
Lighthouse и PageSpeed Insights: в чём разница
Эти инструменты связаны, но отвечают на разные вопросы. Lighthouse помогает воспроизвести загрузку и найти возможные причины проблем. PageSpeed Insights удобен для проверки публичной страницы и просмотра полевых данных, если для неё накоплена статистика Chrome UX Report.
| Инструмент | Сильная сторона | Ограничение |
|---|---|---|
| Lighthouse в Chrome | Удобен для повторных тестов, локальных сборок и технической диагностики | Лабораторная оценка не описывает опыт всех реальных посетителей |
| PageSpeed Insights | Показывает полевые данные CrUX вместе с отчётом Lighthouse, когда данные доступны | Для отдельных URL или небольших сайтов полевых данных может не быть |
Как проверить сайт через PageSpeed Insights
- Откройте PageSpeed Insights и вставьте адрес страницы целиком.
- Запустите проверку и отдельно посмотрите мобильный и настольный результаты.
- Если показаны полевые данные, сначала изучите LCP, INP и CLS для реальных пользователей.
- Затем откройте лабораторный отчёт Lighthouse и проверьте разделы с возможностями и диагностикой.
- Запишите адрес, дату, режим устройства и значения метрик, чтобы сравнить результат после исправлений.
Полевые значения собираются у реальных пользователей за период наблюдений, а Lighthouse моделирует загрузку в заданных условиях. Поэтому результаты могут отличаться. Если полевых данных нет, это не доказывает, что страница быстрая или медленная: используйте лабораторные измерения и собственные проверки.
Как запустить Lighthouse в Chrome
- Откройте нужную страницу в Chrome и запустите DevTools: F12 в Windows или Linux, Option + Command + I на macOS.
- Перейдите во вкладку Lighthouse. Если её не видно, откройте меню дополнительных панелей DevTools.
- Выберите профиль устройства и категорию Performance.
- Нажмите кнопку запуска анализа и дождитесь отчёта.
- Проверьте не только итоговый балл, но и список диагностик. Он подсказывает, какие ресурсы и участки страницы стоит исследовать.
Lighthouse можно запускать для локальной сборки и страниц, недоступных публично. Для проверки обычного сайта PageSpeed Insights быстрее показывает рядом лабораторные и полевые сведения.
Как понять, что именно замедляет сайт
- Высокий LCP: проверьте время ответа сервера, размер главного изображения, формат файла и ресурсы, блокирующие отображение. Не откладывайте загрузку картинки, которая видна сразу после открытия страницы.
- Высокий INP: найдите долгие задачи JavaScript, тяжёлые обработчики и сторонние виджеты. Избыточная работа основного потока мешает странице быстро отвечать на действия.
- Высокий CLS: задайте размеры изображениям, баннерам и встроенным блокам. Заранее оставляйте место для рекламы и элементов, которые подгружаются позже.
Не меняйте всё сразу. Исправьте подтверждённую причину, повторите тест при сопоставимых условиях и проверьте страницу на телефоне вручную. Так будет понятнее, какое изменение помогло.
Почему не нужно гнаться за 100 баллами
Оценка Lighthouse зависит от условий запуска и конкретной загрузки. Она полезна для поиска технических проблем, но сама по себе не гарантирует быстрый опыт у каждого посетителя. Смотрите на полевые Core Web Vitals, диагностику и реальные сценарии использования вместе.
Короткий чек-лист
- Проверьте важные страницы на телефоне и компьютере.
- Разделяйте лабораторные результаты и полевые данные.
- Записывайте LCP, INP и CLS вместе с датой проверки.
- Исправляйте конкретные причины, а не только итоговый балл.
- Повторите измерения и проверьте сайт вручную после изменений.
Мнение редакции
Lighthouse лучше всего воспринимать как диагностический прибор, а не экзамен, который нужно сдать на сто баллов. Он помогает найти направление для работы, но реальные данные посетителей показывают, стало ли удобнее большинству пользователей. Для надёжной оценки нужны оба взгляда.
Если страница важна для бизнеса или редакции, проверяйте её регулярно и после крупных изменений. Даже небольшое исправление главного изображения или тяжёлого сценария JavaScript может оказаться полезнее, чем погоня за косметическими пунктами отчёта.
Источники: Google web.dev: Web Vitals; пороги Core Web Vitals; Google: как читать PageSpeed Insights; Chrome for Developers: Lighthouse.
Подписывайтесь, чтобы не пропустить свежие материалы!