Швидкість завантаження сайту — та метрика, через яку сваряться найчастіше. Підрядник показує зелений звіт, клієнт відкриває 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 із десятком плагінів, прискорити його можна відсотків на двадцять-тридцять, і далі впирається в платформу. Це не привід переписувати все — це привід порахувати, скільки коштує кожна секунда у ваших заявках.
