Beaver Builder without jQuery

This is a follow on from my last video where I was removing unused WordPress assets from a simple Beaver Builder page for performance.  The image below shows the WordPress files removed are in red, but by far the largest render blocking resource on that page is jQuery.

Do we remove it?

Hint: the answer is almost always no!

Reasons not to remove jQuery

Beaver Builder depends on jQuery!

• Remove it from the backend and the editor does not work.
• Remove from the front-end and many modules break. (a list of what breaks is at the bottom).

Removing jQuery from Beaver Builder has few benefits

• Most of the WordPress ecosystem depends jQuery.  It’s likely to be needed by another plugins.
• It’s used on approximately 70% of all sites so its likely to be cached in the visitor’s browser. (although maybe not your version)
• Beaver Builder’s default performance is already good as most assets are added as needed.
• If we delay JavaScript loading until user interaction  jQuery does not slow what Google presently measures.  (Although. as WP Rocket mentions there are some things you may wish to exclude from this. Some consider this cheating, but I am not sure this stand up as Google claim to be concerned with load experience).
• There’s a ton of useful jQuery snippets (some on the Beaver Junction site) and it makes adding custom JavaScript easier.

Some might even argue that with the control jQuery offers over the DOM it could out performance vanilla JS in some situations.

Reasons to remove jQuery

• Beaver Builder adds it’s own (small, but sometimes unneeded) javaScript files. These are difficult to remove as they are autogenerated and can get renamed.  But,  remove jQuery and Beaver Builder removes them too.

The video below shows Beaver Builder responding to jQuery being removed. Here we have the default layout.js (for individual layouts/pages) and additionally a bundle.js (for the whole site). The bundle file is not a default file, but added because of my Beaver Themer header.  It is not a default Beaver Themer either.  Without the default layout file this Page Builder “bloat” comparison would look different.

• Loading jQuery where it is not needed is for our ease rather then website visitors. Perhaps pragmatic, but not ideal.
• Although jQuery’s growth has been faster then WordPress  (also like WordPress)  it’s popularity is waning.
• We are hearing more voices talking about reducing dependence on  jQuery in WordPress Speed Matters and from MakeWP. It has not been activated on the recent default themes for WordPress.
• My own reason is I would like to reduce my business dependency on WordPress .

The “Gutenberg will kill all other Page Builders” rhetoric has encouraged me concentrate on improving my own frontend skills.  I am now working on a CSS framework that I can use with and without Beaver Builder. In that context is seems sensible to look for code solutions that are not depended on jQuery too.

In the case of my demo page I needed to consider jQuery free forms and a mobile menus.

WPCodeBox –  25% Off Coupon

Just enter “beaverjunction” to get the best discount available.

What I have done (so far) to have a  jQuery free Beaver Builder starter site

As mentioned in other video WPCodeBox  as been significant in helping me. Mostly because it makes it easy for me to work conditionally.  I can easily turn off what is needed and return back to Beaver Builder defaults for the vast majority of the time. Also it allowing me to bring Sass CSS to WordPress.

I use the Beaver Builder theme which uses  jQuery.

Mostly Beaver Themer is doing the work and so I have the snippet (below) so I can remove the BB theme styles and JS .
I add back my own “normalise” css, but so far have only done this as part of creating my new starter website where I plan to use sass CSS to control all the main theme and builder styles.

<?php 
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'base' );
wp_dequeue_style( 'fl-automator-skin' );
wp_dequeue_script('fl-automator');
}, 1000 );

Although there are JavaScript free themes I prefer BB theme because:

• It does not get bloated having to compete in the wider WP market.
• It nicely opens my page builder page full width and removes the titles.
• I know it well and it’s never once let me down!!!

Using WPCodeBox’s conditions builder to remove frontend jQuery

This snippet removes jQuery

add_action( 'wp_enqueue_scripts', function() {
 wp_dequeue_script( 'jquery');
 wp_deregister_script( 'jquery');   

}, 20 );

These conditions remove it the frontend, but every thing is normal for logged in users. You will need to check the fronted as a logged out user in another browser or incognito mode.

This removes from everything that is not a post

This below runs the script on pages (working the same as above)
Due ( I believe) to WP’s origins as a blogging platform “home” is expect to be a place of posts. I added an “OR” condition to get around this.

Of course,  you can set it up to runs on individual pages, post and custom post types.

Menu and contact form replacements

I’ll do follow up posts on this as I intend to create CSS forms and menus CSS set up I can use both with Beaver Builder and without.

In short I added some very rough custom CSS to WP menu widget for desktop view and for mobile use this from W3 schools.

With a menu shortcut to dynamically output the menu there. Screen reader take note of responsively set display:none; so have the menu in the html is not an issue there and allows and independent treatment.

For the subscription form I used Formspark.io  connected to a basic HTML form I styled.

Modules that don’t need jQuery

• HTML
• Text
• Heading
• Button
• Photo
• Separator
• Post (if using column and list views only)

BB modules that break without jQuery

• Menu
• Contact form/ Subscribe form
• Accordion/tabs
• Gallery (disappear entirely unless set to photo link)
• Audio/ video (shows native browser styling)
• Testimonial
• Sliders (both)
• Countdown/ Number counter
• Pricing Table

Other loses:

• Magnific popup – a nice little feature of the BB theme where post images can be set to open in a lightbox (as used in this post)
• No smooth scroll to link ID