Page builders are popular for WordPress users that want to create a custom website without coding by hand. Page builders create websites with drag-and-drop modules that anyone can use. However, page-building tools have the potential to affect a website’s performance. In this post, we’ll analyze several WordPress page builders and see the types of impact they may have on website performance. We’ll also see a few tips on improving that performance.
Why Website Performance Matters
Performance is often overlooked in favor of UX, UI, and features. However, poor performance almost ensures that only a few visitors will see the website. Problems with slow performance include:
Higher bounce rate
If the website takes too long to load, users will move on to the next website. A website should never keep visitors waiting. Even a couple of seconds increases the bounce rate. Faster loading keeps the visitors on the website longer.Lower conversions
Slower page loading reduces conversions.Reduced SEO
Slow page loading also affects Search Engine Optimization, reducing your rankings in organic search results. Google uses site performance as a ranking factor. Ranking high in Google search results is crucial.Increased cost per click
The cost of paid search increases for slower websites.
To get visitors to the site, keep them there, and keep them coming back, websites need to load fast.
What Affects Website Performance?
Page builders use data to place elements on the screen. This includes all the rows and columns in the layout, the placement of all the elements, how the objects interact and overlap, animations and other visual effects, etc. This data converts to HTML for the browser to read. The more data the browser receives, the slower it displays that data to the user.
What is a Page Builder?
Page builders ares or WordPress plugin themes with modular elements that build web pages without the user needing to know how to code. Users can build simple or complex websites easily. They include full-site editing with drag-and-drop tools as well as pre-made layouts to get you started. Settings, such as colors, font sizes, padding, and borders, and more, are easily changed with sliders or similar tools.
The modules, such as text, images, forms, etc., are graphical representations of the code. WordPress delivers the HTML that the module represents to the browser. Only the person using the page builder sees the grids and the modules created by the page builder.
What happens on the backend doesn’t appear on the front end. All the code that creates the page builder is only on the backend of the website. The front end, the page that’s delivered to the browser, only includes the HTML necessary to build the page.
Page builders include responsive design editing tools, allowing the user to design page designs for individual devices or ensure that a design works perfectly on any screen size. Another advantage of page builders is they add features that can replace multiple plugins, reducing the overall weight of the website.
How Page Builders Affect Performance?
Some page builders are faster than others. If developers have followed the WordPress development guideline and good coding practices, then their themes and plugins should be optimized and have little effect on performance. There could still be a small effect on website performance, however. The impact on the website performance will depend on the size and features of the website.
Page builders generate code such as HTML, CSS, PHP, and JavaScript. Those small pieces of code may be insignificant if taken individually, but if you have lots of them, they can add up to something more significant. Each element is a node. The more nodes a page has, the longer it takes to render in the browser. This is multiplied with nested nodes, which take even longer to render.
Page builders create more HTML than an experienced web developer would when writing the markup by hand. Unfortunately, page builders do not give the user access to the HTML they create. So, we can’t make adjustments to the markup. Of course, their advantage is you don’t have to be an experienced web developer to build a website that looks professional. This convenience does come with a tradeoff in performance.
The question is, how much performance is involved in that tradeoff, and is it worth it? Okay, that’s two questions, but they’re important questions. Keep in mind, though, that the popular page builders understand the need for performance, and they know what they’re doing.
However, we should always test our website performance ourselves. With that in mind, let’s test how several of the top page builders affect website performance. First, here’s a look at how we’ll test them.
How to Test Website Performance?
There are several tools available to test a website’s performance. The most popular include Google’s PageSpeed Insight, GTMetrix, and Pingdom. These tools test various elements of loading, provide a score, and list areas to improve.
Lots of the scored areas affect overall performance. We could focus on several aspects of the page loading. We’ll look at all the areas within the score to see the overall performance.
Page Builder Website Performance Comparisons
To see how page builders affect performance, I’ll use GTMetrix and compare several popular page builders.
For the page design, I’ll build a typical layout that can be built in the free versions of the Beaver Builder and Elementor plugins using the Twenty Twenty Three WordPress theme. Divi includes all of those modules. To keep the tests consistent, I’ll use the Divi plugin instead of the theme. For our benchmark, I’ll build the same page with the Twenty Twenty Three WordPress theme.
WordPress, themes, and page-building plugins are the latest versions as of this writing. I have only one builder plugin active at a time with no other plugins active. I’ve not optimized the images or the page, so all use the default settings. Images are taken from Unsplash.
Benchmark Page Layout
For the benchmark page, I’ll create the pages manually using the same modules in all four page-builders. Since I only have the free versions of Beaver Builder and Elementor, this limits the modules I can use to these six:
Button
Heading
Icon
Photo
Text editor
Video
I’ll use them all and build the same page with each builder using the same images and content. I’ll use the default header and footer with the same navigation menu.
The layout I created includes this structure:
Title
Social icons
Image
Paragraph
Button
Image
Paragraph
Image
Paragraph
Title
Video
Paragraph
Image
Paragraph
Button
Social icons
Here’s a look at some of the page elements with the WordPress Twenty Twenty Three theme. This is the top of the page. It starts with a title followed by social media icons, an image, and a paragraph of text.
