Ви вставили адресу свого сайту в PageSpeed Insights і побачили червоне коло з цифрою 38 на вкладці «Мобільний». На комп’ютері при цьому 85. Під колом довгий список порад незрозумілою мовою. Перша думка: сайт поганий, і Google його за це карає.
Коротко: бал PageSpeed Insights у колі не вирок. Це результат одного імітованого тесту, і він змінюється від запуску до запуску. Спочатку дивляться верхній блок звіту з даними реальних відвідувачів, потім два-три показники, і лише потім список порад, з якого новачкові потрібні перші 3-5 пунктів.
Нижче розберемо, як читати звіт по порядку і що можна не чіпати. Якщо вам потрібен загальний розбір, чому сайт гальмує, він є у статті Чому сайт став повільним і що перевірити спочатку. Тут мова лише про звіт PageSpeed.
Немає часу розбиратися?
Прискорю сайт із замірами до і після та перевірю, що форми й заявки після цього працюють. Вартість від 200 € HT. Якщо хочете зробити самі, нижче все покроково.
Два блоки звіту, і верхній важливіший
PageSpeed Insights (безкоштовний інструмент Google на pagespeed.web.dev) показує на одній сторінці дві різні речі.
Верхній блок: реальні відвідувачі
Перший блок під адресою, про те, як сайт фактично працює у людей. Це дані з браузерів Chrome ваших справжніх відвідувачів за останні 28 днів. Головний рядок у ньому: «Оцінювання Основних веб-показників», пройдено чи не пройдено.
Нижній блок: лабораторний тест
Другий блок, «Виявляйте проблеми з продуктивністю». Це одне завантаження сторінки, яке Google імітує інструментом Lighthouse. Звідси коло з балом і список порад. Під колом прямо написано: «Значення приблизні й можуть відрізнятися».
Верхній блок відповідає на запитання «як сайт працює у людей», нижній на запитання «де шукати причини». Google сам попереджає, що хороший лабораторний бал не обов’язково означає, що реальним відвідувачам теж добре (документація PageSpeed Insights). Буває й навпаки: у колі 55, а оцінювання реальних відвідувачів пройдено.
Якщо у верхньому блоці замість цифр напис «Немає даних», для невеликого сайту це нормально. Google заповнює цей блок, лише коли відвідувачів із Chrome достатньо для статистики. У шапці блоку є перемикач між цією сторінкою і всім сайтом: спробуйте весь сайт. Якщо даних немає і там, лишається нижній блок і звіт про Основні веб-показники в Search Console (безкоштовний кабінет Google для власника сайту).
Цей звіт теж будується на даних реальних відвідувачів, але в сайтів із невеликим трафіком він часто порожній.
Чому на телефоні бал нижчий
Вкладка для мобільних тестує сайт не на вашому айфоні в домашньому Wi-Fi. Lighthouse імітує телефон середнього рівня в повільній мобільній мережі: у звіті внизу так і написано, «Емульований пристрій Moto G Power» і «Обмеження пропускної спроможності для мережі 4G з низькою швидкістю». Вкладка для комп’ютера імітує дротове підключення. Тому мобільний бал майже завжди нижчий, і порівнювати його з комп’ютерним немає сенсу.
Дивитися все одно варто на мобільну вкладку: клієнти малого бізнесу часто шукають адресу, меню чи телефон саме зі смартфона, і не завжди в хорошій мережі.
Три показники простими словами
У верхньому блоці головні три рядки називаються Core Web Vitals, українською «Основні веб-показники». Ось що вони означають:
LCP: коли з’явилося головне
Через скільки секунд на екрані з’явився найбільший елемент першого екрана: велике фото, банер або заголовок. Для відвідувача це момент «сторінка відкрилася».
INP: як швидко відповідає
Скільки минає від натискання на кнопку чи меню до того, як сторінка відреагувала. Поганий INP відчувається як «натиснув, а нічого не відбувається».
CLS: наскільки все стрибає
Чи зсуваються блоки під час завантаження. Знайома ситуація: цілитеся в кнопку, згори довантажується картинка, і ви натискаєте не туди. Це число без одиниць виміру.
Пороги Google (web.dev):
| Показник | Добре | Погано |
|---|---|---|
| LCP | до 2,5 с | понад 4 с |
| INP | до 200 мс | понад 500 мс |
| CLS | до 0,1 | понад 0,25 |
Між ними помаранчева зона «Потрібно покращити»: LCP 2,5-4 с, INP 200-500 мс, CLS 0,1-0,25.
Оцінювання пройдено, якщо всі три показники хороші принаймні в трьох візитах із чотирьох (Google дивиться на 75-й процентиль за останні 28 днів, окремо для телефонів і комп’ютерів). Якщо даних про INP мало, вистачає хороших LCP і CLS (документація PageSpeed Insights).
У нижньому блоці INP немає: тест нічого не натискає. Замість нього там Total Blocking Time (TBT), час, протягом якого сторінка зайнята своїми скриптами і не може відповісти. Сам бал у колі складається з п’яти лабораторних показників: найбільшу вагу мають TBT (30 %), LCP і CLS (по 25 %), решта припадає на FCP і Speed Index (Lighthouse). Тому важкі скрипти і фото в шапці опускають цифру найсильніше.
Чому бал PageSpeed Insights стрибає і чому 100 не мета
Запустіть тест тричі поспіль, і ви майже напевно отримаєте три різні бали. Google пояснює це навантаженням на мережу та сервери, на яких іде тест, а в документації Lighthouse до цього додано рекламу й A/B-тести, які змінюються від завантаження до завантаження, розширення браузера та антивірус (Lighthouse). Різниця в 5-10 балів без змін на сайті зазвичай нічого не означає. Порівнюйте ту саму сторінку на тій самій вкладці й беріть середнє з трьох запусків.
Щодо сотні в Google є пряма відповідь: ідеальні 100 балів дуже важко отримати, і їх не очікують, орієнтир 90 і вище. У документації пошуку Google пише, що основні веб-показники враховуються під час ранжування, але хороші значення не гарантують високих позицій, а домагатися ідеального результату лише заради SEO, можливо, не найкращий спосіб витрачати час (Google Search Central).
Гонитва за балом буває й шкідливою. Наприклад, відкладене завантаження всіх скриптів піднімає цифру, але може зламати форму заявки або захист від спаму в ній. Сайт з балом 70 і робочою формою корисніший за сайт з балом 98, який не приймає заявок.
Що зазвичай дає найбільше
Список порад у нижньому блоці довгий, але в пунктів є підказка: «Очікуване заощадження» в секундах або кілобайтах. Поруч із написом «Показано аудити, релевантні для» можна вибрати LCP, TBT або CLS, і залишаться лише поради, які впливають на цей показник. За великими пунктами на сайті малого бізнесу зазвичай стоїть одна з шести речей.
Важкі картинки
Пункт «Покращте показ зображень». Фото з телефона на 3-5 МБ у шапці майже завжди і є елементом LCP. Зменшити розмір і конвертувати у WebP можна самостійно: як зменшити фотографії. Зображення без заданих width і height потрапляють у пункт «Причини зміщення макета» і впливають на CLS.
Немає кешу
Пункт «Використовуйте ефективні значення TTL кешу» про те, щоб браузер не завантажував ті самі файли під час кожного візиту. Окремо WordPress без кешу сторінок збирає кожну сторінку заново. Обидві речі налаштовуються одним плагіном кешу або в панелі хостингу. Ставте один плагін, не два.
Зайві скрипти
Пункт «Сторонній код» покаже, скільки важать чат, рекламні пікселі, вбудована карта, віджет соцмереж. Плюс плагіни, якими давно не користуються. Кожен окремо корисний, разом вони шкодять і LCP, і INP.
Шрифти
Три-чотири сімейства шрифтів у п’яти накресленнях, які завантажуються з чужого сервера. Зазвичай вистачає двох сімейств і трьох накреслень. Пункт «Відображення шрифту» підкаже, що текст чекає на завантаження шрифту.
Слайдер у шапці
П’ять великих фото, анімація й окрема бібліотека скриптів на першому екрані. Слайдер часто водночас і елемент LCP, і причина зсувів. Одне хороше фото замість слайдера зазвичай дає більше, ніж десяток дрібних правок.
Повільний сервер
Рядок Time to First Byte (TTFB) у верхньому блоці: скільки сервер думає, перш ніж віддати сторінку. Якщо там понад 0,8 секунди, картинки тут ні до чого: повільно відповідає хостинг або сам сайт.
Що зі списку можна не чіпати
- Розділ «Діагностика» повністю, якщо ви не розробник. Під ним Google сам пише, що ці числа не впливають безпосередньо на бал ефективності.
- «Зменште код CSS, який не використовуєте» і «JavaScript» на сайті з конструктором. Цей код майже завжди приходить із теми або конструктора сторінок. Вручну його не прибрати, не зламавши верстку. Якщо в цьому пункті видно адреси чату чи віджетів, це до картки «Зайві скрипти» вище: допомагає відмова від зайвого, а не ручне очищення коду.
- Пункти із заощадженням у кілька кілобайтів або десятків мілісекунд. Наприклад, мініфікація CSS. Результату ви не помітите.
- Інші кола: «Доступність», «Оптимальні методи» та пошукова оптимізація (SEO). Це окремі теми, на бал у колі «Ефективність» вони не впливають.
Як перевірити сайт крок за кроком
- Відкрийте pagespeed.web.dev, вставте адресу головної і натисніть «Аналізувати». Потім зробіть те саме для найважливішої сторінки послуги.
- Виберіть вкладку для мобільних і почніть із верхнього блоку. Якщо оцінювання Основних веб-показників пройдено, бал унизу другорядний: шукайте лише явні проблеми.
- Якщо у верхньому блоці даних немає, перемкніться на весь сайт, а якщо сайт підключено до Search Console, подивіться там звіт про Основні веб-показники.
- Запустіть тест тричі й запишіть бал, LCP і CLS. Працюйте із середнім значенням.
- Виберіть LCP, TBT або CLS поруч із «Показано аудити, релевантні для» і візьміть один-два пункти з найбільшим «Очікуваним заощадженням».
- Перед правкою зробіть резервну копію (у панелі хостингу або плагіном бекапу). Змінюйте щось одне за раз і після кожної зміни знову запускайте тест.
- Після кожної правки перевірте на телефоні меню, форму заявки та кнопку дзвінка. Як це зробити без інструментів: перевірка сайту на телефоні.
Коли самотужки вже не впоратися
Якщо після картинок і кешу LCP досі понад 4 секунди, причина зазвичай глибша: повільна відповідь сервера (дивіться TTFB), важка тема або конструктор сторінок.
Поганий INP у реальних відвідувачів теж не виправити плагіном: це робота зі скриптами. Те саме, якщо це магазин, який уже приймає замовлення або якщо «плагін прискорення» вже колись ламав форму. Тут вечір із налаштуваннями частіше додає проблем, ніж балів.
Якщо час дорожчий
Усе, що вище, можна зробити самостійно: прочитати верхній блок, зменшити фото, поставити один плагін кешу і прибрати зайві віджети. Для невеликого сайту цього часто достатньо, щоб вийти з червоної зони.
Якщо ви не хочете розбиратися у звітах, Zen Webmaster візьме технічну частину на себе: прискорення сайту із замірами до і після та перевіркою, що форми й заявки працюють. Вартість від 200 € HT, усі ціни на сторінці тарифів.
Не хочете розбиратися самі?
Опишіть задачу кількома словами. Відповім протягом робочого дня: що потрібно зробити, скільки це коштує і скільки триватиме.
Останні статті
