Поділитись:
4.9/5 - (267 голосів)

Замітки в телефоні (ніч, WordPress, WoodMart, WP Rocket, PageSpeed і трохи пива)
22:31
Зайшов на мобільний PageSpeed. 56/100.
Звісно. Чудово. Люблю біль.
22:38
Питаю ШІ: що робити з WoodMart?
Він впевнено відповідає:
— “Увімкни Galaxy Mode у WP Rocket → Performance → Experimental”.
Я: де? Немає ж такого.
— “Є, он там, поруч з Instant Warp”.
Я дивлюсь на монітор, монітор дивиться на мене. Пиво дивиться на всіх нас трьох.
22:47
Ок, ідемо іншим шляхом.
ШІ каже: “У WoodMart вимкни Mega Defer Styles в Theme Settings”.
Вигадана кнопка №2 за вечір.
23:02
Вирішив «піти по серйозці»:
вставити такий собі “легенький” код у functions.php, який “автоматично видаляє весь невикористаний CSS, що суперечить гідності твого сайту”.
ШІ додає: “100% працює.”
…
Після “оновити файл” адмінка дихає як астматик на підйомі.
Сайт живий, але йому боляче. Мені теж.
23:19
В голові геройський голос: “давай напишемо свій плагін — rocket-boost-super-critical”.
Файл створився. Активував.
Плагін нічого не робить, але звучить грізно. Зате сайт став гірше вантажитись.
Магія.
23:33
Повертаю все назад.
ШІ каже: “О, ти молодець! Так і треба було.”
Дякую, капітан Очевидність.
23:48
WoodMart: вмикаю “Disable Gutenberg CSS”, “Disable emoji”, “Load Google Fonts Locally”…
ШІ каже: “Обов’язково увімкни HyperBoost Ajax Killer”.
Витираю сльозу. Цього не існує.
00:06
WP Rocket.
— “Увімкни Remove Unused CSS.”
Вмикаю.
— “І ще Delay JS”.
Вмикаю.
— “І Preload всім, все і всюди.”
Не вмикаю. Я ще люблю життя.
00:21
CLS стрибає через WoodMart-слайдер і product swatches.
ШІ: “Просто додай min-height: auto-important;”
…
auto-important звучить, ніби шаманське закляття — але, на жаль, не CSS.
00:37
Придумав свій чекліст із тригером:
— Якщо пункт звучить як “космічний реджім” — не чіпай.
— Якщо ШІ дає 100% гарантію — не чіпай ×2.
— Якщо хочеш вставити код у functions.php о 00:37 — іди по пиво.
00:52
Роблю нормальні речі, які не модні, але працюють:
— вимикаю непотрібні віджети WoodMart (ajax search live, якщо не треба)
— прибираю карусель, ставлю статичну картинку для мобільного героя
— в WP Rocket додаю виняток на jquery.min.js, wc-cart-fragments, woodmart-theme.min.js від Delay JS
— збираю критичний CSS сторінок (не весь сайт одним ножем)
— шрифти локально, font-display: swap
— preload на головний шрифт і головне зображення LCP
01:11
Мобільний PageSpeed підскочив до 84.
ШІ пише: “Я ж казав.”
Ти нічого не казав, друже. Я просто перестав тобі вірити.
01:28
Я дивлюсь у вікно — місяць, Lexus, тиша.
І думаю: інколи найкраща оптимізація — це вимкнути неіснуючі галочки і повернутись до того, що реально впливає.
01:44
Завтра допиляю LCP на картинці героя, і буде 90+.
Сьогодні — Heineken і сон.
ШІ, не пиши мені до ранку.

Пройшовши через всі ці муки, неіснуючі режими та поради ШІ, я зрозумів одне: працюють тільки базові, перевірені речі. Ось мій фінальний, перевірений план оптимізації WoodMart і WP Rocket, який вивів мене з “болота” 56 балів до чистої зони PageSpeed. Без магії та “Hyper Turbo Mode

Чому PageSpeed кульгає на мобільному у WoodMart

  • Занадто важкий герой (слайдер, відео, великі зображення) → поганий LCP.
  • Дефолтні шрифти Google з блокуючим завантаженням → FOIT/довге відображення.
  • JS від WooCommerce/тематики, що заважає кешуванню та викликає затримки.
  • CLS через слайдери, каруселі, відсутні width/height або aspect-ratio.

План оптимізації (WoodMart + WP Rocket) — коротко і по-діловому

