Beaver Bulder Speed & Core Web Vitals

THE 3 SPEED 'EXPERIENCE' MEASURES

Largest Contentful Paint (LCP)

Loading performance. The main issue is TTFB (the delay while WordPress queries the database and processes php functions etc). Lot of heavy plugins can add to this but it can be negated (on static sites) by serving cached html versions or more powerful hosting. Of course another factor is the load impact of many simultaneous visitors.

First Input Delay (FID):

Interactivity. Issues with heavy, slow responding JavaScript files and third party scripts.

Cumulative Layout Shift (CLS)

Visual stability. Images, embeds, and iframes without dimensions/ Interstitials, popups, animations and fonts (causing FOIT/FOUT - a Flash of Invisible Text/Flash of Unstyled Text). Anything waiting for a network response before updating DOM.

COREVITALST

Performance Measuring Tools

GPSI-h

PageSpeed Insights

Now powered by a cut down hosted version of Lighthouse (an open-source, automated tool for improving the quality of web pages).

Server Locations

  • Northwestern US (Oregon)
  • Southeastern US (South Carolina)
  • Northwestern Europe (Netherlands)
  • Asia (Taiwan)

Chrome Inspector

Has a Lighthouse tab where alongside performance you can measure SEO, Accessibility, Best Practice and Progressive Web Apps. Result will vary according to your Internet (I can get radically different results by changing my VPN)


GTMetrix

Also now uses Lighthouse. Default server located in Canada.


Pingdom Tools

Not Lighthouse. Measures full page load time. Easy to swap locations and has a useful waterfall.


Web Page Test

One of my favourites. Not always kind, but you can record your page loads.

wsst.fw_-1024x588

Some points:  Consider latency. Know that PSI changes, has the occasion bugs, changes servers. Understand that a 100 score is not equally measured (the difference between 80-100 is minor)  There really is no universal score. These are tools that help us achieve a goal, but should not be the goal itself.

BUT, THIS IS REALLY IMPORTANT...

I've a fair bit of site shame with this one. We had to get it in place before the product images were available and it had lots of last min changes. Had the Ken Burns effect and hidden hero section just for mobile. The client has been leaning and changing stuff. It got the BB theme, BB, Beaver Themer, PowerPack. Plus my whole project management setup is still in the backend on only WP Rocket defaults on .

GSC-1024x600
bb-logo1

BEAVER BUILDER's PERFORMANCE

EXAMPLES: 

 

Site One. Created because of a popular post I saw in a group related to site speed. A landing page made with one 40kb photo, several SVGs, HTML and CSS was (to me unsurprisingly) getting a PSI score of 100 (after animation was removed). The success was mostly attributed to the choice of tools.

 

Site Two. Created because of a BB user who was moving to a 3rd party Gutenberg editor for speed and showed an example which appeared to performs better that a example BB page.  I recreated their example with BB (I have since swapped the images and text - because it is a real world site -  but retained the same weight). I use a different theme GP, but  as expected swapping to the BB theme, PBF or Astra would made no difference.

PROS

Loads only what is needed 

Only serves what is needed for that page. The default assets are less than what Gutenberg (the block editor) loads. Helps with First Input Delay.

Backend resources are minimal

Extra RAM is somewhere between 4-8 MB. Under 10mb with Beaver Themer and the Beaver Builder Theme. (Min. 128MB but many recommend  256MB - 512+MB for WP) Hard to measure system running on JS may affect CPU more.

BB used a quarter of the resources of another popular page builder. Some plugins like forms and slider were not far off the same. If not able to cache pages it helps with Largest Contentful Paint.

Modular 

You can entirely disable any unused modules. The well know addon packs have also made this an option.

History

From the beginning the Beaver Builder team have resisted popular demand for things that could turn in to bloat.  They made for the agency and respect the needs of the developers. Long testing, quick bug fixing, quality code with a reputation for stability.

CONS

Not as light as WP only

Gutenberg's getting close to being a page builder. But presently 3rd parties are mostly (temporary?) filling the gaps, bring their own standard. The lack of stability and Beaver Themer like conditional dynamic option rule it out for me.

Divitis

Beaver Builder can generate a lot of divs (to facilitate styles) that go unused. Not as many as most, but not a few as one or two.  In reality, at is most extreme it would probably be almost impossible to measure a speed impact. It more of a tidy code issue. If important you can reduce this in Beaver Builder by working differently.

Page builder laziness 

Page builders have allowed coders to not to have to think. Once I would have globally styled almost everything. Now I can style a row and duplicate - the code.  I have to think less about efficient page layouts.

Non-coders will not learn good practice. Plugins fill in the gaps at often a too high cost for the investment in server power.

Final Words

My aim with this video was to try and offer some context as best as I can.  It's not intended to be a claim about how fast Beaver Builder is. There are way too many misleading "fastest" tests as more look to software than good practice.  I think most of us know that software that markets endless new no code features may not be concentrating on best practice... until the tide starts turns and then they will access the situation. But a scare like Core Web Vitals and GDPR is quite like see a car crash after year of reckless driving.

BB is a tool that save us some, or a lot time and relative to that we  need to make some compromises and learn it.

Using WordPress is compromise. If you are building a static the most performant way is probably not to start first with installing a platform made up of around 500,000 lines of code and a database and all the rest for Themes, Page Builders, Back-ups, SEO, Security etc.

Most with moderate hosting, complex setup like Ecommerce, LMSs and Memberships may struggle to pass without some work, but we have to remember sites like Amazon, YouTube and the BBC fail and although Google pass they don't get 100.

At some point I hope follow up with some more practical tip and tool on speeding up sites.

 

ThankYou!

 

You can support my work by buying the tools I use through my affiliate links:

25% off these two lifetime deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

---------------------------------------------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder | Advanced Database Cleaner

---------------------------------------------------------------------------------------------------