Як перевірити швидкість сайту та покращити показники Core Web Vitals

• SEO
• Гайди & How-to

• 
  Редакторка блогу Webpromo
  Олена Гайдак

Швидкість сайту — це база, без якої решта маркетингових зусиль просто не спрацює. Користувач не готовий чекати, поки сторінка завантажиться, якщо це займає довше, ніж пару секунд. Повільна швидкість також впливає на ранжування — Google регулярно оцінює продуктивність вебсторінки за набором показників Core Web Vitals.

У статті розберемо: 

• Що таке Core Web Vitals?
• Як перевірити швидкість завантаження сайту?
• Якими сервісами скористатися?
• Що зробити, щоб покращити результати? 

Що таке Core Web Vitals?

Core Web Vitals — це набір метрик Google, які оцінюють швидкість роботи та продуктивність сторінки, враховуючи можливі дії користувача на ній: як швидко вона завантажується та реагує на дії, як відображаються елементи. Показники використовуються алгоритмами Гугл для ранжування вебсайтів, про це прямо зазначено в його офіційній документації. 

Проте отримання хороших результатів для Core Web Vitals у Serch Console не гарантує, що ваші вебсторінки будуть ранжуватися у топі пошукових результатів Google. Швидке завантаження потрібне, щоб покращити вебсайт для користувачів в цілому, а не лише для SEO.

Метрики Core Web Vitals

1. INP (Interaction to Next Paint) — час відгуку вебсторінки на певну дію користувача (клік, тап, натискання клавіші). INP фіксує, через який проміжок часу браузер відображає результати цих змін на екрані користувача. Метрика замінила застарілу FID і оцінює затримку впродовж усього часу перебування на сторінці, а не лише першу взаємодію. Нормою вважається до 200 мс. Сьогодні INP — найважливіший показник  Core Web Vitals.
2. LCP (Largest Contentful Paint) — час, за який на екрані з’являється найбільший видимий елемент сторінки (головне зображення, банер або блок тексту). Хороший показник — до 2,5 секунди.
3. CLS (Cumulative Layout Shift) — стабільність верстки, тобто наскільки сильно «стрибають» елементи під час завантаження сторінки (наприклад, коли текст зміщується через зображення, що завантажилося з затримкою). Хороший показник — до 0,1.

Якщо всі три метрики знаходяться в «зеленій» зоні, Google вважає сторінку зручною для користувача. Якщо хоча б одна виходить за межі норми — це сигнал, що на сайті є технічні проблеми, які варто виправити.

Як виміряти швидкість завантаження сайту: лабораторні та польові дані

Існує два типи даних, які використовують сервіси аналізу:

• Лабораторні дані (Lab Data) — результати, отримані в контрольованому середовищі, за симуляції певного пристрою та швидкості з’єднання. Такі дані дає, наприклад, Lighthouse. Вони зручні для діагностики конкретних проблем і тестування сторінок, які ще не мають реального трафіку, а також допомагають знайти й виправити конкретну технічну причину
• Польові дані (Field Data / CrUX) — реальні показники, зібрані на пристроях справжніх користувачів через Chrome User Experience Report (CrUX). Саме ці дані Google використовує під час ранжування, оскільки вони відображають фактичний досвід відвідувачів, а не тестового середовища. Вони показують, чи справді покращення відчули реальні користувачі.

Чому мобільна швидкість сайту важливіша за десктопну

Показники швидкості на мобільних пристроях і на десктопі часто відрізняються. Смартфони можуть мати слабший процесор порівняно з комп’ютерами, а мобільний інтернет, навіть 4G чи 5G, рідко забезпечує таку ж стабільну швидкість з’єднання, як Wi-Fi чи кабельний Ethernet. Тому сайт, який на десктопі завантажується за 1,5 секунди, на телефоні може показувати LCP у 3-4 секунди.

Google з 2021 року повністю перейшов на mobile-first індексацію — для ранжування використовує саме мобільну версію сайту. Якщо її швидкість низька, це впливає на позиції в пошуку навіть тих користувачів, які заходять з комп’ютера.

Чому мобільна версія повільніша:

• Важчі зображення й шрифти, які не адаптовані під менший екран і повільніше з’єднання.
• Надлишок JavaScript, який мобільний процесор обробляє довше.
• Сторонні скрипти (реклама, віджети, аналітика), що особливо сильно «просідають» саме на мобільних мережах.
• Відсутність адаптивних зображень (srcset), через що телефон завантажує ту саму важку картинку, що й десктоп.

Сервіси для перевірки швидкості сайту

