WPBakery Setup: Performance, Custom Elements, Migration

A client comes with a premium theme already purchased, which includes WPBakery Page Builder. The requirement is to configure the builder so that content managers can independently edit pages without breaking the layout. Without proper setup, the plugin loads hundreds of kilobytes of CSS and JS on every page, and custom elements have to be written from scratch. We solve these problems comprehensively. Request a WPBakery audit — it takes one day.

Problems We Solve

Performance. By default, WPBakery enqueues about 130 KB of CSS and 200 KB of JS on all pages, even if the builder is not used. For a site with 10,000+ visits per day, this adds 0.5s to TTFB. Asset optimization is the first step toward Core Web Vitals.

Custom Elements. The standard widget set does not cover business logic. For example, you need a testimonial carousel with filtering or a booking form. We have to write custom elements using vc_map and shortcodes.

Access Control. When 5+ content managers work on the site, it's important to restrict who can use raw HTML or change global styles. Role Manager handles this, but fine-tuning requires code.

Migration Trap. WPBakery stores content as shortcodes in post_content. When the plugin is deactivated, pages become unreadable text. Migration to Gutenberg or Elementor is manual work that we perform without data loss.

How We Configured WPBakery for an Online Store: A Case Study from Our Practice

In our practice, we had a case: configure WPBakery for a WordPress + WooCommerce store in three days. Needed custom product cards, fast frontend, and editable by three managers.

Stack: latest stable WordPress, PHP 8.x, WPBakery, Redis for object cache. Steps:

1. Dequeue unnecessary assets using wp_dequeue_style only on pages with shortcodes.
2. Created three custom elements: "Product of the Day" (extended block), "Category Filter", and "Testimonial Block with Stars". Each element was described via vc_map, with icons and fields.
3. Configured Role Manager: managers can only use specific elements, administrators have full access.
4. Wrote custom CSS for grid layout, applied in Custom CSS in plugin settings.
5. Conducted load test: page load time dropped from 3.2s to 1.1s, saving the client about 30,000 rubles per year on hosting. LCP improved from 4.2s to 1.8s, and CLS decreased by 60%.

Why Migration from WPBakery to Gutenberg Is Problematic?

WPBakery encodes content in shortcodes, while Gutenberg uses blocks with JSON comments. No automatic converter preserves all styles. We apply a hybrid approach: first export content via do_shortcode to clean HTML, then manually split into Gutenberg blocks. For large projects (100+ pages), this takes at least two weeks, but the result is predictable.

How to Optimize WPBakery Assets?

The main issue is that WPBakery enqueues its styles and scripts on all pages, even if the builder is not used. Solution: use wp_dequeue_style and wp_dequeue_script to disable assets on pages without shortcodes. Additionally, enable caching via Redis or CDN. This reduces TTFB by 30–50%.

Process of Work

1. Analysis. Review current WPBakery configuration, installed add-ons, page types. Map shortcode usage.
2. Design. Design custom elements, plan grids and styles. Approve layouts with client.
3. Implementation. Write element code, configure Role Manager, optimize assets. Integrate with themes and plugins.
4. Testing. Check on different devices, measure Core Web Vitals, test access rights.
5. Deployment and Handover. Deploy to production, train editors, deliver documentation.

What's Included

• Full audit of current WPBakery configuration
• Frontend asset optimization (CSS/JS)
• Development of up to 5 custom elements
• Role Manager setup
• Content conversion during migration (up to 50 pages)
• Documentation on editor usage
• One-hour consultation for editors

Estimated Timeline

From 2 to 10 working days depending on page count and custom element complexity. Cost is calculated individually after audit.

Comparison Table: Editing Modes

Backend Editor loads 5–10 times faster than Frontend Editor, critical for frequent editing.

Comparison Table: Migration Approaches

Typical Mistakes and Checklist

• [ ] Assets not dequeued on pages without shortcodes
• [ ] Role Manager not configured — all have access to raw HTML
• [ ] Outdated add-ons used, slowing down the site
• [ ] Content not backed up before migration

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