1) LCP: зробіть перший екран легким

  • На мобільному — статичний банер замість слайдера (серйозно, це – половина успіху).
  • Фіксуйте висоту контейнера героя: мінімум ~min-height: 60vh; або задайте aspect-ratio.
  • Зображення героя у WebP/AVIF, без “гігантів”: 900–1200px по довгій стороні для мобільного.
  • Додайте прелоад на LCP-зображення (тільки одне, головне):
    <link rel="preload" as="image" href="/path/hero.webp" imagesrcset="/path/hero-900.webp 900w, /path/hero-1200.webp 1200w" imagesizes="(max-width: 600px) 100vw, 600px">

2) WP Rocket: безпечні настройки, які дають +бал

  • Cache: мобільний кеш увімкнено.
  • File Optimization → CSS: Minify. Remove Unused CSS — тестуйте. Якщо щось ламає, краще дати критичний CSS вручну (нижче приклад).
  • File Optimization → JS: Minify + Delay JS. Додайте винятки (щоб не ламати кошик/тему):
    • jquery(.min)?.js
    • wc-cart-fragments
    • woodmart-theme(.min)?.js
    • скрипти платежів/аналітики, що мають працювати одразу
  • Media: Lazyload для зображень і iframe. Не лени LCP-картинку.

3) WoodMart: вимкніть зайве, візьміть корисне

  • Performance: локальне завантаження Google Fonts, font-display: swap, мінімізуйте кількість начерків (2–3 ваги).
  • Вимкніть модулі, якими не користуєтесь (live search, wishlist/compare, heavy каруселі).
  • Для мобільного хедера — менше елементів та анімацій.

4) Шрифти: швидко й без “мигання”

  • Покладіть woff2 локально й додайте прелоад на основний файл:
    <link rel="preload" as="font" href="/fonts/Inter-regular.woff2" type="font/woff2" crossorigin>
  • CSS-підключення з font-display: swap (щоб текст не зникав):
    @font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

5) WooCommerce: дрібниці, що економлять секунди

  • Додайте виняток Delay JS для wc-cart-fragments (кошик і міні-корзина дихатимуть рівно).
  • Вимкніть фічі, які не потрібні саме вам (quick view, порівняння, зайві віджети).

6) Зображення, CDN і lazyload

  • Конвертуйте у WebP/AVIF, контролюйте розміри (жодних 2–5 МБ на мобілку).
  • Перевірте srcset/sizes, щоб телефон не тягнув десктопні картинки.
  • Lazyload для всього, крім LCP. Для банерів/плейсхолдерів додайте прозорі заглушки, щоб уникати стрибків.

7) Анти-CLS: стабільна верстка без стрибків

  • Для зображень — обов’язково width/height або aspect-ratio.
  • Слайдери/каруселі: задайте висоту контейнера, вимкніть автоплей на мобільному.
  • Шрифти — тільки з swap і близьким за метрикою fallback.

8) Критичний CSS: точково, а не “ножем по всьому сайту”

Створіть короткий критичний CSS для головної (герой, хедер, перший екран) і додайте в <head>:

<style>
/* приклад мінімального критичного шару */
header{min-height:64px}
.hero{min-height:60vh; display:grid; place-items:center}
.hero h1{margin:0 0 .5rem}
.btn{display:inline-block; padding:.8rem 1.2rem}
</style>

Усе решта стилів може їхати асинхронно. Так ви рятуєте LCP і візуальну готовність.

9) Що точно не робити опівночі 🙂

  • Не вставляти неперевірені “чарівні” снипети у functions.php.
  • Не вмикати одночасно “Remove Unused CSS” + агресивні комбінації, якщо сайт великий і різнорідний.
  • Не вірити порадам про неіснуючі перемикачі в плагінах (так, ШІ інколи фантазує).

Малий контрольний список перед релізом

  • LCP на мобільному < 2.5 s на головних шаблонах (головна, категорія, картка товару).
  • CLS < 0.1 (статичні розміри, без “стрибаючих” каруселей).
  • Delay JS з винятками для критичних скриптів (jQuery, cart fragments, скрипти теми).
  • Шрифти локально + прелоад + swap.
  • Лінивка зображень працює, але LCP — не лінивимо.

Якщо коротко по-людськи: менше магії — більше контролю. Спокійно прибираємо все зайве, фіксуємо перший екран і даємо сторінці “задихати” без важких скриптів. Так, інколи хочеться натиснути неіснуючу галочку “Hyper Turbo Mode”, але краще ще раз перевірити LCP і винятки Delay JS.

Потрібна рука поруч? Якщо важко з усім цим розібратись, просто звернись на безкоштовну консультацію — там розкажуть детально, а за бажанням і зроблять все за тебе, щоб сайт реально літав:
https://speedwppro.com/uk/bezplatnyi-audyt/