Медленный сайт теряет посетителей ещё до того, как они увидят первый экран: человек с телефона ждёт пару секунд и уходит к конкуренту. Скорость входит и в сигналы, по которым Google оценивает удобство страницы. Проверить её можно бесплатно и за минуту — в Google PageSpeed Insights.
Что такое PageSpeed Insights
Это бесплатный сервис Google по адресу pagespeed.web.dev. Вы вводите адрес страницы и получаете отчёт из двух частей:
- Данные реальных пользователей — как страница работала у посетителей с Chrome за последние 28 дней. Это и есть Core Web Vitals, на которые смотрит Google.
- Лабораторные данные — разовая проверка инструментом Lighthouse на эмулированном телефоне с медленным интернетом. Отсюда балл 0–100 и список рекомендаций.
Как проверить скорость сайта
- Откройте pagespeed.web.dev и вставьте адрес страницы — не только главной: проверьте страницу услуги, карточку товара, статью.
- Начните с вкладки «Мобильный телефон»: Google оценивает сайт по мобильной версии.
- Посмотрите блок данных реальных пользователей: если оценка Core Web Vitals «Пройдена» — по мнению Google, всё в порядке.
- Ниже — балл производительности и метрики лабораторной проверки.
- Ещё ниже — «Диагностика» и рекомендации с оценкой, сколько можно выиграть. С них и начинайте исправления.
Что означают показатели
Largest Contentful Paint — когда появился самый крупный элемент первого экрана: обычно главная картинка или заголовок. Для посетителя это момент «страница загрузилась».
Хорошо — до 2,5 с, требует улучшения — до 4 с, плохо — больше 4 с (пороги Google).
Чаще всего мешают: тяжёлая картинка на первом экране, медленный ответ сервера, шрифты и стили, которые блокируют отрисовку.
Interaction to Next Paint — как быстро страница реагирует на нажатия: открыть меню, нажать кнопку, выбрать фильтр. С марта 2024 года заменил старый показатель FID.
Хорошо — до 200 мс, требует улучшения — до 500 мс, плохо — больше 500 мс.
Чаще всего мешают: тяжёлый JavaScript — виджеты чатов, сторонние счётчики, громоздкие слайдеры.
Cumulative Layout Shift — насколько «прыгает» страница при загрузке: хотели нажать кнопку, а она съехала из-за подгрузившегося баннера.
Хорошо — до 0,1, требует улучшения — до 0,25, плохо — больше 0,25.
Чаще всего мешают: картинки и рамки без заданных размеров, всплывающие плашки, шрифты, которые меняют размер текста после загрузки.
Балл производительности считает Lighthouse по лабораторной проверке. Вес метрик: Total Blocking Time — 30%, LCP — 25%, CLS — 25%, First Contentful Paint и Speed Index — по 10%.
90–100 — хорошо (зелёный), 50–89 — есть что улучшать (оранжевый), до 50 — плохо (красный).
Балл — подсказка разработчику, а не оценка Google: в поиске учитываются данные реальных посетителей.
Что исправить в первую очередь
Рекомендаций в отчёте много, но почти всегда помогают одни и те же пять вещей.
1. Картинки
Самая частая причина медленного LCP. Сохраняйте фото в WebP или AVIF, загружайте в том размере, в котором они показываются, а не 4000 пикселей для превью. Картинки ниже первого экрана — с отложенной загрузкой.
2. Лишние скрипты
Чат, три счётчика, пиксели соцсетей, виджет отзывов — каждый скрипт отнимает время у телефона. Оставьте то, чем пользуетесь, остальное подключайте после загрузки страницы или по нажатию. Так, например, видео YouTube лучше грузить только по кнопке воспроизведения.
3. Сервер и кеш
Если сервер долго отвечает, остальное не поможет. Нужны современная версия PHP, кеширование страниц и долгий срок хранения для картинок, стилей и скриптов в браузере.
4. Шрифты
Два-три начертания вместо десяти, загрузка с показом текста сразу — тогда текст не ждёт шрифт и не меняет размер после загрузки.
5. Сдвиги вёрстки
Задавайте размеры картинкам и рамкам видео, не вставляйте баннеры над уже загруженным текстом — и CLS будет близок к нулю.
Когда скорость упирается в платформу
Бывает, что картинки сжаты, лишнее убрано, а сайт всё равно медленный. Обычно причина в основе:
- тяжёлый шаблон WordPress с конструктором страниц и десятком плагинов;
- конструктор, где вы не управляете кодом и сервером;
- старый сайт, который годами обрастал доработками.
Тогда точечные правки дают немного, и выгоднее переделать сайт на современной основе. Наши сайты собираются на Laravel и Tailwind CSS: в коде нет лишнего, и скорость закладывается с первого дня. Как выбрать способ — в статье «Как создать сайт».
Частые вопросы
PageSpeed Insights бесплатный?
Да. Сервис Google бесплатный и без регистрации: откройте pagespeed.web.dev и вставьте адрес страницы.
Какой балл PageSpeed считается хорошим?
90–100 — хорошо, 50–89 — есть что улучшать, ниже 50 — плохо. Но для поиска важнее, «пройдены» ли Core Web Vitals по данным реальных пользователей.
Влияет ли скорость сайта на позиции в Google?
Да, Core Web Vitals входят в сигналы удобства страницы. Но это не главный фактор: страница, которая лучше отвечает на запрос, обойдёт более быструю. Скорость сильнее влияет на то, уйдёт посетитель или останется.
Почему на телефоне балл ниже, чем на компьютере?
Мобильная проверка имитирует телефон средней мощности и медленный мобильный интернет, поэтому балл почти всегда ниже. Ориентируйтесь на мобильный — Google оценивает сайт по нему.
Почему нет данных реальных пользователей?
Google показывает их, когда страницу посещает достаточно пользователей Chrome. У новых и небольших сайтов этих данных нет — смотрите лабораторные метрики и рекомендации.