PageSpeed Insights: що це за сервіс? 

Це безкоштовний інструмент від Google, який дозволяє перевірити швидкість завантаження сторінки — і десктопної, і мобільної версії, показує значення LCP, INP і CLS, а також дає конкретні рекомендації з покращення — наприклад, стиснути зображення чи зменшити час відповіді сервера.

Реєстрація на сервісі непотрібна — достатньо вставити URL сторінки та натиснути «Аналізувати». За кілька секунд інструмент видасть загальну оцінку (від 0 до 100) і детальний перелік проблем з поясненнями та рекомендаціями.

Окрім основних метрик, тут можна побачити додаткові параметри, серед яких, наприклад, доступність для ШІ-агентів. 

Google Search Console

Інструмент Google для контролю основних характеристик сайту після підтвердження прав на нього. 

У розділі «Основні показники Взаємодії з користувачем» (Core Web Vitals) відображаються реальні дані користувачів (CrUX) на основі показників за останні 28 днів, окремо для мобільних та ПК. 

Звіт групує сторінки за URL-шаблонами та статусом (добре, потребує покращення, погано), що зручно для масштабної діагностики, а не аналізу однієї сторінки.

GTmetrix

Сервіс, що поєднує дані Lighthouse з власною аналітикою та наочними графіками waterfall (послідовність завантаження всіх ресурсів сторінки). Дозволяє обрати локацію сервера тестування та тип пристрою, а також зберігає історію перевірок, що зручно для відстеження динаміки після внесених змін.

У безплатній версії доступний обмежений функціонал, який можна розширити за допомогою реєстрації.

Сервіс відстежує зміни продуктивності з часом, може присилати сповіщення, якщо показники досягли критичних значень, аналізувати швидкість на різних пристроях і у різних країнах. Зручно для тих, хто працює на міжнародні ринки. 

WebPageTest

Один з найдетальніших інструментів для технічного аналізу. Дозволяє тестувати сайт з різних локацій світу, браузерів і швидкостях з’єднання, а також порівнювати кілька URL між собою. Підходить для розробників і SEO-фахівців, які хочуть глибоко розібратися в причинах повільного завантаження. 

Окрім базових функцій тут є: 

• Waterfall (Водоспад) — графічне відображення черговості та тривалості завантаження кожного файлу на конкретній сторінці. 
• Режим Filmstrip — серію скриншотів у процесі завантаження. 

Інструменти допомагають зафіксувати, що саме і на якій секунді бачить користувач та знайти файли, які уповільнюють сайт. 

Платний тариф дозволяє «віртуально» провести оптимізацію, щоб дізнатися, як нові впровадження вплинуть на сайт.  

Lighthouse у Chrome DevTools

Якщо потрібно швидко подивитися швидкість завантаження сайту, не виходячи з браузера, скористайтеся вбудованим інструментом Chrome DevTools. Щоб скористатися, відкрийте потрібну сторінку і натисніть F12 (або клікнути правою кнопкою миші → «Переглянути код»). Після відкриється вкладка Lighthouse з можливістю запуску аналізу. 

Інструмент оцінює якість сайту за стобальною шкалою, яка має до 5 категорій та містить поради щодо виправлення помилок.  Зручно тим, що не потребує переходу на сторонні сайти й дає миттєвий результат прямо в браузері.

Pingdom Tools

Програма поєднує безплатну базову перевірку та безліч платних функцій для розробників, які дають можливість різнобічно оцінити вебсайт. Інструменти сервісу поділяються на дві категорії: 

• синтетичний моніторинг (роботи-симулятори); 
• аналіз дій реальних користувачів. 

