Здоров’я колегам по небезпечному бізнесу! 👋

Звісно, ми всі збираємо на свою Ламбу (ну або на Німця, на крайняк), і зливати по $20 на місяць на платні плагіни — це не для видатних бізнесменів. Тож ловіть наш гайд із прискорення сайта: знадобиться лише ваш дорогоцінний час і чималий розум.

Одразу до діла. Гальмує сайт — Google тебе вниз, відвідувачі розбігаються, бабло повз касу. Літає сайт — вище у видачі, більше народу, більше грошей. Просто, як два пальці.

У мережі повно «гуру», які впарюють платний плагін за $20 на місяць і горлають: «дивіться, було 45 — стало 100!». Відкрию секрет: те саме вичавлюється безкоштовно. Платний плагін просто гарно загорнув те, що й так усі вміють. Зараз покажу що.

Погнали. 🚀

Спершу — пруфи (щось справжнє, а не інфо-фуфло)

Відкриваємо PageSpeed Insights, кидаємо URL, тиснемо «Аналізувати». Дивимось одразу мобільну вкладку — Google усе міряє по мобілці, та й народ до тебе переважно з телефона лізе, а не з компа.

А тепер — те, про що гуру мовчать: 100 балів — це лабораторний тест, його легко натягнути. Реальна швидкість для дихаючого гуманоїда, твого майбутнього клієнта (Core Web Vitals у полі), відсотків на 70 залежить від хостингу і TTFB — наскільки швидко сервер взагалі віддає перший байт. Начепиш хоч десять плагінів — бал виросте, а на дохлому хостингу сайт усе одно гальмуватиме. Тому починаємо з бази.

Крок 0. База — хостинг і PHP

Найбільш недооцінений безкоштовний буст — версія PHP. Купа сайтів досі сидить на 7.4 (а хтось і на 5.6, привіт із могили), а це у 2-3 рази повільніше за свіжий.

Ліземо в панель хостингу → «Версія PHP» → ставимо 8.1, 8.2 або 8.3. Безкоштовно і відразу копняк до швидкості.

Перед зміною — бекап. Крякне якийсь древній плагін на PHP 8 — просто відкотишся назад. Але у 95% випадків усе ок.

Крок 1. Кеш — головний по швидкості 👑

Це взагалі номер один. Без кешу WordPress на кожен клік наново ліпить сторінку з бази — тупо й повільно. Кеш зліпив один раз і віддає готове.

Безкоштовні варіанти, за сервером:

• LiteSpeed Cache — якщо хостинг на LiteSpeed/OpenLiteSpeed (спитай у саппорта). Найкращий безкоштовний, без базару. Ще й картинки з мініфікацією вміє.
• W3 Total Cache або WP Super Cache — якщо сервер Apache/nginx.
• WP Fastest Cache — якщо хочеш «поставив і забув».

Втикаємо, вмикаємо Page Cache, чистимо кеш, перезаміряємо. Тільки за це бал часто стрибає на 20-30 пунктів.

Крок 2. Картинки — головні гладуни 🐷

90% ваги сайта — це нестиснуті картинки. Лікуємо трьома рухами:

а) Тиснемо у WebP/AVIF. Ці формати важать на 30-70% менше за JPEG/PNG за тієї ж якості. Безкоштовні плагіни: ShortPixel, Imagify, Converter for Media — у всіх безкоштовна квота на місяць, дрібному сайту за очі.

б) Стиснення. Ті ж плагіни під час завантаження давлять вагу — на око й не помітиш.

в) Lazy-load. Картинки внизу вантажаться не одразу, а коли юзер до них доскролив. У WordPress це вже вбудовано (loading="lazy"), але глянь, щоб тема його не вирубила.

І дрібниця, яку всі забивають — завжди прописуй розміри картинки (width і height), інакше сторінка «стрибає» під час завантаження і роняє метрику CLS:

<img src="cat.webp" width="800" height="600" alt="кіт розробника" loading="lazy">

Крок 3. Мініфікація CSS/JS — ріжемо гальма

Браузер залипає, поки тягне й розбирає купу дрібних CSS/JS-файлів. Рішення — стиснути і склеїти їх. Безкоштовний народний герой тут — Autoptimize.

Ставимо, заходимо в налаштування, вмикаємо галочки:

• ✅ Optimize JavaScript Code
• ✅ Optimize CSS Code
• ✅ Aggregate (склейка файлів)
• ✅ Defer non-critical JS — відкладене завантаження скриптів

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

Хочеш ще жорсткіше — Critical CSS (стилі першого екрана пхаємо в рядок, решту вантажимо потім). Autoptimize вміє, плюс є безкоштовні генератори.

Крок 4. Шрифти — базова болячка ще зі шкільних часів

Google Fonts, підключені прямо із серверів Google, — це зайві запити на чужий домен і гальмо з відмальовуванням тексту. Робимо два рухи:

