How to Remove Unnecessary Scripts and Styles in Beaver Builder

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.

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

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. If you're interested in removing unused JS and CSS in WordPress in general, read this post for more detail.

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.