bb-logo1

BEAVER BUILDER PERFORMANCE

PERSPECTIVE, PRIORITIES & GOOD NEWS

Taking inspiration from the performance professionals

Performance = Experience (its what's in the viewport that matters)

  • Largest Contentful Paint (LCP) is the measure to watch.  The time it takes to load the largest item in the viewport.
  • Focus on the top of the pages (header/hero sections) and what needs to load (ie. Images, CSS , JS, Fonts etc).
  • We can get clues from "waterfall". (https://gtmetrix.com/ and https://www.webpagetest.org/)
  • Google also tells about render-blocking resources (but caution is required).

 

Below is from www.webpagetest.org (which allows you chose a mobile device)

largest

Google's PageSpeed Insights (showing us things we could consider deferring or removing)

render-blocks

Think about the whole site and the competition

IT'S TOO EASY TO GET DISTRACTED

Large Page Sizes/Too Many Assets 

Probably best to keep things simple avoid loading any performance tools before seeing what you can do without. It's is easy to get utterly lost using Asset Clean up, Performance Matters and Flying Press for little to no gain. There is NitroPack too which takes "a done for you"  approach.

Things like disabling emojis or jQuery migrate can be done with code in your child theme (see below).

A large complex magazine site can outperform a simple site.
(https://sabrinazeidan.com/how-to-speed-up-wordpress-this-dont-work/).

 

Comparative Bloat Tests

There's lots of comparative "bloat tests" on page builder and themes  Typically with themes a sample text page is used. With page builders a heading, button and maybe an images is used. Comparing default settings mostly tells who set up for tests and who set up for users. The Beaver Builder Theme get called a heavy theme. Possibly because themes like Generate Press loads 10kb be default where the Beaver Builder theme will load almost 60kb (uncompressed) with Font Awesome turned on. You don't have to have it. I swapped this site from Generate Press to the Beaver Builder theme. Same or better results.

WordPress comes with "bloat" like jQuery, blocks and emoji CSS because its assumed we will want them.  I feel the term "bloat" should be reserved for unneeded code that is slowing performance. It is not just a front end problem.

Comparative Builder Scores 

This is where the same design is recreated across multiple builders and top level speed scores are accumulated from various testing sites to find a winner.  They appear scientific, but are not for two reason:

  1. Lab test scores don't meaningfully reveal the fastest builder:  GT Metrix (measures desktop), Pingdom (measures desktop, but not experience ie, CWV).  PSI (measures mobile and desktop but presently scores are not weighted towards the CWV measure of performance) PSI variance with 5 tests is  +/- 8 points. https://googlechrome.github.io/lighthouse/scorecalc/).
  2. Recreating designs requires equal building skills across platforms.  Human error needs to be eliminated or the advantage always goes to the known builder. I have checked the builds on some of these test and advantage given to the promoted builder/s is quite alarming.

The Emperor's New Clothes Syndrome.  Prominent affiliate marketers have moved on selling us Gutenberg based products. As I know only too well, the is no money in making content that says what you have already bought is good.

Gutenberg is fastest in the sense it is in core and has a TTFB advantage over additional plugins. That's minimal with page builders using little backend resources and negated by page caching. But still a consideration particular is mostly using dynamic content (i.e. shop and membership sites)

Halo Effect.  Gutenberg's code output is fairly clean, but as yet does not (yet) have a page builder layout system. Add 3rd party themes and blocks that compensate for this and you can't assume they will be any cleaner than a traditional page builder. Marketers lead with a generous free offering for Gutenberg as a step to converting you to their platform.

Improving Largest Contentful Paint

Image optimization (viewport)

  • Getting the smallest file sizes particularly is an image is the largest element (ShortPixel does that for me)
  • Serving sizes most appropriate to the device loading it.
  • Using SVGs (if possible)
  • Avoiding images (perhaps removing for mobiles only).
  • WebP seems like the solution for the near future. Presently it is not without (performance) issues. Thanks to Paul Lacey. (Often worth ignoring the "Serve images in next-gen formats" warning)

Fonts


Compression 

Gzipping is working here"

HTTP/2 

You can test your server support this (https://tools.keycdn.com/http2-test). In get over limitation HTTP 1 had over the number of connections it could make. Now combining CSS and JS files is not so beneficial. (arguably pointless).

This could have some major benefits for LCP - it could be something BB need to look in to in the future as they combine for us.

Caching 

This probably should come first as "Time to First Byte" (TTFB) generally is reason for not getting a good LCP score. Often due to resource heavy plugins/themes. For client sites I use WP Rocket. On this site I am now experimenting with https://wordpress.org/plugins/cache-enabler/  During my tests I constantly got the same scores without caching of any form and with light plugins for SEO, Security and Backups.

This is really the topic for another video because of the different forms of caching available Ideally are hosting are builds and hosting should be good enough to manage without it, but I could help with load impact and potential save the planet by allowing us to put less strain on servers.

Design 

Does that background image or video help visitors? Could we set the hero section to 100 vh.  Simple navigation and a focus on a good headline has always been the key to conversion.  Perhaps happy days for those who want to argue against a viewport sliders and for simple messaging.

Plugins

Watch out for heavy plugins that may drain the Time to First Byte. Tools like Query Monitor and UsageDD can help, but check the waterfall for asset being loaded that could impact on the LCP.

Others thoughts 

bb-logo1

BEAVER BUILDER' SETTINGS

BB THEME

Bootstrap and Font Awesome

Search icon and scroll to top button introduce Font Awesome. It is set to the minimal Bootstrap 3 and probably best left that way unless you have reason to use other Bootstrap features.

Some (possibly) useful snippets for functions.php

/* Disable unused Beaver Builder and 3rd party modules:
https://www.beaverjunction.com/disabling-beaver-builder-modules-for-better-performance/ */
 

add_filter( 'is_module_disable_enabled', '__return_true' );


/* * Disable WordPress emoji's */

function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

// Remove from TinyMCE
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/* Filter out the tinymce emoji plugin. */

function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}

/* Remove jQuery Migrate */

function dequeue_jquery_migrate( $scripts ) {
if ( ! is_admin() && ! empty( $scripts->registered['jquery'] ) ) {
$scripts->registered['jquery']->deps = array_diff(
$scripts->registered['jquery']->deps,
[ 'jquery-migrate' ]
);
}
}
add_action( 'wp_default_scripts', 'dequeue_jquery_migrate' );

/* Defer JavaScript - except jQuery */

if ( is_user_logged_in() ) {} else {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
return "$url' defer='defer";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );}

Also worth checking out: https://metabox.io/beaver-builder-remove-scripts-styles/


/* Moves jQuery to the HTML footer 
peterwilson.cc/code-samples/load-jquery-in-the-wordpress-footer/
I added the "logged in" condition. Seem to only move jQuery to the footer is Beaver Builder does not need it(??)*/

if ( is_user_logged_in() ) {} else {
function pwcc_jquery_to_footer( &$wp_scripts ) {
if ( is_admin() ) {
return;
} 
$wp_scripts->add_data( 'jquery', 'group', 1 ); 
$wp_scripts->add_data( 'jquery-core', 'group', 1 ); 
$wp_scripts->add_data( 'jquery-migrate', 'group', 1 ); 
}
add_action( 'wp_default_scripts', 'pwcc_jquery_to_footer' );
}

BB PLUGIN

Ability to swap Background image sizes for hero sections

Perhaps the easiest way to make a quick and considerable gain. Remember images below the viewport do not need to be so optimised. Used on: Fashion  | Meat | Business.  Alternatively add custom CSS with a media query to remove the background image on the row content wrap.

 

Ability to set a fullback image for video on hero sections

Obvious really, but presently Google is not looking at video. Used on: DJ

 

Watch out for animations in the viewport area

Fade animation affected LCP and movement gets seen as CLS. After the (desktop) view port you can go crazy. See DJ | Meat.

 

Watch out to set image and column widths in viewport area

Mostly this is to avoid CLS (Cumulative Layout Shift) but the processing probably has a knock on with LCP. SVG

 

Consider loading your own Font icon sets 

PSI will flag files with lots of unused CSS and JS. Often Font Awesome (multiple sets) . Compressed it only 13k (58kb otherwise), but for perhaps on arrow on a button it's not worth it (depending on what you have to balance). Used on Moon  | SVG |

 

Consider setting different viewport rows for devices

Typically this would be a bad idea as the content for each row has to be rendered regardless of the whether it is shown. But with Moon  I had parallax loading desktop and saw an improvement adding a row with no image above for mobile. Paul Lacey has experimenting creating device specific images on the page.  I image it could help with speed index.

Consider disabling unused modules

The impact is almost immeasurable, but may help more with 3rd party addons. See here: https://www.beaverjunction.com/disabling-beaver-builder-modules-for-better-performance/

FINALLY

Thanks for watching.  Potentially there's  lot of videos I could do on speed. I could dig deeper into:

Creating Fonts sets. Locally loading Google fonts. Using WP Rocket or other cache plugins. Preconnecting & dns-prefetch.

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

Discounts on these two lifetime deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction"  25% off

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

WP Rocket | ShortPixel | Beaver Builder | Advanced Database Cleaner

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