а) Тягнемо шрифти до себе. Качаємо шрифт на свій сервер. Безкоштовний плагін OMGF робить це в один клік.

б) font-display: swap — щоб текст показався одразу звичайним шрифтом, а гарний підтягнувся слідом (а не «біла діра» замість букв):

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

в) Preload головного шрифта, щоб браузер схопив його раніше:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Крок 5. Чистимо базу 🧹

За роки база WordPress перетворюється на смітник: сотні чернеток-ревізій, спам-коменти, хвости видалених плагінів. Безкоштовний WP-Optimize вимітає це за пару кліків.

А щоб ревізії не плодилися без кінця — кинь у wp-config.php:

define('WP_POST_REVISIONS', 5);   // тримаємо максимум 5 ревізій на запис
define('EMPTY_TRASH_DAYS', 7);    // чистимо кошик раз на тиждень

Крок 6. Підчищаємо зайве

Кожен плагін — плюс до ваги і мінус до швидкості. Пройдись по списку і чесно спитай себе: «я цим узагалі користуюся?». Що стоїть «про всяк випадок» — вирубай і зноси.

Те саме з темою: важкий шаблон із сотнею налаштувань гальмує. Легкі безкоштовні теми-ракети — GeneratePress, Astra, Kadence або блочні теми. (Ми взагалі на наших проєктах любимо не WordPress, а швидкі сайти на Astro — але це вже інша пісня 😏.)

Крок 7. Cloudflare — безкоштовний CDN і броня

Тема для нас зараз особливо болюча. В Україні настали нелегкі часи: сайти й сервери регулярно ловлять DDoS-атаки — то конкуренти пустують, то «гості» з півночі кладуть хостинги пачками. І ось тут безкоштовний Cloudflare — реально крутезне рішення: він приймає удар на себе й відсіює ботів і сміттєвий трафік ще на підльоті, до того як вони дістануться твого сервера. Тобто це не лише про швидкість — це ще й про те, щоб сайт банально встояв і не ліг у найгірший момент.

Реєструємо сайт у Cloudflare (безкоштовний тариф) — і отримуємо CDN (контент роздається із серверів по всьому світу, ближче до юзера), стиснення Brotli, HTTP/3 і захист від ботів на додачу.

Що ввімкнути безкоштовно: ✅ Brotli, ✅ HTTP/3 (QUIC), ✅ кеш статики.

А ось авто-мініфікацію JS/CSS у самому Cloudflare вмикати не треба — вони її випиляли ще у 2024-му. Мініфікацію лишаємо на Autoptimize (Крок 3).

Крок 8. Дрібниці, що дотискають бал у зелену зону

Пара рядків у functions.php теми (краще — у дочірній):

// Вирубаємо емодзі-скрипт WordPress (зайвий запит на кожній сторінці)
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

І preload LCP-картинки — найжирнішого елемента першого екрана (зазвичай банер чи лого):

<link rel="preload" as="image" href="/images/hero.webp">

Плюс preconnect до зовнішніх доменів (лічильники, віджети), щоб конект піднімався заздалегідь:

<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>

А «серцебиття» адмінки (WP Heartbeat жере ресурси) простіше приструнити безкоштовним плагіном Heartbeat Control — руками не лізь.

Замір «після» 🎉

Ганяємо PageSpeed ще раз. І ось воно: з 45 у зелену зону. Нуль витрачених гривень, тільки час і той самий чималий розум.

Чек-лист «розжени сам» ✅

• PHP оновлено до 8.1+
• Стоїть плагін кешування (Page Cache увімкнено)
• Картинки у WebP + стиснуті + lazy-load
• CSS/JS склеєні й мініфіковані (Autoptimize)
• Шрифти лежать у себе + font-display: swap
• База почищена, ревізії обрізані
• Зайві плагіни знесені, тема легка
• Підключено Cloudflare (Brotli + HTTP/3)
• Емодзі вирубані, preload LCP налаштовано

А ми що, не на WordPress сидимо? 😅

Сидимо, ще й як. Сайт, який ти прямо зараз читаєш — goodweb.ua крутиться на тому ж WordPress. Тож усе, що вище, ми не з буржунета нишком переписали, а обкатали на власній шкурі, ось тут. Не віриш — тисни F12 → вкладку Network → онови сторінку і сам глянь, як воно шурхотить. Якби наш сайт гальмував — гріш ціна була б цьому гайду, погодься. 😎

А якщо поратися ліньки?

Загалом, пацани. Усе вище реально зробити самому за вечір із чашкою кави. Але якщо свій час тобі дорожчий за нерви на воюючі плагіни, мініфікацію, що ламається, і примхливий critical CSS — ми в GoodWeb розганяємо сайти під ключ: замір, оптимізація, гарантія зелених Core Web Vitals — без твоєї участі.

А ні — забирай гайд і вперед, цеховики. Швидкість зайвою не буває. 😎

Кидайте в коменти свій бал «до/після» — гляну, у кого як вийшло.