Настройка WPBakery: производительность, кастомные элементы, миграция

Клиент приходит с уже купленной премиум-темой, внутри которой — WPBakery Page Builder. Требуется настроить конструктор так, чтобы контент-менеджеры могли самостоятельно редактировать страницы, не ломая вёрстку. Без правильной настройки плагин грузит сотни килобайтов CSS и JS на каждой странице, а кастомные элементы приходится писать с нуля. Мы решаем эти проблемы комплексно. Закажите аудит WPBakery — это займёт один день.

Проблемы, которые решаем

Производительность. WPBakery по умолчанию подключает около 130 КБ CSS и 200 КБ JS на всех страницах, даже если конструктор не использовался. Для сайта с посещаемостью от 10 000 визитов в сутки это даёт прирост TTFB на 0,5 с. Оптимизация ассетов — первый шаг к Core Web Vitals.

Кастомные элементы. Типовой набор виджетов не покрывает бизнес-логику. Например, нужно вывести карусель отзывов с фильтрацией или форму бронирования. Приходится писать свои элементы через 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 секунд, а CLS снизился на 60%.

Почему миграция с WPBakery на Gutenberg проблематична?

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

Как оптимизировать ассеты WPBakery?

Основная проблема — WPBakery подключает свои стили и скрипты на всех страницах, даже если конструктор не использовался. Решение: используйте wp_dequeue_style и wp_dequeue_script для отключения ассетов на страницах без шорткодов. Дополнительно включите кэширование через Redis или CDN. Это снижает TTFB на 30–50%.

Процесс работы

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');