Медленный сайт теряет посетителей раньше, чем они увидят первый экран: человек нажал на объявление, подождал, вернулся к выдаче и выбрал соседа. Деньги за клик при этом списаны. Проверить скорость загрузки сайта можно бесплатно за пять минут, а вот правильно прочитать отчёт и понять, что исправлять первым, сложнее. Разбираем по шагам.

Чем проверить скорость загрузки сайта

  • PageSpeed Insights (pagespeed.web.dev) от Google. Главный бесплатный инструмент: показывает оценку по 100-балльной шкале, данные реальных посетителей за 28 дней, если они есть, и лабораторный замер со списком того, что тормозит.
  • Lighthouse в Chrome. Тот же движок, что у PageSpeed Insights, но запускается прямо в браузере: правая кнопка, «Просмотреть код», вкладка Lighthouse. Удобно, когда сайт ещё не открыт для всех или стоит на тестовом адресе.
  • Вкладка «Сеть» в инструментах разработчика. Показывает каждый загружаемый файл, его вес и время. Здесь хорошо видно, какая картинка весит три мегабайта и какой чужой скрипт грузится дольше всех.
  • WebPageTest. Подробные замеры с выбором города, браузера и скорости связи, раскадровка загрузки по кадрам.

Онлайн-сервисы проверки скорости загрузки сайта, которые выдают одну цифру «загрузилось за 1,2 с», полезны для быстрой прикидки, но причин не объясняют. Для работы берите PageSpeed Insights и инструменты разработчика.

Как проверять, чтобы цифрам можно было верить

  1. Смотрите сначала мобильную версию. Большая часть посетителей приходит с телефонов, а мобильный замер в PageSpeed Insights идёт с замедленным процессором и связью, поэтому проблемы видны ярче.
  2. Проверяйте несколько страниц. Главная часто быстрая, а тормозит карточка товара, каталог с фильтрами или посадочная страница под рекламу. Возьмите по одной странице каждого типа.
  3. Повторите замер два-три раза. Лабораторная оценка скачет на несколько пунктов от запуска к запуску. Ориентируйтесь на среднее, а не на один удачный результат.
  4. Отделяйте полевые данные от лабораторных. Верхний блок отчёта «Узнайте, что испытывают ваши реальные пользователи» показывает живую статистику Chrome. Именно её учитывает поиск. Нижняя оценка помогает искать причины.

Как читать отчёт: пять показателей

Google оценивает скорость по показателям Core Web Vitals. Зелёная зона у каждого своя:

  • LCP, отрисовка крупнейшего элемента: когда на экране появился главный блок, обычно картинка или заголовок первого экрана. Хорошо до 2,5 секунды.
  • INP, отклик на действие: сколько проходит от нажатия на кнопку до реакции страницы. Хорошо до 200 миллисекунд.
  • CLS, сдвиг макета: насколько прыгают блоки во время загрузки. Хорошо до 0,1. Если вы целились в кнопку, а попали в баннер, который вдруг подгрузился выше, это и есть плохой CLS.
  • FCP, первая отрисовка: когда на экране появилось хоть что-то.
  • TTFB, время ответа сервера: сколько браузер ждёт первый байт страницы. Если тут больше 0,8 секунды, начинать надо с сервера, а не с картинок.

Что тормозит чаще всего и что исправлять первым

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

  1. Тяжёлые изображения. Фото с камеры весом в несколько мегабайт, поставленное в блок шириной 400 пикселей. Переводите в WebP или AVIF, режьте под реальный размер показа, ставьте ленивую загрузку всему, что ниже первого экрана. Картинке первого экрана ленивую загрузку, наоборот, не ставьте: это прямой удар по LCP.
  2. Сторонние скрипты. Онлайн-чат, виджет обратного звонка, несколько счётчиков, кнопки соцсетей. Каждый тянет свои файлы с чужого сервера. Отключите то, чем не пользуетесь, а остальное грузите после первого экрана или после действия посетителя.
  3. Медленный ответ сервера. Нет кеша страниц, тяжёлые запросы к базе, перегруженный тариф хостинга. Если TTFB высокий, никакая оптимизация картинок его не спасёт.
  4. Блокирующие стили и скрипты. Браузер не рисует страницу, пока не скачает все подключённые в начале файлы. Критичные стили первого экрана подключают сразу, остальное откладывают.
  5. Шрифты. Пять начертаний с внешнего сервиса задерживают текст. Храните шрифты у себя, оставляйте только нужные начертания и кириллицу.
  6. Прыгающие блоки. Задавайте размеры картинкам, баннерам и встраиваемым видео заранее, чтобы место под них было зарезервировано до загрузки.

Быстрый чек-лист после правок

  • оценка на телефоне не ниже 80, полевые LCP, INP и CLS в зелёной зоне;
  • ни одной картинки тяжелее 300 килобайт на типовой странице;
  • чаты, виджеты и счётчики не мешают первому экрану;
  • шрифты и скрипты лежат на вашем сервере;
  • замер повторён через неделю: полевые данные обновляются не сразу.

Когда пора звать специалиста

Если картинки уже сжаты, лишние виджеты убраны, а оценка всё ещё жёлтая или красная, причина обычно в сервере, шаблоне или движке сайта. Тут нужна диагностика: замер на телефоне и компьютере, поиск конкретного узкого места, план правок по эффекту и внесение изменений на копии сайта, чтобы не сломать рабочую версию. Так устроено ускорение сайта у нас, с замерами до и после и отчётом понятным языком.

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

Замеры, диагностику и правки на копии сайта делаем в услуге «Ускорение сайта». Если страницы к тому же долго попадают в поиск, загляните в «Ускорение индексации».