Як прискорити сайт на WordPress: 10 кроків до 90+ на мобільному

Повільний сайт втрачає відвідувачів ще до того, як вони побачать вашу пропозицію. На телефоні люди рідко чекають довше кількох секунд, а Google враховує швидкість через показники Core Web Vitals. Добра новина: WordPress може бути дуже швидким. Мій власний сайт ytwebco.com має 99 балів PageSpeed на мобільному і 100 на десктопі, а інтернет-магазин доставки їжі на WooCommerce з понад 300 товарами — 93 і 98.

Нижче 10 кроків, які я проходжу на кожному проєкті, від найпростіших до тих, де вже потрібен розробник.

1. Спершу правильно заміряйте

Відкрийте PageSpeed Insights і перевірте мобільну версію: вона завжди гірша за десктоп і саме її Google бере за основу. Дивіться не лише на загальний бал, а на три показники Core Web Vitals:

• LCP — як швидко з’являється головний елемент першого екрана. Добре, якщо до 2,5 с.
• INP — як швидко сайт реагує на клік. Добре, якщо до 200 мс.
• CLS — чи «стрибає» сторінка під час завантаження. Добре, якщо до 0,1.

Заміряйте 2–3 ключові сторінки: головну, сторінку послуги чи категорії й картку товару. Запишіть цифри: без них ви не побачите, що реально допомогло.

2. Перевірте хостинг і версію PHP

Якщо сервер відповідає повільно (показник TTFB у звіті), ніякі плагіни не врятують. Мінімум, який варто мати: актуальна версія PHP 8.x, HTTP/2 або HTTP/3, стиснення gzip або brotli. Найдешевший спільний хостинг часто стає вузьким місцем для магазинів. Для них краще окремий сервер або хмарний тариф.

3. Увімкніть кешування

Кеш сторінок віддає готовий HTML замість того, щоб WordPress збирав сторінку заново для кожного відвідувача. Для магазинів і сайтів із кабінетами додайте об’єктний кеш (наприклад, Redis), щоб не навантажувати базу однаковими запитами.

4. Наведіть лад із зображеннями

Це найчастіша причина повільного першого екрана:

• конвертуйте фото у WebP або AVIF;
• завантажуйте зображення потрібного розміру, а не 4000 пікселів для блоку шириною 600;
• вмикайте ліниве завантаження для всього, що нижче першого екрана;
• а от головне зображення першого екрана, навпаки, не вантажте ліниво: йому потрібен пріоритет.

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

5. Підключіть шрифти правильно

Шрифти з Google Fonts тягнуть додаткові запити до сторонніх серверів. Краще завантажити їх на свій сайт у форматі woff2, лишити тільки потрібні накреслення й мови (кирилицю й латиницю), додати font-display: swap і попереднє завантаження для основного шрифту. Так текст з’являється одразу і не «стрибає», коли шрифт довантажився.

6. Приберіть зайві плагіни

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

7. Оптимізуйте CSS і JavaScript

• Відкладайте другорядні скрипти (defer), щоб вони не блокували відображення сторінки.
• Прибирайте невикористаний CSS.
• Виносьте критичні стилі першого екрана окремо, щоб він малювався одразу.
• Перевірте, чи потрібен сайту jQuery на фронтенді. Часто його тягне лише одна дрібна функція.

8. Подумайте про тему й конструктор

Важкі теми й конструктори сторінок додають багато коду, який вашому сайту не потрібен. Їх теж можна прискорити, але є межа. На моєму сайті тема написана з нуля, без конструктора: кожен блок вантажить лише власні стилі й скрипти. Звідси й 99 балів на мобільному. Якщо сайт уже на конструкторі, почніть із кроків 4–7 і 9: вони дають найбільший ефект без переробки.

9. Контролюйте сторонні скрипти

Аналітика, рекламні пікселі, онлайн-чати, віджети соцмереж часто важать більше за сам сайт. Підключайте їх через Google Tag Manager, вантажте лише після згоди на cookies, а важкі віджети (чати, карти, відео) — після першої взаємодії або коли користувач до них прокрутив.

10. Почистіть базу даних і запити

З часом у базі накопичуються ревізії записів, тимчасові дані плагінів і налаштування, які вантажаться на кожній сторінці. У WooCommerce окремо перевірте AJAX-запити кошика й фонові запити адмінки: на сайтах із великим трафіком саме вони часто навантажують сервер. Будь-яку чистку бази робіть лише після резервної копії.

Коли варто звернутися до розробника

Кроки 1–6 часто можна зробити самостійно. А от критичний CSS, відкладення скриптів, робота з базою й сервером ризиковані: одна помилка, і ламається кошик чи форма заявки. Якщо після базових кроків мобільний PageSpeed досі нижче 80, або сайт гальмує саме в години пік, причина зазвичай глибше, ніж плагіни.

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