It’s no secret that at Meta Box, we like Beaver Builder and built some of our WordPress websites on that. It’s an amazing page builder and is really powerful.

FYI: we have developed an integration for Meta Box and Beaver Themer. You should also read our reviews of the best page builder plugins for WordPress.

One problem with this page builder plugin (and I think it happens to others as well) is that it enqueues a lot of unnecessary JavaScript and CSS files to the website when they’re not used.

How to remove unnecessary scripts and styles in Beaver Builder
How to remove unnecessary scripts and styles in Beaver Builder

List of unneeded scripts and styles

Here are some of them:

  • Magnific popup: for lightbox effect. Not all websites need it.
  • Imageloaded: to check whether all images are loaded.
  • Bootstrap script: unless you advanced Bootstrap components, you don’t need its script. However, you still need Bootstrap CSS for layout. Beaver Builder uses Bootstrap CSS for columns and rows.
  • jQuery waypoints: to reveal elements when you scroll. Not needed if your website doesn’t have that effect. I’m not a fan of it!
  • jQuery throttle: to prevent running a JavaScript function continuously. It’s used for scrolling effect, too.
  • Font Awesome: not needed if you don’t use any icons.
  • jQuery FitVids: if your website doesn’t have videos, you don’t need this script. Or if you use Jetpack, then it’s already included. Read more why Jetpack is great for WordPress.

There might be more scripts and styles that I have not known and listed above.

These files create extra requests to your server, make your users wait for them and thus, increase the page loading time. Besides, they increase the server load.

It’s not good for neither you nor your users! So, you should always remove these scripts and styles to make your website load fast.

Remove unneeded scripts and styles in Beaver Builder

Fortunately, Beaver Builder uses standard WordPress hook and function to enqueue scripts and styles. And thus, we can use other WordPress functions wp_dequeue_script and wp_dequeue_style to remove them.

I have tested on our websites and here is the code. You can put into your theme’s functions.php file. Remember to remove the line for the script/style you need to keep.

<?php
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'font-awesome' ); // FontAwesome 4
    wp_enqueue_style( 'font-awesome-5' ); // FontAwesome 5

    wp_dequeue_style( 'jquery-magnificpopup' );
    wp_dequeue_script( 'jquery-magnificpopup' );

    wp_dequeue_script( 'bootstrap' );
    wp_dequeue_script( 'imagesloaded' );
    wp_dequeue_script( 'jquery-fitvids' );
    wp_dequeue_script( 'jquery-throttle' );
    wp_dequeue_script( 'jquery-waypoints' );
}, 9999 );

One note is the last number 9999. It’s the priority for the callback function (I use an anonymous function in this example). The priority is high enough to make sure it overrides other enqueue calls.

With this trick, you remove about 9 scripts and styles from your website. Your website will be more lightweight and load faster. You can see an example of our company’s website to feel the speed.

Of course, removing scripts and styles is not enough to make a website fast. There are several actions need to take such as choosing a good hosting / VPS, configuring cache and optimizing images. But JavaScript and CSS is a big part of the picture. And removing unnecessary JS and CSS files is always recommended.


Also published on Medium.

4 thoughts on “How to remove unnecessary scripts and styles in Beaver Builder

  1. Useful article, but what about the list of modules with checkboxes in the BB options page here /wp-admin/options-general.php?page=fl-builder-settings#modules ? does unchecking these have the same aeffect? additional effect? on none at all?

Leave a Reply