У безкоштовній версії можна ввести адресу сайту, обрати регіон тестування (наприклад, Європа чи США) та отримати звіт про швидкість завантаження сторінки до мілісекунд. Waterfall Analysis розписує час завантаження кожного окремого елемента (картинки, скрипту, шрифту, що дає можливість знайти елемент, який сповільнює сайт. 

Серед платних функцій: 

• Моніторинг доступності — перевірка сайту з локацій по всьому світу;
• Моніторинг транзакцій — алгоритм імітує дії користувача на вашому вебсайті (вхід у кабінет, пошук товару, додавання до кошика та оплату). Це дозволяє миттєво відстежити будь-який збій.  

Як обрати сервіс для перевірки швидкості сайту

Кожен із розглянутих інструментів вирішує трохи різні задачі, тому вибір залежить від того, що саме вам потрібно:

• Тип даних. Якщо потрібні реальні дані користувачів для SEO та ранжування — орієнтуйтеся на Google Search Console (CrUX). Якщо треба протестувати сторінку, яка ще не має трафіку, або локалізувати конкретну технічну проблему — використовуйте лабораторні дані (PageSpeed Insights, Lighthouse, GTmetrix, WebPageTest).
• Швидкість перевірки vs глибина аналізу. Для швидкого одноразового чекапу достатньо PageSpeed Insights або Lighthouse — вони не потребують реєстрації й дають результат за секунди. Якщо потрібна детальна діагностика з waterfall-аналізом, filmstrip та тестуванням із різних локацій — обирайте WebPageTest або GTmetrix.
• Регулярний моніторинг. Якщо важливо відстежувати динаміку показників у часі та отримувати сповіщення про критичні зміни — підійдуть GTmetrix і Pingdom Tools з функціями моніторингу.
• Бюджет. Безкоштовних можливостей PageSpeed Insights, Google Search Console та Lighthouse зазвичай достатньо для базового аудиту. Платні тарифи GTmetrix, WebPageTest і Pingdom мають сенс, якщо йдеться про постійний моніторинг великого сайту або роботу на кілька регіонів.
• Хто буде користуватись. Маркетологам і власникам бізнесу зручніше з PageSpeed Insights і Search Console — там прості звіти з рекомендаціями. Розробникам і SEO-фахівцям, які хочуть розібратись у першопричинах, краще підійде WebPageTest з його технічними деталями.

Оптимальний підхід — комбінувати кілька інструментів: польові дані з Search Console для розуміння реального досвіду користувачів і лабораторні дані з PageSpeed Insights або WebPageTest для точкової діагностики й виправлення проблем.

Чекліст для покращення Core Web Vitals

Коли проблемні місця визначені, можна переходити до конкретних кроків з оптимізації:

• Стискайте зображення. Зменшуйте розмір файлів і використовуйте сучасні формати WebP або AVIF. Для зображень, які користувач побачить не одразу, увімкніть lazy loading — вони завантажуватимуться лише тоді, коли це потрібно.
• Мінімізуйте CSS і JavaScript. Видаляйте невикористаний код, об’єднуйте файли за потреби та стискайте їх, щоб зменшити обсяг даних, які завантажує браузер. Критичний CSS для вмісту першого екрана можна вбудувати безпосередньо в HTML, щоб браузер міг швидше відобразити сторінку.
• Покращуйте завантаження ресурсів. Скрипти та стилі, які не потрібні для відображення першого екрана, не мають блокувати завантаження сторінки. Для JavaScript використовуйте defer (відкладає виконання до завершення парсингу HTML) або async, (завантажує скрипт паралельно й виконує його одразу після завантаження). Виконання другорядних скриптів за можливості відкладайте до моменту, коли основний контент уже відображено.
• Налаштуйте кешування та CDN. Кешування зберігає копії ресурсів у браузері або на сервері, тому під час повторного завантаження їх не потрібно отримувати заново. CDN (мережа доставки контенту) розподіляє статичні файли між серверами в різних регіонах і віддає їх із сервера, який розташований ближче до користувача, що може зменшити час відповіді.
• Оптимізуйте завантаження шрифтів. Підключайте лише ті шрифти та їхні варіанти, які використовуються на сайті. За можливості зберігайте шрифти на власному сервері, щоб зменшити кількість зовнішніх запитів. Використовуйте font-display: swap, щоб текст відображався одразу, не чекаючи завантаження шрифту.
• Резервуйте місце для динамічного контенту. Заздалегідь задавайте розміри для банерів, рекламних блоків та інших елементів, які завантажуються із затримкою. Це допомагає уникнути зсувів тексту, кнопок та інших елементів сторінки під час завантаження контенту.
• Прискорюйте відповідь сервера (TTFB). Перевірте час відповіді сервера та за потреби оптимізуйте хостинг, серверні запити й роботу бази даних. Використовуйте Gzip або Brotli для стиснення даних і налаштуйте серверне кешування, щоб браузер швидше отримував потрібні ресурси.
• Обмежте кількість сторонніх скриптів. Віджети, рекламні теги, системи аналітики та інші сторонні скрипти можуть збільшувати кількість мережевих запитів і час завантаження сторінки. Залишайте лише необхідні та, за можливості, завантажуйте другорядні скрипти після основного контенту.
• Регулярно перевіряйте показники. Не обмежуйтеся одноразовим тестуванням швидкості. Повторюйте перевірку після значних змін на сайті — оновлення дизайну, додавання нових блоків, зміни хостингу або інших технічних змін, які можуть вплинути на швидкість.