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.
https://youtu.be/dXVZ5bSUduc
Step 4. Rebuild header & footer wit h lightweight theme
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.
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
Step 10. WordPress Speed Optimization
For WordPress Speed Optimization, I use FlyingPress & perfmatters
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 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.
On Google Page Speed Insights test, the original website with Nitropack is 76, the new site is 100 with simple optimization.
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
Photo by La-Rel Easter on Unsplash