Before the tutorial, I would like to share my journey of ThemeForest, Divi and Elementor page builder. You may use the jump to link to skip to the tutorial.
- Ex-lover: ThemeForest + Visual Composer
- Ex-lover: Divi Builder by Elegant Theme
- Problem: Slow WPBakery Page Builder / Visual Composer website & loads in 27sec
- 8 easy steps on how to rebuild / convert the website from WPBakery Page Builder (Visual Composer) to Elementor page builder and make slow website load very fast in 1 sec
- Create a staging site via Migrate Guru
- Remove WPBakery Page Builder / Visual Composer / Divi and other unnecessary themes and plugins
- Remove the Shortcode with Shortcode cleaner
- Optimize the database
- Redesign the website with Elementor page builder
- Make use of Code Snippets
- Use Gutenberg to handle the post
- Website Optimization
- Result: From 27sec to 1sec
Ex-lover: ThemeForest + Visual Composer
I used to love
When I need to change the layout design, it turns to a nightmare, either you stick with the current theme design or switch to another
Another problem with
Ex-lover: Divi Builder by Elegant Theme
Therefore, I came across
It was a happy journey at the beginning, the learning curve is fine and I found myself create a much better website with
The honeymoon ended with updates, the
There are lots of complaints on the Divi Builder Facebook user group, and some members recommend a new page builder call
After a few days of playing around
This guide works for Divi builder convert to Elementor page builder too.
Problem: Slow WPBakery Page Builder / Visual Composer website loads in 27sec
This website is built with ThemeForest’s theme with Visual Composer. It loads so slow and the client keeps facing trouble with it.
They put a notice to warning visitors about the slow loading website. To try to get better performance, the client hosts in AWS EC2, but the cost is so expensive. (595 request loads under 27sec is a pretty good performance)
Other problems that I found after the site audit
- WordPress, theme & plugin are outdated for years.
- Outdated PHP.
- The website had been developed by numbers of times, they never remove whatever themes & plugins they no longer needed.
- They installed lots of plugins to achieve some simple layout design.
- Multiple repeated function plugins.
- Use WPBakery Page Builder (Visual Composer) to create a post!
8 easy steps on how to rebuild / convert WPBakery Page Builder (Visual Composer) / Divi to Elementor page builder and make slow website load very fast in 1 sec
1. Create a staging site via Migrate Guru
- Backup! Always backup first.
- Create an A record “dev” and point to your staging server IP address.
if you use dev, the staging site URL will be https.dev.website.com - I use Migrate Guru to mirage the website from the live site https://website.com to https://dev.website.com
2. Remove WPBakery Page Builder / Visual Composer / Divi and others unnecessary themes and plugins
- Records down the current list of plugins
- Remove unnecessary extra themes, but I always keep a basic WordPress theme like Twenty Twenty for debug purpose.
- Remove WPBakery Page Builder / Visual Composer / Divi and other unnecessary extra plugin
3. Remove the Shortcode from WPBakery Page Builder / Visual Composer / Divi with Shortcode cleaner
When you remove the WPBakery Page Builder / Visual Composer / Divi plugin, it will leave you tons of shortcode and is very time-consuming to go through page by page to remove. The
- Clean up the backend editor admin content.
- Clean up the content into a database.
- Clean up broken shortcodes that are left from any page builder.
- Show broken shortcodes status in the admin bar.
- Force any active shortcodes to be broken [inactive].
- Clean up unlimited number of posts, pages [intsead of just 100 in lite version].
- Add new custom frontend site content filters.
- Use default backend Admin WP content filters.
- Add new custom backend admin content filters.
4. Optimize WordPress Database
- Now the records come hardly, may use the list to look for which theme/plugin’s table to be removed.
- You can remove the orphan’s table via phpMyAdmin or use Advanced Database Cleaner Pro for better database optimization. If you prefer FREE plugin, may try plugin WP-Sweep, Plugins Garbage Collector.
5. Rebuild with Elementor page builder
- Use Hello Theme from Elementor if you are using Elementor page builder Pro. Else I will suggest another awesome theme GeneratePress.
- If you are using Elementor page builder Pro, use theme builder function to rebuild theme’s header and footer.
- Rebuild page layout with the Elementor page builder.
- Rebuild post layout with call to actions with the Elementor page builder design.
- Kiss goodbye to the slow multi-purpose theme from ThemeForest and WPBakery Page Builder / Visual Composer.
5.1 Convert WPBakery / Elementor to Gutenberg
If you had notice, I had convert my Elementor site to Gutenberg with GeneratePress and GenerateBlock.
To convert from Elementor to Gutenberg is way easier than convert WPBakery Page Builder to Gutenberg. Because when you disable Elementor, it DOES NOT leave you any miserable shortcode, you just need to redesign again with Gutenberg block editor.
With the fixability of GenerateBlocks’s Grid block, 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.
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.
7. Use Gutenberg to handle the post
Use Gutenberg Block to draft out few post template for the client, so they can be duplicate the template and replace with their text & graphic.
Always remember Elementor page builder is Page Builder, not post builder. You should NOT use the Elementor page builder or WPBakery Page Builder / Visual Composer to create the post. Please make use Gutenberg Block.
8. Website Optimisation
- Regenerate all the thumbnails with 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 . - For WordPress Speed Optimisation, I use
Swift Performance Pro .
You may check up my other post WordPress Speed Optimization to score 100 on Google PageSpeed Insights
Result: From 27sec to 1sec
And finally, the rebuild website load way faster than before, from 27.1sec (hosts in AWS with EC2) to 1.2sec (hosts in shared hosting
Ending Thoughts
I hope this tutorial will help you to solve your problem. Buy me a coffee ☕ if this tutorial really helps.
And if you have any question please give me a shout to my comment box. I’ll try to help you accordingly. If you need Rebuild / Convert from
