EN Швидкість завантаження сайту є одним із найважливіших факторів, що впливають на користувацький досвід (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 викликає роздратування, коли елементи (наприклад, кнопки) “стрибають”, змушуючи користувача клікнути не туди.
Етап 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.
Оптимізація Шрифтів та Зображень
- Зображення:
- Використовуйте сучасні формати, такі як WebP (плагіни, наприклад, Smush або Imagify, можуть автоматично конвертувати та стискати).
- Вказуйте атрибути
widthтаheightдля зображень, щоб уникнути CLS.
- Шрифти: Використовуйте
font-display: swapу CSS, щоб браузер тимчасово відображав стандартний шрифт системи, доки завантажується основний шрифт (усуває блокування відображення).
Етап 3: Чистота WordPress та База даних
З часом WordPress засмічується, що уповільнює обробку запитів і погіршує INP.
Вибір легкої теми та плагінів
Важка або погано закодована тема є головною причиною низької швидкості. Обирайте оптимізовані теми (GeneratePress, Astra, Hello Elementor).
- Аудит плагінів: Видаліть усі невикористовувані або застарілі плагіни. Чим менше плагінів, тим менше коду потрібно обробляти.
- Завантаження скриптів за потребою: Використовуйте інструменти для вимкнення CSS/JS певних плагінів на тих сторінках, де вони не потрібні.
Оптимізація бази даних
База даних WordPress зберігає багато “сміття”: ревізії сторінок, спам-коментарі, тимчасові дані.
- Регулярно очищайте базу даних (плагіни WP-Optimize або WP Rocket). Це зменшує час відгуку сервера, покращуючи загальну швидкість.
Резюме: Ваш чек-ліст для PageSpeed
Щоб досягти високих оцінок у Google PageSpeed (90+), регулярно виконуйте такі кроки:
- Хостинг: Переконайтеся, що ви використовуєте швидку версію PHP та потужний хостинг.
- Кешування: Встановіть єдиний, якісний плагін для кешування (WP Rocket, LiteSpeed Cache).
- Зображення/Медіа: Стискайте, використовуйте WebP та налаштуйте Lazy Loading.
- Код: Мініфікуйте CSS/JS та усуньте ресурси, що блокують відображення.
- Тестування: Після кожної зміни перевіряйте сайт у Google PageSpeed Insights та перевіряйте показники Core Web Vitals у Google Search Console.
