Скорость сайта: как читать PageSpeed и что чинить в первую очередь

Скорость сайта для владельца бизнеса сводится к одному вопросу: успевает ли человек с телефона увидеть главный экран и нажать кнопку, пока не ушёл. PageSpeed Insights (ПейджСпид) отвечает на него двумя способами: тремя метриками Core Web Vitals по реальным посетителям и баллом от 0 до 100 по лабораторному тесту. Балл нужен, чтобы найти причину. Оценка по реальным людям показывает, есть ли проблема у ваших клиентов. Ниже разбираю, как это читать и с каких правок начинать.

Что показывает PageSpeed Insights

По описанию PageSpeed Insights у Google, верхний блок отчёта это полевые данные из Chrome User Experience Report: как сайт открывался у реальных посетителей за предыдущие 28 дней. Нижний блок это лабораторный тест Lighthouse, одна загрузка в смоделированных условиях. Для мобильной версии это телефон среднего уровня в мобильной сети, для компьютерной эмулированный компьютер с проводным подключением.

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

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

Начинаю всегда с мобильной вкладки. У многих небольших компаний клиенты приходят в основном с телефонов, а у вашего сайта эту долю покажет та же Метрика.

Core Web Vitals: LCP, INP и CLS простыми словами

Пороги взяты из описания Core Web Vitals на web.dev и статей про LCP, INP и CLS. Считаются они по 75-му перцентилю: хорошо, если так страница открывается минимум у трёх посетителей из четырёх, отдельно для телефонов и компьютеров.

Метрика	Что измеряет	Хорошо	Плохо
LCP	Когда отрисовался самый крупный элемент первого экрана: фото, баннер, блок текста	до 2,5 с	больше 4 с
INP	Как быстро страница откликается на нажатия, касания и клавиши	до 200 мс	больше 500 мс
CLS	Насколько прыгает вёрстка, пока страница грузится	до 0,1	больше 0,25

Всё между «хорошо» и «плохо» считается зоной, где нужно улучшать. По объявлению команды Chrome, INP заменил FID 12 марта 2024 года. Если в присланном вам отчёте ещё фигурирует FID, он устарел.

Оценка Core Web Vitals пройдена, когда все три метрики зелёные. Если данных по INP не хватает, достаточно зелёных LCP и CLS.

Что значат баллы от 0 до 100

Балл считает Lighthouse. По документации Lighthouse, от 90 до 100 это хорошо (зелёный), от 50 до 89 нужно улучшать (оранжевый), от 0 до 49 плохо (красный).

Балл складывается из пяти метрик с весами. Больше всего весит Total Blocking Time, 30%: сколько времени страница занята скриптами и не реагирует на действия. По 25% у LCP и CLS, по 10% у First Contentful Paint и Speed Index. Поэтому сайт с десятком виджетов получает низкий балл, даже если картинки на нём лёгкие.

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

Как на скорость смотрит Яндекс

Своего балла у Яндекса нет, но в Вебмастере есть конкретная проверка. По справке Вебмастера, в «Диагностике сайта» есть ошибка «Долгий ответ сервера». Цитата: «Если некоторые страницы загружаются больше 3 секунд, робот фиксирует это как ошибку». В сообщении будет список страниц. Если сервер уже отвечает быстро, после следующего обхода сообщение пропадёт.

В статье Яндекса о скорости загрузки перечислены рекомендации: меньше запросов, асинхронная загрузка всего, что не нужно для первого экрана, сжатие CSS, JavaScript и HTML, CDN, кэширование и Gzip, сжатие картинок и их отложенная загрузка ниже первого экрана, меньше редиректов. Где в Вебмастере искать диагностику, я разобрал в статье про Яндекс Вебмастер для владельца бизнеса.

Почему сайт грузится медленно: что чинить первым

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

Тяжёлая картинка на первом экране

Чаще всего LCP у сайта малого бизнеса это большое фото в шапке, загруженное с фотоаппарата как есть. Уменьшаю его до реального размера на экране, перевожу в WebP или AVIF и отдаю телефону отдельную версию. По разбору LCP на web.dev, смена формата сокращает загрузку самой картинки, но помогает, только если тормозит именно она. Поэтому сначала смотрю, на что уходит время.

Ленивая загрузка не там

Картинки ниже первого экрана можно грузить по мере прокрутки через атрибут loading="lazy". В статье web.dev о ленивой загрузке прямо сказано не делать так с картинками, видимыми сразу, особенно с элементом LCP. Часто встречаю обратное: плагин включил ленивую загрузку для всего, и главное фото ждёт очереди.

Лишние скрипты и виджеты

