Скорость загрузки сайта — та метрика, из-за которой спорят чаще всего. Подрядчик показывает зелёный отчёт, клиент открывает PageSpeed и видит семьдесят. Оба правы, и ниже — разбор на живом проекте, где разница между двумя замерами составила больше чем вдвое.
Два замера одного сайта, разница вдвое
Проект — сайт производителя сухого льда. Мы замерили его дважды: лабораторным прогоном PageSpeed Insights и полевыми данными Microsoft Clarity по 357 реальным просмотрам за 30 дней.
| Метрика | Лаборатория (PageSpeed) | Поле (реальные пользователи) |
|---|---|---|
| Общий балл | 70 | 84 |
| LCP (самый большой элемент) | 5,4 с | 2,5 с |
| CLS (сдвиг макета) | 0 | 0,001 |
| INP (отклик на действие) | TBT 410 мс | 250 мс |
| Распределение | один прогон | 75,4% good · 23% needs · 1,7% poor |
Разрыв в LCP — 5,4 против 2,5 секунды. Если бы мы принимали решения только по лаборатории, мы бы переписывали сайт, который в реальности почти укладывается в зелёную зону Google (порог «хорошо» для LCP — 2,5 с).
Почему лаборатория показывает хуже
PageSpeed Insights не меряет ваш сайт у вашей аудитории. Он прогоняет его в фиксированных условиях:
- эмуляция сети Slow 4G с искусственной задержкой;
- процессор, замедленный в четыре раза, — модель Moto G Power, а не тот телефон, с которого заходят ваши клиенты;
- один холодный прогон без кеша, без повторных визитов;
- сервер Google, а не украинская сеть, из которой идёт 89% трафика этого проекта.
Это не ошибка инструмента, а его назначение: лаборатория намеренно ставит жёсткие условия, чтобы проблемы было видно. Но «жёсткие условия» и «условия ваших клиентов» — разные вещи, и путать их дорого.
Самая дорогая ошибка: смотреть на средний балл
84 балла в среднем по сайту выглядят спокойно. Раскладка по страницам выглядит иначе — и именно там прячутся деньги.
| Страница | Балл | LCP | CLS |
|---|---|---|---|
| Товар «сухой лёд 3 мм, 50 кг» | 43 | 3,3 с | 0,6 |
| Страница города (Запорожье) | 62 | 1,7 с | 0,035 |
| Страница применения | 65 | 3,3 с | 0,6 |
| Страница города (Днепр) | 95 | 0,82 с | 0 |
| Доставка | 93 | — | — |
Страница с 43 баллами и сдвигом макета 0,6 — это самый популярный товар на сайте: 164 просмотра за месяц, первое место среди всех товаров. То есть худшая страница по скорости оказалась лучшей по спросу. Средний балл 84 эту проблему полностью прячет.
Правило простое: смотрите скорость на тех страницах, которые приносят деньги, а не в среднем по больнице. Что именно означают LCP, INP и CLS — разобрали отдельно в словаре Core Web Vitals.
Три попытки ускорить, которые сделали хуже
Самое полезное в этом проекте — не то, что сработало, а то, что не сработало. Все три случая откачены и зафиксированы в коммитах.
- `priority` на картинках первого экрана ухудшил LCP с 5,4 до 9,4 секунды. Атрибут `priority` в Next.js добавляет preload, и три декоративных изображения по 185 КБ забили канал раньше, чем загрузились CSS и шрифты. На быстром Wi-Fi разницы не видно, на медленном 4G — катастрофа.
- Снижение `quality` не сжало картинку. Вес держал альфа-канал, а не качество. Сработало другое: пересохранение с 1624 до 1012 пикселей (реальный размер отображения) и палитра на 128 цветов с дизерингом — 96 КБ стали 33 КБ.
- `preload: false` на шрифте дал регресс LCP и добавил сдвиг макета, которого до этого не было. Тоже откат.
Общее во всех трёх: изменение выглядело логичным, а метрика ухудшилась. Поэтому любую оптимизацию скорости надо мерить до и после, а не делать «по здравому смыслу».
Как мерить правильно
- Возьмите полевые данные. Google CrUX, если трафика достаточно; Microsoft Clarity — если нет. Clarity бесплатна и показывает CWV по каждому URL.
- Посмотрите раскладку по страницам, а не среднее. Худшая страница с высоким спросом — ваш приоритет номер один.
- Лабораторию используйте для диагностики. PageSpeed хорошо отвечает на вопрос «из-за чего именно медленно», и плохо — на вопрос «насколько медленно на самом деле».
- Смотрите на распределение, а не на балл. «75% good, 23% needs improvement, 2% poor» информативнее, чем «84 из 100».
- Мерьте до и после каждой правки. Три примера выше показывают, почему.
Сколько стоит ускорить сайт
Разбор скорости входит в аудит сайта за $150: мы смотрим полевые данные по каждой странице, находим, что именно держит LCP, и даём список правок с оценкой часов. Внедрение — $40/час или в рамках поддержки за $200/мес. Если сайт делаем мы, скорость закладывается в разработку: LCP до 2,5 с на мобильном — условие сдачи, а не пожелание.
Честно о пределах: если сайт стоит на конструкторе или на WordPress с десятком плагинов, ускорить его можно процентов на двадцать-тридцать, и дальше упирается в платформу. Это не повод переписывать всё — это повод посчитать, сколько стоит каждая секунда в ваших заявках.
