, ,

How to Convert WPBakery (FKA Visual Composer) to Gutenberg


Due to Core Web Vitals, other than convert WPBakery to Elementor, I also to started to convert WPBakery to Gutenberg.

Can I change from WPBakery (FKA Visual Composer) to Gutenberg?

Yes of course, changing from WPBakery to Gutenberg is not rocket science, with web design practices, you can easily score above 90 in Google PageSpeed Insights.

10 steps to convert WPBakery to Gutenberg

To convert from WPBakery to Gutenberg, you need to remove those miserable short-code from WPBakery and multipurpose theme. And rebuild the whole website again with lightweight theme like Blocksy and Gutenberg block editor. The migration usually took about a week.

Step 1: Migrated and rebuild in staging site.

Always use staging site for development. Unless your site had lots of problem that is unable to show to public, else I would not use "Under Construction".

Step 2. Remove WPBakery Page Builder and Multipurpose Theme

Remove all the multipurpose theme, WPBakery and any plugin that is related to WPBakery.

Step 3. Remove WPBakery Page Builder (FKA Visual Composer) Divi shortcodes from content

When you remove the WPBakery Page Builder, it will leave you tons of shortcode with content and is very time-consuming to go through page by page to remove.

Shortcode Cleaner Pro saves me lots of time & effect. You can easily remove all the shortcode in minutes.

Would suggest use lightweights theme like Blocksy, GeneratePress or Kadence Theme.

Step 5. Rebuild pages with Gutenberg block editor

With the fixability of Kadence Block Pro, it allow you to create more advanced layouts with flexible grids, it makes the design process much more quickly.

Another Block Editor you should not miss is Gutenberg Page Building Toolkit – EditorsKit, it works like TinyMCE for Classic editor, but with way more advanced functions.

Step 6. Make use of Code Snippets

Some functions you don't really need a plugin, and you can use code snippets to replace it. Below are some sites for code snippets.

Step 7. Use Gutenberg to handle the post

Always Use Gutenberg to handle post.

Step 8. Optimize WordPress Database

You can remove the orphan's table via phpMyAdmin or use Advanced Database Cleaner Pro for better database optimization. Is very fast and hardly.

Advanced Database Cleaner Pro
Advanced Database Cleaner Pro
Advanced Database Cleaner Pro Table
Advanced Database Cleaner Pro Table

Step 9. Regenerate all the thumbnails

You will need to regenerate thumbnails when you change theme, recommend to use reGenerate Thumbnails Advanced, it helps to remove not-used-anymore thumbnails, which is super useful in this case. Furthermore, it integrated with ShortPixel Image Optimizer.

Step 10. WordPress Speed Optimization

For WordPress Speed Optimization, I use Swift Performance Pro & perfmatters

Swift Performance 20 % Coupon Code: FASTWP

You may check up my other post WordPress Speed Optimization to score 100 on Google PageSpeed Insights

These are few more results of convert WP Bakery to Gutenberg.

Convert Elementor to Gutenberg PageSpeed Insights score 99
Convert Elementor to Gutenberg PageSpeed Insights score 99
Convert Elementor to Gutenberg, the load time cut done 90%!
Convert Elementor to Gutenberg, the load time cut done 90% from 5.8sec to 0.6sec.
rebuild pagespeedinsights 99
Convert WP Bakery to Gutenberg
rebuild 59 06
Convert WPBakery to Gutenberg, the load time cut done 90% from 5.9sec to 0.6sec.

Convert WPBakery + Nitropack to Gutenberg

This is another client that convert from ThemeForest Theme with WPBakery + Nitropack to Blocksy Theme & Kadance Blocks. The website is totally redesigned to focus on client's profession.

On GTMEtrix test, the performance is better than original website with Nitropack.

Convert WPBakery to Gutenberg
Convert WPBakery to Gutenberg

On Google Page Speed Insights test, the original website with Nitropack is 76, the new site is 100 with simple optimization.

ThemeForest + WPBakery + Nitropack = Page Speed Insights 78
ThemeForest + WPBakery + Nitropack = Page Speed Insights 78
WPbakery to Gutenberg PageSpeed Insights score 100
WPbakery to Gutenberg PageSpeed Insights score 100

Ending Thoughts

I hope this tutorial will help you to solve your problem. Buy me a coffee ☕ if this tutorial really helps.

If you need help to Convert WPBakery to Gutenberg service, hire me to get the dirty job done. Money-back guarantee!

Article written by Julian Song
WordPress Consultant | Elementor Performance Expert. Meet-up organizer for WordPress Penang; Elementor Community leader Penang and Wedevs Brand Ambassador in Malaysia.

Need new website, website revamp
or WordPress support?

We help businesses find new customers and
keep their WordPress website well manage and secure.

To get a better understanding , shoot us a message.
Get In Touch

Related Posts

Ulement . Malaysia Web Design . SEO . WordPress Manage & Maintain Services

Free Website Audit

By telling us a little about your website. 
No obligations, no catches, just real results.
We will email you within 2-5 business days.
We won't spam you, ever.