EN Оптимізація сайту на WordPress для Google PageSpeed — це комплекс технічних дій на рівні хостингу, коду і медіафайлів, який покращує показники Core Web Vitals (LCP, INP, CLS). Хороший результат (зазвичай 90+ балів) досягається поєднанням швидкого хостингу, кешування, стиснення зображень і чистого коду теми та плагінів — жоден окремий крок сам по собі високу оцінку не витягне.
Швидкість завантаження сайту є одним із найважливіших факторів, що впливають на користувацький досвід (UX), конверсію та рейтинг у пошуковій видачі Google. Інструмент Google PageSpeed Insights (PSI) використовує показники Core Web Vitals (CWV) для оцінки реальної швидкодії.
Ця стаття допоможе вам розібратися, як саме оптимізувати ваш сайт на WordPress, щоб отримати найвищі оцінки в PageSpeed та задовольнити сучасні вимоги Google.
Основи: Вимірювання та розуміння Core Web Vitals
Core Web Vitals — це набір метрик, які вимірюють швидкість завантаження, інтерактивність та візуальну стабільність сторінки.
LCP (Largest Contentful Paint) – Швидкість завантаження
Метрика LCP вимірює час, необхідний для відображення найбільшого видимого елемента контенту на екрані (наприклад, заголовка, великого зображення чи блоку тексту). Низький LCP є ключовим для утримання користувача.
INP (Interaction to Next Paint) – Інтерактивність
INP (що замінює FID) вимірює час, який проходить з моменту взаємодії користувача (клік, натискання) до моменту, коли браузер візуально відповів на цю дію. Це критично важливо для форм, кнопок та навігації.
CLS (Cumulative Layout Shift) – Візуальна стабільність
CLS вимірює несподівані візуальні зсуви елементів на сторінці під час завантаження. Високий CLS викликає роздратування, коли елементи (наприклад, кнопки) “стрибають”, змушуючи користувача клікнути не туди.
Які показники Core Web Vitals вважаються хорошими
Google оцінює кожну метрику за трьома рівнями — «добре», «потребує покращення» і «погано». Орієнтуватися варто саме на ці межі, а не тільки на загальний бал 0–100 у PageSpeed Insights:
| Метрика | Добре | Потребує покращення | Погано |
|---|---|---|---|
| LCP | ≤ 2.5 с | 2.5–4 с | > 4 с |
| INP | ≤ 200 мс | 200–500 мс | > 500 мс |
| CLS | ≤ 0.1 | 0.1–0.25 | > 0.25 |
Важливо: Google рахує ці показники окремо для мобільних і десктопних версій, і саме мобільні дані частіше потрапляють у категорію «потребує покращення» чи «погано», бо мобільні пристрої й мережі повільніші за десктопні.
Як перевірити показники свого сайту
Перш ніж щось оптимізувати, варто розуміти, звідки беруться цифри — лабораторні дані і польові дані (реальні відвідувачі) можуть суттєво відрізнятися.
- Google PageSpeed Insights — показує і лабораторний тест (Lighthouse), і польові дані з Chrome UX Report, якщо у сайту достатньо трафіку;
- Google Search Console, розділ «Основні показники сайту» — агрегує реальні дані користувачів по групах сторінок і вказує на проблемні URL;
- Lighthouse у Chrome DevTools — зручний для локального тестування одразу після кожної зміни, ще до публікації;
- GTmetrix або WebPageTest — детальний waterfall-звіт, який показує, який саме файл чи запит уповільнює завантаження.
Орієнтуватися варто насамперед на польові дані (Search Console або CrUX), бо саме вони відповідають на питання, чи реально покращився досвід користувачів, а не лише одноразовий лабораторний бал.
Етап 1: Оптимізація Хостингу та Кешування (Серверний рівень)
Поліпшення швидкодії починається не з коду, а з основи — вашого сервера.
Вибір швидкого хостингу
Надшвидкий хостинг (особливо Managed WordPress Hosting або VPS/Dedicated Server) є найпершою та найефективнішою інвестицією. Переконайтеся, що ваш хостинг підтримує сучасні технології:
- PHP 8.x (значно швидший за старі версії).
- SSD-диски.
- HTTP/2 або HTTP/3 протоколи.
Налаштування Кешування та Gzip/Brotli
Кешування дозволяє зберігати копії сторінок, щоб не генерувати їх щоразу.
- Серверне кешування: Якщо ваш хостинг його не надає, використовуйте плагіни (наприклад, WP Rocket, WP Super Cache або LiteSpeed Cache).
- Кешування браузера: Налаштуйте файл
.htaccess, щоб вказати браузерам, як довго зберігати статичні файли (зображення, CSS, JS). - Gzip/Brotli: Активуйте стиснення на стороні сервера (зазвичай через налаштування хостингу або
.htaccess), що зменшує розмір файлів HTML, CSS і JS у 3-7 разів.
Використання CDN (Content Delivery Network)
CDN — це мережа серверів, розподілених по всьому світу, які зберігають копії вашого статичного контенту. Це прискорює доставку контенту користувачам, оскільки вони отримують його від найближчого сервера, що суттєво зменшує LCP.
Етап 2: Оптимізація Фронтенду (Код та Ресурси)
Ці кроки безпосередньо спрямовані на покращення метрик LCP та INP.
Мініфікація CSS та JavaScript (Видалення Render-Blocking)
“Render-blocking” (блокуючий відображення) CSS та JS-код змушує браузер чекати, перш ніж почати малювати сторінку, негативно впливаючи на LCP.
- Мініфікація (Minify): Видаліть зайві пробіли, коментарі та переноси рядків у CSS/JS (плагін Autoptimize або WP Rocket).
- Видалення блокування:
- Inlining Critical CSS: Вбудуйте невелику кількість CSS, необхідного для відображення верхньої частини екрана (Above-the-fold), безпосередньо в
<head>HTML-файлу. - Async/Defer: Решту JS-скриптів завантажуйте асинхронно (
asyncабоdefer), щоб вони не блокували основне відображення сторінки.
- Inlining Critical CSS: Вбудуйте невелику кількість CSS, необхідного для відображення верхньої частини екрана (Above-the-fold), безпосередньо в
Ледаче завантаження (Lazy Loading) зображень та відео
Lazy Loading гарантує, що зображення та відео, які знаходяться “нижче лінії згину” (тобто невидимі при першому завантаженні екрана), будуть завантажуватися лише тоді, коли користувач прокручує сторінку до них. Це значно прискорює LCP.
Preload і Preconnect для критичних ресурсів
Атрибут <link rel="preload"> дозволяє повідомити браузеру заздалегідь, які ресурси (наприклад, головне зображення чи основний шрифт) знадобляться найближчим часом, щоб він почав їх завантажувати раніше — це напряму скорочує LCP. <link rel="preconnect"> робить те саме для зовнішніх доменів (шрифти Google Fonts, CDN, скрипти аналітики), заздалегідь встановлюючи з’єднання, щоб не втрачати час на DNS-пошук і рукостискання під час фактичного запиту.
Оптимізація Шрифтів та Зображень
- Зображення:
- Використовуйте сучасні формати, такі як WebP (плагіни, наприклад, Smush або Imagify, можуть автоматично конвертувати та стискати).
- Вказуйте атрибути
widthтаheightдля зображень, щоб уникнути CLS.
- Шрифти: Використовуйте
font-display: swapу CSS, щоб браузер тимчасово відображав стандартний шрифт системи, доки завантажується основний шрифт (усуває блокування відображення).
Додатково варто налаштувати адаптивні зображення через атрибут srcset, щоб мобільні пристрої не завантажували ту саму важку версію картинки, що й десктоп. Формат AVIF дає ще менший розмір файлу, ніж WebP, за схожої якості, але підтримка в старих браузерах гірша — тому WebP залишається безпечнішим базовим вибором для більшості сайтів.
Етап 3: Чистота WordPress та База даних
З часом WordPress засмічується, що уповільнює обробку запитів і погіршує INP.
Вибір легкої теми та плагінів
Важка або погано закодована тема є головною причиною низької швидкості. Обирайте оптимізовані теми (GeneratePress, Astra, Hello Elementor).
- Аудит плагінів: Видаліть усі невикористовувані або застарілі плагіни. Чим менше плагінів, тим менше коду потрібно обробляти.
- Завантаження скриптів за потребою: Використовуйте інструменти для вимкнення CSS/JS певних плагінів на тих сторінках, де вони не потрібні.
Оптимізація бази даних
База даних WordPress зберігає багато “сміття”: ревізії сторінок, спам-коментарі, тимчасові дані.
- Регулярно очищайте базу даних (плагіни WP-Optimize або WP Rocket). Це зменшує час відгуку сервера, покращуючи загальну швидкість.
Типові помилки на WordPress, які найбільше шкодять PageSpeed
Навіть після хорошого хостингу і кешування бал може лишатися низьким через кілька типових прорахунків саме на рівні теми й контенту:
- Важкі слайдери та каруселі на головній сторінці, які підвантажують кілька бібліотек JavaScript одночасно;
- Конструктори сторінок (Elementor, Divi, WPBakery) без додаткової оптимізації — генерують надлишковий CSS/JS навіть для простих сторінок;
- Завантаження зображень в оригінальному розмірі камери чи скріншота замість версій, стиснутих під конкретний блок сайту;
- Підключення кількох шрифтів і наборів іконок одночасно, коли реально використовується лише одна-дві гарнітури;
- Сторонні скрипти (чати, аналітика, віджети соцмереж), які блокують відображення сторінки, поки повністю не завантажаться.
Core Web Vitals — офіційний сигнал ранжування Google, тому робота над швидкістю сайту напряму перетинається з SEO-просуванням: повільний сайт може втрачати позиції навіть за наявності якісного контенту.
Резюме: Ваш чек-ліст для PageSpeed
Щоб досягти високих оцінок у Google PageSpeed (90+), регулярно виконуйте такі кроки:
- Хостинг: Переконайтеся, що ви використовуєте швидку версію PHP та потужний хостинг.
- Кешування: Встановіть єдиний, якісний плагін для кешування (WP Rocket, LiteSpeed Cache).
- Зображення/Медіа: Стискайте, використовуйте WebP та налаштуйте Lazy Loading.
- Код: Мініфікуйте CSS/JS та усуньте ресурси, що блокують відображення.
- Тестування: Після кожної зміни перевіряйте сайт у Google PageSpeed Insights та перевіряйте показники Core Web Vitals у Google Search Console.
Оптимізація PageSpeed — не разова дія, а процес: кожен новий плагін, оновлення теми чи додане зображення може знову підняти LCP або CLS. Тому варто раз на місяць-два повертатися до Search Console і PageSpeed Insights, щоб вчасно помітити регрес і виправити його, поки він не вплинув на позиції в пошуку.
Часті питання
Скільки часу потрібно, щоб довести сайт на WordPress до 90+ балів у PageSpeed?
Точний термін залежить від початкового стану сайту: якщо проблема лише в кешуванні й розмірі зображень, результат можна побачити за кілька годин, а якщо винна важка тема чи конструктор сторінок — знадобиться глибший технічний аудит і, можливо, часткова переробка шаблону.
Чи можна оптимізувати WordPress самостійно, без розробника?
Базові кроки — встановлення плагіна кешування, стиснення зображень, підключення CDN — цілком можна зробити самостійно за інструкціями плагінів. А ось inline critical CSS, роботу з render-blocking ресурсами та глибоке очищення коду теми зазвичай робить розробник, бо необережне втручання може зламати вигляд сайту.
Чому оцінка PageSpeed на мобільному нижче, ніж на десктопі?
Google тестує мобільну версію на емуляції повільнішого процесора й мережі, тому ті самі ресурси (JS, шрифти, зображення) обробляються довше. Мобільний результат — реалістичніший показник для більшості сайтів, бо саме з телефонів приходить основна частина трафіку.
Чи впливає PageSpeed напряму на позиції сайту в Google?
Google офіційно підтверджує Core Web Vitals як один із факторів ранжування, хоча і не найважливіший — якісний релевантний контент усе ще первинний. Але за інших рівних умов швидший сайт із кращим UX має перевагу, особливо в конкурентних нішах.
Який плагін кешування обрати для WordPress?
WP Rocket — платний, але простий у налаштуванні варіант «все в одному». LiteSpeed Cache — безкоштовний і дуже ефективний, якщо хостинг працює на сервері LiteSpeed. WP Super Cache — простіший безкоштовний варіант для базових потреб. Конкретний вибір залежить від хостингу та бюджету.
Чим GTmetrix відрізняється від Google PageSpeed Insights?
PageSpeed Insights показує офіційну оцінку Google і його польові дані Chrome UX Report — саме на неї варто орієнтуватись для SEO. GTmetrix дає детальніший waterfall-звіт про кожен запит і дозволяє тестувати з різних локацій та браузерів, тому зручний для глибшої технічної діагностики, а не для фінальної оцінки.
