WordPress Page Speed: Elementor v Bricks v Breakdance

Summary

This video compares the page speed performance of various page builders—Elemental, Bricks Builder, Breakdance, and WordPress Classic Editor. Key tests showed that while Bricks Builder and WordPress Classic consistently scored high (100 and 98, respectively), Elemental Pro made significant improvements, reaching 99 on mobile and 100 on desktop, outperforming previous versions. The video explores the DOM size and HTTP request differences, noting that optimization plugins like FastPress can reduce requests significantly. Overall, Elemental’s recent updates reflect notable progress in speed, though performance still varies based on the builder and optimization choices.

Takeaways

• 😀 **Bricks Builder** achieved perfect scores of 100 for both mobile and desktop performance.
• 😀 **Elementor Pro** showed significant improvement, with 99 on mobile and 100 on desktop.
• 😀 **WordPress Classic Editor** and **Breakdance** scored 98 for both mobile and desktop.
• 😀 Two years ago, **Elementor Pro** would have scored much lower, around the mid-70s, compared to now.
• 😀 DOM rendering is higher in **Elementor Pro** compared to **Bricks Builder** and **WordPress Classic Editor**.
• 😀 **Elementor Pro** had significantly more chasing requests (25), unlike **Bricks** and **WordPress Classic Editor**, which had 1-2.
• 😀 The DOM size increases as you add more elements to a page, but it does not drastically affect speed unless it gets too high.
• 😀 Applying performance plugins like **FastPress** can reduce chasing requests significantly (e.g., from 25 to 6 in Elementor).
• 😀 The test focused on very basic pages (heading and image) to benchmark raw performance, with no additional optimizations beyond what the builders provided.
• 😀 **Elementor** has made significant backend optimizations in the past year, contributing to its improved performance scores.

Q & A

What is the main focus of the comparison in the video?

The video focuses on comparing the page speed performance of four page builders—Bricks Builder, Elementor, Breakdance, and WordPress Classic Editor—by testing their performance on mobile and desktop platforms.

How did Elementor's performance change compared to two years ago?

Two years ago, Elementor's performance was much lower, scoring around 75 on both mobile and desktop for a basic page. Now, Elementor Pro achieves scores of 99/100 on mobile and 100/100 on desktop, showing significant improvements in speed and optimization.

What test was conducted to evaluate the page builders?

The test involved creating a simple page with just a heading and an image, then duplicating it three times to add more content. The performance of the page builders was measured without any additional performance optimization plugins or custom snippets.

What was the general performance score for Bricks Builder?

Bricks Builder scored 100/100 on both mobile and desktop during the test, demonstrating excellent performance across both platforms.

What is the significance of the DOM (Document Object Model) in page speed?

The DOM refers to the elements rendered on the page, such as text, images, and containers. A higher DOM means more elements are being loaded, which can potentially slow down page rendering. Elementor had a much higher DOM compared to Bricks Builder and WordPress Classic Editor, which can impact performance.

What is a 'chasing request' and why is it important?

A 'chasing request' refers to the sequence in which page elements (like containers, headings, and images) are loaded. A higher number of chasing requests means that the browser must load more elements in order, which can delay page rendering. Elementor Pro had 25 chasing requests, significantly more than Bricks Builder or WordPress Classic, which had only 1-2.

How did Elementor Pro's performance improve with the use of a performance plugin?

When a performance plugin like FastPress was added, Elementor Pro's chasing requests dropped from 25 to just 6, showing that optimization through plugins can dramatically improve performance, especially by reducing unnecessary requests.

Did the amount of DOM change when more content was added to the page?

Yes, when the page content was duplicated, the DOM size increased. However, Elementor's chasing requests remained the same even as the DOM increased, suggesting that Elementor's backend optimization had already reduced unnecessary elements from being loaded.

How does the performance of Breakdance compare to Elementor?

Breakdance performed similarly to WordPress Classic Editor, scoring 98/100 for both mobile and desktop. This is slightly lower than Elementor Pro's scores, but still excellent compared to many other page builders.

What role does performance optimization play in page builder speed?

Performance optimization, such as using performance plugins, minifying CSS, and optimizing images, plays a crucial role in improving page speed. While raw performance scores might be high initially, adding a performance plugin can reduce chasing requests and optimize the page for faster loading times.