{"id":3838751,"date":"2021-11-03T07:00:00","date_gmt":"2021-11-03T06:00:00","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=3838751"},"modified":"2024-07-05T11:09:45","modified_gmt":"2024-07-05T09:09:45","slug":"speed-up-beaver-builder-performance","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/speed-up-beaver-builder-performance\/","title":{"rendered":"How Fast Beaver Builder Is and How to Speed It Up"},"content":{"rendered":"

Is your WordPress site going to be fast if you choose Beaver Builder for your next development project? Stay with us and you’ll get your question answered!<\/p>

Whether you\u2019re building a simple or complex website, Beaver Builder is one of the best existing frameworks on the market. However, advanced features also mean heavy content, which brings up some possible performance problems. Your site’s speed is affected by several factors, including the size and complexity of your site, and the more files your website contains, the slower it will be for visitors to access your content. <\/p>

That’s why we’ll first test the speed of a site built with Beaver Builder. Then, we\u2019ll share some technical tips you can apply to slightly improve its performance. <\/p>

In short, the article will answer questions such as: How fast is Beaver Builder? Does Beaver Builder slow down a site? Are there any easy ways to speed it up?<\/p>

\ud83d\udca1 Confused about the builder, the theme, and the themer plugin?<\/strong>

Before we dig into the KPIs performance, let\u2019s give a brief overview of Beaver Builder\u2019s key products. 

– Beaver Builder Lite<\/strong>: the free page builder available on WordPress.org that controls the content on your page with modules (text, HTML, Headings, Icons, buttons.

– Beaver Builder Pro plugin<\/strong>: the premium page builder that controls more advanced content on your page (sliders, contact forms, tabs, pricing tables, etc.).

– Beaver Builder theme<\/strong>: the theme is built on the bootstrap framework that controls the header, footer, and styling of the rest of your site. 

– Beaver Themer plugin<\/strong>: the add-on plugin that extends Beaver Builder into a completely dynamic site builder with custom post types layouts, archives builder, and a WooCommerce page builder. <\/td><\/tr><\/tbody><\/table><\/figure>

How Fast is Beaver Builder?<\/h2>

In our performance audit, we tested the Beaver Builder page builder (Pro plugin) and the Beaver Builder theme on mobile. <\/p>

Demo site and Beaver Builders modules used: <\/strong>We installed one of their demos called \u201cBeaver Agency<\/a>\u201d with modules like testimonials, texts, images, number counters, call-to-action buttons, and the full presentation of the team with their pictures. <\/p>

\"Beaver
Beaver Agency demo<\/figcaption><\/figure>


Performance tools used: <\/strong>Google PageSpeed Insights on mobile and WebPageTest.org (iPhone X with a server located in Paris). We are taking a full mobile approach.<\/p>

KPI measured: <\/strong>Overall grade on PageSpeed Insights, plus its six metrics. Please note that First Input Delay (FID) can\u2019t be measured because its data is based on real users. However, we have the Total Blocking Time (TBT), which strongly correlates with FID. We also measured the Fully loaded time and the number of HTTP requests.<\/p>

Let\u2019s run the audit! <\/p>

The performance results of Beaver Builder on mobile are pretty good. We got 87\/100 on Google PageSpeed Insights \u2014 the score is not bad, but it’s not in the green area either.<\/p>

\"Beaver
Beaver Builder mobile score: 87\/100 – Source: PSI
<\/figcaption><\/figure>


Now let\u2019s have a look at our mobile KPIs scores: <\/p>

KPIs (mobile performance)<\/strong><\/td>Scores<\/strong><\/td><\/tr>
Overall grade <\/td>87\/100<\/td><\/tr>
FCP<\/td>3.0 s (orange)<\/td><\/tr>
SI<\/td>4.3 s<\/td><\/tr>
LCP <\/td>3.0 s (orange)<\/td><\/tr>
TTI<\/td>3.0 s<\/td><\/tr>
TBT<\/td>0 ms<\/td><\/tr>
CLS<\/td>0<\/td><\/tr>
Fully loaded time<\/td>2.339 s<\/td><\/tr>
HTTP requests<\/td>44<\/td><\/tr><\/tbody><\/table><\/figure>

All the indicators are in good shape, except the Largest Contentful Paint (LCP)<\/a> and the First Contentful Paint (FCP)<\/a> that could be improved. <\/p>

By checking the \u201cOpportunities\u201d and \u201cDiagnostics\u201d sections, we noticed that we could do a few optimizations such as eliminating render-blocking resources<\/a>, reducing unused CSS<\/a>, reducing unused JS<\/a>, and deferring offscreen images<\/a>. <\/p>

\"Performance
Performance opportunities and diagnostics when using Beaver Builder – Source: PSI
<\/figcaption><\/figure>
\ud83d\udcd6  Is Beaver Builder fast?<\/strong> Yes, and the code is very lightweight and clean.

\ud83d\ude80 Are there any built-in performance features?<\/strong> No, but it\u2019s fine because Beaver Builder leaves the advanced optimization to the best caching plugin for WordPress<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>

Beaver Builder\u2019s Pros From a Performance Standpoint <\/h2>