Онлайн-чат, виджет звонка, квиз, два счётчика, карта, всплывающее окно. Каждый тянет свои скрипты, отсюда Total Blocking Time и плохой INP. Виджеты, которые меняют размер после загрузки, ещё и сдвигают вёрстку. Неиспользуемое убираю, остальное подключаю после загрузки страницы или по клику.

Шрифты

Три начертания с внешнего сервера плюс иконочный шрифт ради пяти иконок. По web.dev, шрифт, который отрисовывается крупнее или мельче запасного, сдвигает текст и портит CLS. Оставляю два начертания со своего сервера, иконки делаю SVG.

Дешёвый хостинг и долгий ответ сервера

Время до первого байта входит в LCP первой частью, и web.dev пишет, что при высоком TTFB уложиться в 2,5 секунды трудно или невозможно. Если Вебмастер показывает «Долгий ответ сервера», дело в сервере, движке или базе. Варианты: кэш страниц, обновление движка, тариф мощнее. Разницу между хостингом и VPS я разобрал в статье VPS или обычный хостинг.

Нет кэша и CDN

Без кэширования браузер при каждом переходе заново качает картинки, стили и скрипты. CDN нужен, когда посетители из разных регионов, а сервер далеко от них.

На конструкторе часть этих правок недоступна: скрипты и сервер платформы вы не контролируете. Когда скорость упирается в это, читайте про варианты в статье уйти с Тильды и Wix на свой сайт.

Чего не делать

• Гоняться за 100 баллами. Переход с 92 на 100 часто требует убрать аналитику или нужный виджет. Цель: зелёные Core Web Vitals и быстрый первый экран на телефоне.
• Ставить пять плагинов ускорения. Они конфликтуют, ломают формы и корзину, и потом непонятно, что сделал каждый.
• Судить по одному прогону сразу после правки. Лабораторный балл меняется сразу, полевые данные догоняют неделями.
• Удалять Метрику ради баллов. Без неё вы не узнаете, выросли ли заявки. Счётчик можно подключить так, чтобы он не мешал первому экрану.

Как я это делаю

1. Замер до. Главная и две-три страницы, с которых приходят заявки, в PageSpeed на мобильной вкладке, несколько прогонов. Отчёты сохраняю. Смотрю полевые данные и диагностику в Вебмастере.
2. Разбор первого экрана. В инструментах разработчика смотрю, что грузится до главного элемента: вес, запросы, внешние скрипты, ответ сервера.
3. Список по влиянию. Каждую причину оцениваю по двум вопросам: насколько она тормозит первый экран и сколько стоит исправление. Наверх идёт то, что даёт много за мало. Список вы получаете до начала работ.
4. Правки по одной. После каждой проверяю формы, корзину, онлайн-запись и цели в Метрике.
5. Замер после. Те же страницы, та же вкладка, столько же прогонов, отчёты рядом. Через месяц смотрю полевые данные.

Скорость входит и в технический аудит: там же ищу битые ссылки, ошибки 404 и проблемы с индексированием.

Сколько стоит ускорение сайта

Услуга	Цена	Срок
Технический аудит: скорость, Вебмастер, индексация, ошибки сервера, список правок	от 50 000 ₽	от 1 недели
UX-аудит с замерами: мобильная версия и путь до заявки	от 30 000 ₽	от 3 дней
Перенос сайта с конструктора	от 30 000 ₽	от 5 дней
Разовые правки: картинки, скрипты, кэш, шрифты	от 3 000 ₽/час	по объёму
Поддержка: исправления, обновления, мониторинг	от 20 000 ₽/мес	ежемесячно

Если список правок короткий, хватает нескольких часов работы без полного аудита. Подробнее на странице IT-аудита, все цены в прайсе.

Частые вопросы

Почему на телефоне балл ниже, чем на компьютере?

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

Влияет ли скорость на позиции в Яндексе?

В справке Вебмастера, которую я открывал, веса скорости в ранжировании нет. Зато там написано, что из-за низкой скорости пользователь может не дождаться страницы и уйти на другой сайт, а долгий ответ сервера Вебмастер отмечает ошибкой. Для бизнеса этого достаточно.

Можно ли ускорить сайт на конструкторе?

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

Через сколько обновятся цифры после правок?

Лабораторный тест сразу. Полевые данные считаются за 28 дней и обновятся примерно через месяц. Ошибка в Вебмастере уйдёт после следующего обхода робота.

Коротко о главном

В PageSpeed смотрите мобильную вкладку и полевые данные: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Балл Lighthouse помогает найти причину и скачет между прогонами. В Вебмастере проверьте ошибку «Долгий ответ сервера». Чинить начинайте с первого экрана: верхняя картинка, хостинг, лишние скрипты, потом шрифты и кэш.

Напишите мне в Telegram кодовое слово «ЗАГРУЗКА» и адрес сайта. Я замерю его на мобильном и пришлю 5 правок, отсортированных по влиянию на скорость.