Наскільки швидким має бути сайт і коли гонитва за 100 — марна трата
Ідеальний бал PageSpeed не завжди досяжний і не завжди вартий зусиль. Де справжній виграш, а де зусилля перестають окупатися.
Перевірте будь-який сайт у Google PageSpeed Insights — і отримаєте число зі ста. Це найчастіше цитований показник у веброзробці й один із найбільш неправильно зрозумілих.
Що насправді вимірює це число
Бал — це зведення кількох вимірювань, і одне з них переважає: Largest Contentful Paint, момент, коли найбільший елемент на екрані закінчує відмальовуватися. На більшості сторінок це головна фотографія або заголовок.
Інші важать менше, ніж думають. Зсув макета — коли вміст стрибає, поки сторінка остаточно не сформується, — варто виправити, бо це справді дратує. Затримка взаємодії важлива для важких застосунків і майже ніколи — для сайту-візитки.
Тож коли кажуть, що сайт «погано оцінюється», майже завжди мають на увазі одне: головна картинка з’являється надто довго.
Де справжній виграш
З нашого досвіду, ось ці чотири пункти дають майже весь результат, у такому порядку:
- Віддавайте зображення в сучасному форматі. Та сама фотографія у форматі AVIF замість JPEG зазвичай утричі менша без видимої різниці. На одному з нещодавніх сайтів лише це зменшило загальну вагу сторінки на 36%.
- Віддавайте потрібний розмір. Зображення, яке показується завширшки 400 пікселів, не слід надсилати в розмірі 1280. Нарізати кілька ширин і дати браузеру вибрати нічого не коштує під час збирання.
- Не змушуйте браузер чекати на те, що йому ще не потрібно. Усе, що нижче першого екрана, може завантажуватися пізніше. Шрифти й скрипти, що блокують перше відмальовування, варто вишукувати й прибирати по одному.
- Підкажіть браузеру, що буде далі. Один рядок із назвою зображення, яке стане найбільшим елементом сторінки, дає змогу почати його завантаження ще до того, як браузер дочитає решту.
Нічого з цього не є екзотикою, і все можна зробити один раз, під час збирання, тож воно працюватиме для кожної сторінки, доданої згодом.
Де зусилля перестають окупатися
Ось те, що агенції зазвичай не пишуть. На добре зробленому сайті ви зазвичай досягнете 100 на десктопі й десь 95–97 на мобільному — а останні кілька балів можуть бути недосяжними.
Мобільний тест запускається на навмисно повільному імітованому пристрої з обмеженим з’єднанням. Після певної межі число визначає саме ця імітація, а не щось на вашому сайті. Ми бачили, як сайт тримався на 2,13 секунди впродовж десятка справжніх покращень, коливаючись на двадцять мілісекунд у той чи інший бік, бо решта часу припадала на імітований процесор, а не на сторінку.
Є й друга пастка: цей інструмент — не секундомір, показники якого можна порівнювати в різний час. Перевірте ту саму сторінку двічі з різницею в годину — і бал зміниться, бо машина, що виконує тест, завантажена сильніше. Якось ми ганялися за «регресією» з 97 до 93, яка виявилася нічим іншим, як навантаженням на тестову машину. Якщо порівнюєте дві версії, тестуйте їх одну за одною, по кілька разів кожну, і порівнюйте медіанні значення.
Що просити натомість
Розумна ціль для сайту компанії:
| Вимірювання | Варто мати | Спадна віддача |
|---|---|---|
| Largest Contentful Paint | менше 2,5 с | менше 1,5 с |
| Зсув макета | менше 0,1 | нуль |
| Вага сторінки | менше 1 MB | менше 500 KB |
| Мобільний бал | 90+ | гонитва за 100 |
Якщо сайт відповідає середній колонці, його стримує не швидкість, і гроші краще витратити на сторінки, яких ще не існує.
Чому ми взагалі про це говоримо
Бо повільний сайт непомітно коштує вам відвідувачів, які найменше готові чекати, і бо виправлення — це переважно рішення під час збирання, а не постійні витрати. Зробіть правильно один раз — і так воно й залишиться.
Ви можете самі перевірити будь-який сайт, зокрема наш, у PageSpeed Insights. Це займає близько тридцяти секунд і нічого не коштує.