Що можна зробити за 4 секунди?
Втратити до 90% користувачів свого веб-ресурсу.
Саме такий відсоток ймовірних відмов прогнозує Think with Google. Якщо швидкість завантаження сторінки збільшиться з 1 до 5 секунд, вважайте, ви втратили більшість своїх ймовірних клієнтів.
Насправді, Google аналізує понад 200 різних метрик, щоб зрозуміти, кому віддати перші місця пошукової видачі. І швидкість завантаження сайту входить до найважливіших показників ранжування. Простіше кажучи: немає швидкості = немає місця в ТОПі.
Розказуємо, як перевірити швидкість завантаження сайту та розбираємося з одним з найпопулярніших інструментів для цього — PageSpeed Insights.
Що таке Google PageSpeed Insights (PSI)?
Google PageSpeed Insights — це аналітичний інструмент, який вимірює, наскільки швидко завантажується вебсторінка, і оцінює її з погляду користувацького досвіду та SEO. Він «вміє» не просто констатувати проблеми, а надати конкретні, практичні поради щодо того, як ці проблеми виправити. Крім того:
- Зробити детальну оцінку швидкості завантаження та відображення вашої веб-сторінки;
- Виміряти ключові метрики, які стали прямими факторами ранжування Google. Це найважливіша функція для SEO;
- Зробити аналіз сторінки в двох режимах: для мобільних пристроїв і для комп'ютерів (це важливо, оскільки досвід користувача на них може суттєво відрізнятися).
Використовувати Google PageSpeed Insight дуже просто: його інтерфейс буквально складається з поля для введення URL та однієї синьої кнопки. Окрім них, на сторінці є посилання на документацію та іншу інформацію, що може бути корисною для користувача.
Щоб виміряти швидкість загрузки сайту PSI використовує 2 джерела даних:
-
Lab Data — моделює завантаження сторінки в контрольованих умовах (на базі Lighthouse). Це допомагає знайти технічні проблеми.
-
Field Data — реальна статистика користувачів із Chrome User Experience Report (CrUX). Вона відображає, як сторінка працює на різних пристроях, браузерах і мережах.
На наш погляд, PageSpeed Insights — це основний інструмент для кожного власника сайту, SEO-фахівця та веб-розробника. З його допомогою ви можете швидко отримати вичерпну картину продуктивності сторінки та чіткий план дій щодо її покращення.
Як працює PageSpeed Insights, його основні показники та метрики
Слід розуміти, що Google PageSpeed — це багатогранний інструмент. Коли ми говоримо, що він вимірює «швидкість сайту»,це НЕ означає, що ви отримаєте якусь константу, на кшталт 100 Гбит/с. Speed індекс, без сумнівів, важлива метрика. Але PSI проводить аналіз ще й інших параметрів.
| Метрика | Що вимірює | Оптимальне значення |
|---|---|---|
| LCP (Largest Contentful Paint) | Час відображення найбільшого видимого елемента (зображення, заголовок, відео) | ≤ 2,5 сек (добре), 2,5–4 сек (потрібно покращити), >4 сек (погано) |
| FID (First Input Delay) → замінюється на INP | Затримка між першою дією користувача (клік, тап) і реакцією сайту | ≤ 100 мс (добре), 100–300 мс (потрібно покращити), >300 мс (погано) |
| INP (Interaction to Next Paint) | Час реакції сайту на будь-яку взаємодію | ≤ 200 мс (добре), 200–500 мс (середньо), >500 мс (погано) |
| CLS (Cumulative Layout Shift) | Наскільки «стрибає» макет під час завантаження | ≤ 0,1 (добре), 0,1–0,25 (потрібно покращити), >0,25 (погано) |
| FCP (First Contentful Paint) | Час відображення першого тексту/зображення на екрані | ≤ 1,8 сек (добре), 1,8–3 сек (потрібно покращити), >3 сек (погано) |
| TTI (Time to Interactive) | Коли сторінка стає повністю інтерактивною | ≤ 3,8 сек (добре), 3,9–7,3 сек (середньо), >7,3 сек (погано) |
| TBT (Total Blocking Time) | Скільки часу сторінка була «заблокована» важкими скриптами | ≤ 200 мс (добре), 200–600 мс (середньо), >600 мс (погано) |
| SI (Speed Index) | Наскільки швидко контент стає візуально доступним | ≤ 3,4 сек (добре), 3,5–5,8 сек (середньо), >5,8 сек (погано) |
Важливо! Core Web Vitals є найбільш критичними для SEO-просування. До цих метрик відносять: LCP, INP/FID, CLS. Інші параметри теж враховуються, проте вони є більш важливими для розробників, щоб знайти «вузькі місця». Сайти, що мають хороші показники Core Web Vitals, отримують перевагу в пошуковій видачі. Це офіційно підтверджено Google.
За яким алгоритмом працює webPageSpeed?
Алгоритм використовує два типи даних, про які ми вже говорили: дані з полів (Field Data) та лабораторні (Lab/Synthetic data). У першому випадку програма отримує значення LCP, INP, CLS для ваших сторінок з анонімованої статистики реальних користувачів Chrome, які відвідали сайт.
Важливо! Для формування оцінки на основі Field Data потрібен достатній обсяг трафіку. Якщо даних недостатньо, PSI надасть вам статистику за допомогою Lighthouse Це інструмент, який запускається на серверах Google та імітує завантаження сторінки на потужному комп'ютері зі стабільним інтернетом (на кшталт «стерильних лабораторних умов»).
Отже, на практиці це відбувається так:
- PageSpeed Insights відкриває сторінку у віртуальному Chrome з типовими налаштуваннями: 3G/4G/5G мережа; «середній» мобільний чи десктоп пристрій.
- Lighthouse запускає тести, вимірює час відображення, взаємодії та стабільності.
- Результат порівнюється з еталонними значеннями (thresholds). На цій основі програма виводить інтегральний бал.
- Додаються рекомендації: оптимізація зображень, мінімізація CSS/JS, використання кешування, налаштування lazy-loading, тощо (детальніше про це поговоримо в окремому розділі статті).
Як інтерпретувати результати перевірки
Алгоритм оцінки від Speed Insight Google PSI — це не просто сума балів, хоч ми і отримуємо єдине число. Програма проводить складний, зважений розрахунок, який імітує те, як людина сприймає швидкість завантаження веб-сторінки та максимально точно відображає якість досвіду користувача.
Важливо! Оцінка, яку ви бачите в головній панелі PSI (0-100), формується на основі Lab Data. Але розділ «Core Web Vitals» показує окремо статус на основі Field Data, який є пріоритетним для SEO.
Кожна метрика має різні одиниці виміру (мілісекунди, бали тощо). Алгоритм перетворює «сире» значення кожної метрики в проміжний бал від 0 до 100 (де 100 — ідеал). Для цього використовуються спеціальні шкали оцінювання. Розглянемо на прикладі LCP:
| Бал | Діапазон значень | Категорія | Пояснення для користувача |
|---|---|---|---|
| 100 | ≤ 1200 мс (1.2 с) | Добре (Good) | Ідеальна швидкість. Основний контент з'являється миттєво. |
| 90 | ≤ 1700 мс (1.7 с) | Добре (Good) | Відмінна швидкість. Користувач дуже швидко бачить контент. |
| 75 | ≤ 2200 мс (2.2 с) | Потребує покращення (Needs Improvement) | Непогано, але можна краще. Мета — досягти зеленого діапазону (≤ 2.5 с). |
| 50 | ≤ 3200 мс (3.2 с) | Потребує покращення (Needs Improvement) | Помітна затримка. Користувач починає відчувати, що сайт «грузиться». |
| 0 | ≥ 4000 мс (4.0 с) | Погано (Poor) | Критично повільно. Високий ризик, що користувач залишить веб-сторінку. |
Проміжні бали всіх метрик об'єднуються за спеціальною формулою. Результат нормалізується, щоб отримати кругле число від 0 до 100.
Але перед тим важливо «зважити» кожен із показників. Для цього використовується процентне співвідношення їх «ваги»:
Largest Contentful Paint = 25%
Cumulative Layout Shift = 15%
Total Blocking Time = 30%
Тобто показник TBT є найвагомішим, бо напряму впливає на швидкість завантаження та час відгуку. А CLS має найменший % ваги, бо за фактом більш характеризує стабільність, ніж швидкодію.
Фінальна оцінка = √( (LCP_score² * 0.25) + (TBT_score² * 0.30) + (CLS_score² * 0.15) + ... ) *
* Формула спрощена для прикладу. В реальності вона набагато складніша, але має саме такий принцип зважування та об'єднання.
Як інтерпретувати оцінку?
90-100 (Зелений): Ваш сайт швидкий. Продовжуйте в тому ж дусі.
50-89 (Помаранчевий): Є простір для покращення. Перегляньте розділ «Opportunities» у звіті.
0-49 (Червоний): Сайт повільний. Потрібна серйозна оптимізація.
Чому кастомна розробка – оптимальний шлях для високих показників PageSpeed
Готові рішення → швидкий старт.
Зазвичай на цьому переваги шаблонів / конструкторів / CMS «з коробки» закінчуються. Практика показує, що рідко коли готові рішення дають високі показники PSI. Зазвичай це 60–75/100.
У той же час кастомна розробка має вищу вартість на початку. Але в перспективі забезпечує стабільний результат: 90–100/100 у PageSpeed test. Google високо оцінює оптимізовані Core Web Vitals і зручний UX. Тобто кастомні сайти (за умови якісного виконання) мають на 100% кращий SEO-потенціал.
Готові теми (WordPress, Tilda, Wix, тощо) включають сотні рядків коду, які часто не використовуються на конкретному сайті. Це збільшує час завантаження, TBT та INP. Крім того, мають інші критичні недоліки:
-
Надмірна кількість сторонніх плагінів = додаткові HTTP-запити, скрипти та стилі → погіршення LCP і TTI.
-
Обмежений контроль над оптимізацією. Неможливо тонко налаштувати кешування, lazy-loading, асинхронне завантаження JS. У багатьох шаблонах важкі бібліотеки підключаються навіть там, де вони не потрібні.
-
Проблеми з Core Web Vitals. CLS часто страждає через «стрибаючі» банери, динамічні блоки чи рекламу. INP погіршується через надмірні інтерактивні елементи та великі JS-бандли.
Для SEO в Україні, де конкуренція у нішах висока, декілька секунд затримки = втрата позицій. Тому саме кастомна розробка, яка може забезпечити гнучку оптимізацію під Core Web Vitals є конкурентною перевагою, що забезпечує кращий шанс на топ-позиції у Google.
Рекомендації з оптимізації сайту
На першому рівні ми завжди радимо починати з Quick Wins — це критично важливі та швидкі перемоги. Наприклад, найчастіша причина повільних LCP криється у не оптимізованих зображеннях. Для поліпшення цього показника потрібно:
-
конвертувати зображення у сучасні формати. Використовуйте WebP (з fallback для Safari) або AVIF. Це може зменшити вагу зображень на 25-50% без втрати якості.
-
провести Resize — завантажуйте картинки саме в тому розмірі, в якому вони відображаються на екрані. Не покладайтеся на стилі CSS max-width: 100%.
-
додати атрибут loading="lazy" для зображень, які не знаходяться у першій області перегляду.
-
вказати атрибути width та height, якщо цього не було зроблено раніше.
Також критично важливо налаштувати кеш у браузері та на стороні сервера. Для CMS (наприклад, WordPress) обов'язково використовуйте плагіни кешування (W3 Total Cache, WP Rocket), які генерують статичні HTML-сторінки, різко знижуючи навантаження на сервер.
Ще один критично важливий момент — використання CDN (Content Delivery Network)
Це допоможе зберегти копії вашого сайту на серверах по всьому світу = користувач завантажує контент з найближчого до нього сервера, що значно пришвидшує завантаження.
Поглиблена оптимізація, яка має безпосередній вплив на Core Web Vitals починається з мінімізації та оптимізації CSS та JavaScript. Цей рівень вимагає більше технічних знань, але критично важливий для хороших показників. Для початку потрібно:
-
видалити всі непотрібні символи (пробіли, коментарі, переноси рядків) з CSS і JS-файлів;
-
об'єднати суміжні CSS/JS-файли в один, щоб зменшити кількість HTTP-запитів;
-
усунути блокуючий ресурс (Render-Blocking Resources).
-
доповнити некритичні скрипти з атрибутом async або defer, щоб вони не блокували парсинг сторінки;
-
запровадити використання font-display: swap: Це дозволить браузеру відобразити текст системним шрифтом, поки завантажується кастомний, запобігаючи "invisible text" та покращуючи LCP.
Максимального ефекту можна досягти, використовуючи просунуті техніки та архітектурні рішення. Але вони часто вимагають кастомної розробки. Мається на увазі оптимізація сервера (Backend), загальне поліпшення технологічної архітектури за допомогою JAMstack, використання фреймворків, тощо.
FAQ
Чи впливає оцінка PageSpeed на позиції сайту?
Сама по собі оцінка PageSpeed Insights не є SEO-фактором. Дані, отримані від PSI, — це лише орієнтир для розробників/власників. Реальні позиції визначаються тим, як швидко й стабільно сайт працює у користувачів (на основі польових даних Chrome User Experience Report).
Які значення швидкості вважаються хорошими?
Для хорошої швидкості веб-сайту ключові значення зосереджені на метриках Core Web Vitals:
- час завантаження основного контенту — до 2.5 секунд;
- затримка першої взаємодії — до 100 мілісекунд;
- сукупне зміщення макета — не більше 0.1.
Загальна оцінка в інструменті PageSpeed Insights вважається хорошою, якщо вона перевищує 90 балів для десктопної версії та 70-80 балів для більш вимогливої мобільної версії. Однак, ідеалом є досягнення часу завантаження сторінки в межах 1-2 секунд, оскільки саме при таких значеннях ризик втрати користувача та негативного впливу на SEO є мінімальним.
Чим PageSpeed Insights відрізняється від інших інструментів для перевірки швидкості?
Унікальність PageSpeed Insights полягає в тому, що це не просто інструмент для виміру швидкості, а інструмент для покращення SEO. Він відповідає на два ключові питання: «Як Google бачить швидкість мого сайту?» (Field Data) та «Що саме мені виправити, щоб покращити цю оцінку?» (Lab Data + рекомендації).
Як часто потрібно перевіряти швидкість сайту?
Золоте правило — робити «чекап» після КОЖНОЇ значної зміни. Наприклад, коли ви додали новий плагін або скрипт, внесли зміни в дизайн головної сторінки або ключових landing pages, провели технічну оптимізацію (налаштували кешування, оптимізували зображення).
Але найважливіше для SEO — це все ж моніторинг реального досвіду користувачів. Тож не зайвим буде перевіряти SpeedInsights 1 раз на місяць для того, щоб оперативно виправити можливі недоліки і не втрачати SEO-рейтинг.
Від чого залежить швидкість завантаження сайту?
Швидкість завантаження сайту залежить від великої кількості взаємопов'язаних факторів, які умовно можна розділити на три групи: серверні (потужність хостингу, використання CDN, ефективність кешування), клієнтські (швидкість інтернет-з'єднання користувача та потужність його пристрою) та, найважливіше — оптимізація самого сайту (вага та кількість зображень, відео, код HTML, CSS і JavaScript, використання сторонніх скриптів, архітектура веб-сторінки).
Чи можливо отримати 100 балів у Google PageSpeed?
Так. Але оцінка 100/100 означає, що ваш сайт ідеально оптимізований для лабораторних умов тестування Lighthouse, які не завжди повністю відповідають реальній роботі. Тобто прагнути до ідеалу — це правильно, проте не завжди доцільно з практичної точки зору.
