Что на самом деле показывает оценка
Оценка PageSpeed — это сводка из нескольких замеров, а не отдельная метрика. Её считает Lighthouse: он открывает страницу на виртуальном слабом телефоне с медленным интернетом и смотрит, как быстро появляется содержимое и как долго страница не откликается на касания. Поэтому у сайта, который вам кажется быстрым на мощном ноутбуке, мобильная оценка может быть 50. А ваши клиенты нередко смотрят именно с такого телефона.
Общую цифру разумно использовать как сигнал тревоги, а работать нужно с конкретными замерами. Их главная пара — Total Blocking Time и Largest Contentful Paint.
С чего начать
Откройте PageSpeed Insights, вкладку «Мобильный». Найдите два числа. Total Blocking Time (TBT) показывает, сколько миллисекунд страница не может реагировать на ввод, пока браузер занят скриптами. Largest Contentful Paint (LCP) — момент, когда на экране появляется самый крупный блок, обычно заголовок или главная картинка. Остальные показатели чаще всего тянутся за этими двумя.
Ниже в отчёте есть раздел «Диагностика» с конкретными подсказками. Читать их стоит с осторожностью: часть советов даёт копеечный выигрыш, а настоящая причина может стоять в списке ниже. Мы сначала открыли вкладку «Производительность» в инструментах разработчика Chrome и посмотрели, чем занят основной поток.
Что тормозило у нас
Наш сайт устроен непросто: на главной стоит 3D-сцена с кубами и анимации листов. Мы ожидали, что виноваты они, и частично оказались правы. Но разбираться пришлось по очереди.
- Анимация на каждом кадре спрашивала у браузера размеры элементов. Браузер при этом пересчитывал раскладку всей страницы: секунда процессора уходила впустую.
- 3D-сцена на устройствах без видеокарты считалась программно: одна задача на 2,5 секунды. Таким устройствам теперь показываем готовую картинку.
- Тяжёлый шейдер собирался в основном потоке. Теперь браузер собирает его в фоне.
- Счётчик аналитики грузился вместе со страницей. Теперь он стартует после неё.
Результат
Блокировка потока упала с 980 до 90 миллисекунд, LCP с 5,1 до 2,9 секунды, общая оценка с 52 до 89. Дизайн и анимации остались прежними. Важный урок: оптимизация не обязательно означает «убрать красоту». Часто достаточно перестать делать лишнюю работу там, где пользователь её не видит.
Частые причины на других сайтах
Наш случай нетипичен, а вот список виновников на обычных сайтах услуг и магазинов довольно стабилен:
- Огромные картинки без сжатия и без размеров под экран. Фото с телефона в 6 мегабайт на главной странице встречается постоянно.
- Десятки скриптов: виджеты, чаты, пиксели рекламных систем. Каждый тянет свою долю и открывает отдельное соединение.
- Шрифты с внешних серверов без предзагрузки: текст то невидим, то прыгает.
- Конструктор, который грузит код всех блоков сразу, даже тех, что на странице не используются.
- Плагины WordPress, которые подключают свои стили и скрипты на каждой странице.
Как не обмануться при замере
Оценка PageSpeed меняется от запуска к запуску на 3–5 баллов: влияет загрузка серверов Google, состояние сети, даже время суток. Сравнивайте несколько замеров подряд и смотрите на среднее. Если вы поменяли что-то и оценка выросла на 2 балла, это может быть шум, а не результат.
Отдельный совет: проверяйте не только главную. Страница заявки, карточка товара и самая посещаемая статья нередко устроены тяжелее главной, и именно с них людям приходится оставлять заявку.
Что делать, если не знаете, с чего начать
- Сделайте три замера главной и запишите LCP и TBT.
- Откройте вкладку Network в браузере и отсортируйте запросы по размеру. Самые крупные файлы — первые кандидаты.
- Отключите на пробу скрипты сторонних сервисов и повторите замер. Разница покажет, кто самый прожорливый.
- Меняйте по одному пункту и замеряйте после каждого, иначе не поймёте, что именно помогло.
Оценка PageSpeed — ориентир, а не цель. Если сайт открывается за пару секунд и форма работает, лишние десять баллов ничего не добавят к заявкам.
Ускорение сайта — частая задача в нашей поддержке. Пришлите адрес, посмотрим, что тормозит, и скажем, сколько времени займёт исправление.