Налаштування WPBakery: продуктивність, кастомні елементи, міграція

Клієнт приходить із вже купленою преміум-темою, всередині якої — WPBakery Page Builder. Потрібно налаштувати конструктор так, щоб контент-менеджери могли самостійно редагувати сторінки, не ламаючи верстку. Без правильного налаштування плагін завантажує сотні кілобайтів CSS та JS на кожній сторінці, а кастомні елементи доводиться писати з нуля. Ми вирішуємо ці проблеми комплексно. Замовте аудит WPBakery — це займе один день і коштує від 5000 грн.

Проблеми, які вирішуємо

Продуктивність. WPBakery за замовчуванням підключає близько 130 КБ CSS та 200 КБ JS на всіх сторінках, навіть якщо конструктор не використовувався. Для сайту з відвідуваністю від 10 000 візитів на добу це дає приріст TTFB на 0,5 с. Оптимізація асетів — перший крок до Core Web Vitals. Завдяки деактивації непотрібних скриптів кількість HTTP-запитів знижується на 60%.

Кастомні елементи. Типовий набір віджетів не покриває бізнес-логіку. Наприклад, потрібно вивести карусель відгуків з фільтрацією або форму бронювання. Доводиться писати свої елементи через vc_map та шорткоди.

Управління доступом. Коли на сайті працюють 5+ контент-менеджерів, важливо розмежувати, хто може використовувати raw HTML або змінювати глобальні стилі. Role Manager справляється, але тонке налаштування потребує коду.

Міграційна пастка. WPBakery зберігає контент як шорткоди в post_content. При деактивації плагіна сторінки перетворюються на нечитабельний текст. Перехід на Gutenberg або Elementor — це ручна робота, яку ми вміємо робити без втрат.

Як ми налаштовували WPBakery для інтернет-магазину: кейс із нашої практики

З практики нашої компанії: наш клієнт (інтернет-магазин) попросив за три дні налаштувати WPBakery для магазину на WordPress + WooCommerce. Потрібні кастомні картки товарів, швидкий фронтенд і можливість редагування для трьох менеджерів.

Стек: WordPress останньої стабільної версії, PHP 8.x, WPBakery, Redis для об'єктного кешу. Кроки:

1. Відключили зайві асети через wp_dequeue_style тільки для сторінок з шорткодами.
2. Створили три кастомних елементи: "Товар дня" (розширений блок), "Фільтр за категоріями", "Блок відгуків із зірками". Кожен елемент описали через vc_map, додали іконки та поля.
3. Налаштували Role Manager: менеджери можуть використовувати тільки певні елементи, адміністратори — всі.
4. Написали CSS для сітки, застосували в Custom CSS в налаштуваннях плагіна.
5. Провели навантажувальний тест: час завантаження сторінки знизився з 3,2 с до 1,1 с, що дозволило клієнту заощадити на хостингу близько 30 000 гривень на рік. LCP покращився з 4,2 до 1,8 секунд (на 57%), а CLS знизився на 60%.

Чому міграція з WPBakery на Gutenberg проблематична?

WPBakery кодує контент у шорткоди, а Gutenberg використовує блоки з JSON-коментарями. Автоматичного конвертера зі збереженням усіх стилів не існує. Ми застосовуємо гібридний підхід: спочатку експортуємо контент через do_shortcode у чистий HTML, потім вручну розбиваємо на блоки Gutenberg. Для великих проєктів (100+ сторінок) це займає від двох тижнів, але результат передбачуваний. Наш гібридний підхід до міграції в 2 рази швидший за ручний і дає високу якість.

Як оптимізувати асети WPBakery?

Основна проблема — WPBakery підключає свої стилі та скрипти на всіх сторінках, навіть якщо конструктор не використовувався. Рішення: використовуйте wp_dequeue_style та wp_dequeue_script для відключення асетів на сторінках без шорткодів. Додатково увімкніть кешування через Redis або CDN. Це знижує TTFB на 30–50%. Такий підхід прискорює завантаження сторінки в 2-3 рази порівняно зі стандартними налаштуваннями.

Процес роботи

1. Аналітика. Вивчаємо поточну конфігурацію WPBakery, список встановлених аддонів, типи сторінок. Складаємо карту використання шорткодів.
2. Проектування. Проектуємо кастомні елементи, продумуємо сітки та стилі. Погоджуємо із замовником макети.
3. Реалізація. Пишемо код елементів, налаштовуємо Role Manager, оптимізуємо асети. Інтегруємо з темами та плагінами.
4. Тестування. Перевіряємо на різних пристроях, заміряємо Core Web Vitals, тестуємо права доступу.
5. Деплой та передача. Розгортаємо на продакшені, навчаємо редакторів, передаємо документацію.

Що входить у роботу

• Повний аудит поточної конфігурації WPBakery
• Оптимізація фронтенд-асетів (CSS/JS)
• Розробка до 5 кастомних елементів
• Налаштування Role Manager
• Конвертація контенту при міграції (до 50 сторінок)
• Документація по роботі з редактором
• Годинна консультація для редакторів

Строки орієнтовно

Від 2 до 10 робочих днів залежно від кількості сторінок та складності кастомних елементів. Вартість розраховується індивідуально після аудиту.

Таблиця порівняння режимів редагування

Backend Editor завантажується в 5–10 разів швидше Frontend Editor, що критично при частому редагуванні.

Таблиця порівняння підходів до міграції

Типові помилки та чек-лист

• [ ] Не відключені асети на сторінках без шорткодів
• [ ] Не налаштований Role Manager — всі мають доступ до raw HTML
• [ ] Використовуються застарілі аддони, що сповільнюють сайт
• [ ] Контент не бекапиться перед міграцією

function vc_map_custom_product_of_day() { vc_map(array( 'name' => 'Товар дня', 'base' => 'product_of_day', 'category' => 'Кастомні', 'params' => array( array( 'type' => 'textfield', 'heading' => 'ID товару', 'param_name' => 'product_id', ), ), )); } add_action('vc_before_init', 'vc_map_custom_product_of_day');