A lot of developers like ourselves can immediately see the downsides of using free page builders and one of the top plugins most overused by ‘Web Designers’ is WPBakery Page Builder – previously known as Visual Composer.
Other plugins you may have encountered include DIVI, Beaver Builder, Themify and Elementor.
The idea of these builders is for Designers who don’t/can’t code, to be able to quickly spin-up websites for their clients, whilst keeping costs down.
More often than not, clients are left with a website that looks good on the front-end but managing it in the Admin of WordPress is difficult, time-consuming and often without training.
As a team of developers, even we often struggle with the complexities of all the options, and where things are hidden in large control areas within the Admin area.
But, don’t take our word for it…
The evidence speaks for itself. These builders output code that is slow, an older way of doing things (I’ll come back to this) and in-accessible.
40% of consumers will leave a page that takes longer
than 3 seconds to load.
Let’s put this speed to the test
Here we’ve set up 2 local test websites, very simple, both have a basic, out-of-the-box WordPress install, and the default “twentynineteen” theme applied.
One of the websites utilises the latest Gutenberg editor and the other has the plugin, WPBakery Page Builder, that removes Gutenberg for its own editor.
Using the default Sample Page that comes with WordPress, I’ve run a speed test, in Chrome browser provided by Google, and here it is showing us the differences.
First, is the WPBakery Page Builder speed test, showing 13 requests – it downloaded styles and scripts to make up the page you see – and the load time as 260 milliseconds.
Second, is the default everything and the same text, and the speed test shows WordPress comes with only 9 requests out-of-the-box.
We can always reduce this as Developer’s, but as a benchmark, VC has already loaded 4 extra requests and increased the load time by 41%.
It doesn’t take a genius to realise, if we start to add more layout, design, images (media) to this page, that it’s going to get slower!
79% of shoppers say they’re less likely to purchase from a site again, when they’re dissatisfied with it’s performance.
Let’s add an image to our page
Next we will add an image. In the WPBakery Page Builder, this means adding a new element for a single image, a modal pops up and we select this from the Media Library.
For the Gutenberg WordPress editor, we hover above our text, click on the + plus symbol and choose an image, again selecting this from the Media Library.
So, just to demonstrate the output code, I’ve screenshot what this looks like when I inspect the image in Google Chrome using the Chrome Developer Tools.
To start with, here we can see the Gutenberg WordPress code wrapping the <img /> element in a <figure> element, which is semantically correct.
Also note, this isn’t many lines down from our “entry-content” class which is the box containing this image and text.
So when we compare this to the output code of the WPBakery Page Builder, it has added 6 extra containing blocks, not including the <figure> element. You can count these lines from the “entry-content”.
Click to open larger image
I hope you now start to see, why, when we look at websites like this – and inevitably end up re-building them, is it just doesn’t make sense.
Have you also noticed that the WPBakery Page Builder has decided to change the size of our image and is no longer adhering to our theme’s layout?
61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead.
Let’s look at some Google evidence
The Time to Interactive (TTI) metric measures how long it takes a page to become interactive. “Interactive” is defined as the point where:
- The page has displayed useful content, which is measured with First Contentful Paint.
- Event handlers are registered for most visible page elements.
- The page responds to user interactions within 50 milliseconds.
Some sites optimise content visibility at the expense of interactivity. This can create a frustrating user experience.
The site appears to be ready, but when the user tries to interact with it, nothing happens.
In non-tech speak, this means, when you open a new website and you get that white screen and it seems to take agggeess to load …. or it’s loaded, but you can’t scroll down or click on a link, this is the delay in TTI.
Looking at our results for the two test websites, we have quick TTI as there’s only text loading on the page and nothing much else.
But notice the difference between the WordPress default output and the WPBakery Page Builder. Why is the latter .5s longer to load? We don’t get it!
How does the affect SEO?
In 2018, Google rolled out two relevant updates; mobile-first the approach for treating the first experience of a website as the primary interaction a user has.
So if you didn’t make your website work for mobile, then it would potentially rank you lower.
It also takes into consideration the load time of the website; Google announced their speed update in January 2018.
All Google cares about is, “Is this website relevant to our customers” and if that experience is quick, then they’ll want to boost you up above those whose are not (your competition?).
What about accessibility?
As a lot of the code output by these builders can be old-hat … using methods or approaches that, in the web community, we’ve since replaced with more effective, semantic code, that is accessible too, the likelihood of the website being accessible is very low.
Public sector websites already have to be fully compliant by 2020. I wouldn’t be surprised if the next step would be eCommerce websites and PDFs come 2021.
£1.8 billion per month being lost to businesses as disabled customers and their families and friends ‘walked away’ from service providers that were not disability smart.
— Walkaway Pound Report, Extra Costs Commission.
Be clued up
We share this information because we like to inform and educate on what client’s are purchasing when investing in their brand and business.
We want to see fabulously fast websites with amazing user experiences… if you’re loading 20 plugins, having to use Caching to just get a fast experience, and a hefty Theme with so many options and add-ons and you’re loading lots of Images and Video on the front-end too, then I feel sorry for you son, I got 99 problems but a Page Builder ain’t one.
Please seek advice before having your next website built – check their portfolio, see previous examples of website. The tools used in this article are all free and available in your browser.
If you’d like a FREE review or audit of your current website, or simply want a quick chat about a future project, don’t hesitate to get in touch.
