W3 Total Cache Conflict

Beaver Builder
21

Hey Lloyd,

It’s hard to say exactly. Minification can break JS in other plugins that in turn breaks BB’s JS. Also, we’re loading in a lot of core scripts and I do believe I’ve seen some issues with third party minification and TinyMCE.

I’m not sure when I’ll get to it, but minification is going to become part of our deployment process soon. It’s been a little while since I’ve tested our JS against minification though. Can you tell me what plugin you’re using?

Thanks,
Justin

22

What would be helpful to me is if you could tell me specific code that is included in all of your scripts. I"m using https://wordpress.org/plugins/autoptimize which not only does so far the best job in minimification but also allows the very easy exclusion of scripts. So if I give it a short snippet of code that is in all of your scripts (that appear in the editor, hopefully not in the front end) then they would be excluded from minificatoin. Not sure if there’s a better way. BUt right now I’m having to deactivate the plugin any time I want to go into Beaver Builder. That’s a pain to me. And it means for others I either need to not use Beaver Builder or not use minification, neither of which is ideal.

23

Hey Lloyd,

What would be helpful to me is if you could tell me specific code that is included in all of your scripts.

When active (ie. editing a page) the builder loads in around 8 scripts written by us and another 20 between third party libraries and WordPress core (mainly for the media library and TinyMCE). So it’s hard to say if the issue is with us or some other third party script. For what it’s worth, I excluded our scripts and was still getting an error, so it looks like the issue is somewhere else.

The easiest way for you to see what scripts are loaded is to open Chrome’s Dev Tools > Resources. I know this isn’t ideal, but one workaround is to switch back to W3TC as we’ve recently added a flag that tells them not to minify when the builder is active.

In the future we will be bundling and minifying all scripts written by us in our build process, but again, that may not solve the issue of third party scripts with JS errors.

Sorry I don’t have a better answer for you!

Justin

24

I’m having the same issue with Autoptimize active. Tried excluding all BeaverBuilder scripts to no avail. One costly consequence of this behaviour is as follows:

  1. I have DEV, TEST and LIVE environments. LIVE gets plenty of traffic, so I don’t want to modify pages with Beaver Builder there while deactivating Autoptimize, which would bring down site performance.

  2. So, I edit BeaverBuilder pages on DEV, where I can deactivate Autoptimize and not have to worry about it affecting site visitors. However, this is not best practice. i.e. DEV is meant for code development, not content development.

  3. In consequence, I need to push content (DB _posts and _postmeta tables) via Migrate DB Pro from DEV to TEST to LIVE. This will overwrite new content on LIVE.

  4. Ideally, having BeaverBuilder work with Autoptimize will allow me / site owner to develop content on LIVE, as well as allow me to change pages built with BeaverBuilder there. I can then pull to DEV and TEST so content is always in sync between the three environments. With latest content, I can carry on dev work on DEV and push code only to TEST and then LIVE.

I hope this makes sense. Autoptimize is the best I’ve tried so far, even beating WP Rocket in how it properly and timely minify and combine CSS and JS files, and has the highest compatibility with even the most exotic of plugins that adds CSS and JS in ‘unconventional’ ways. e.g. BeaverBuilder which outputs separate CSS and JS files for each page built with it.

Thanks!

25

Hey David,

It looks like the issue is that Autoptimize is pulling in the HTML templates for WordPress’ media manager because those are underscores templates that must be in script tags. Here’s an example…

<script type="text/html" id="tmpl-uploader-status">
	<h3>Uploading</h3>
	<a class="upload-dismiss-errors" href="#">Dismiss Errors</a>
	<div class="media-progress-bar"><div></div></div>
	<div class="upload-details">
		<span class="upload-count">
			<span class="upload-index"></span> / <span class="upload-total"></span>
		</span>
		<span class="upload-detail-separator">&ndash;</span>
		<span class="upload-filename"></span>
	</div>
	<div class="upload-errors"></div>
</script>

It’s perfectly normal to do that, and it’s WP core code, so there’s not much we can do about it. You may consider contacting the Autoptimize folks as they really shouldn’t be pulling that code in as JavaScript. If you do, feel free to reference this thread. I would be more than happy to join that conversation.

Justin

26

Thanks Justin.

I’ve forwarded this to Autoptimize author:
https://wordpress.org/support/topic/autoptimize-conflicts-with-wp-beaver-builder?replies=1#post-6795084

Hope there is a fix coming.

27

Same problem with WP Rocket. Minifying CSS or JS breaks the site. I have been in contact with their support and they were not able to fix it either. :confused: