Babylon 3D Viewer for Wordpress - Defer or Async loading

I have a model hosted on the homepage of my site, with the Babylon 3D Viewer for WordPress plugin. I’m trying to avoid having the loading of the model count towards my page load time, is there something I can add to the short-code to async or defer the JS?

Pinging @labris, who I believe is the top expert on that WordPress plugin.

1 Like

Thank you.

I assume you are using this Babylon Plugin for Wordpress - it uses wp_enqueue_script which can be made async by installing this plugin:

Note that it will defer loading of all other WP plugins that load scripts on your page using wp_enqueue_script.

1 Like

The easiest way is to use Async JavaScript – WordPress plugin | WordPress.org
With this plugin yom may tune which scripts you need async.
Or turn on async for the specific plugin with something like - Add Defer and Async to WordPress Enqueued Scripts | WP-Mix
There are other methods too - How to Defer Parsing of JavaScript in WordPress (4 Methods)

2 Likes

Thank you. So I take it this needs to be done through an additional plugin, there is no way to do it through the html shortcode?

I am not sure about what do you mean with “html shortcode” since this is PHP language. You may add to your functions.php file the php snippet as mentioned here - Add Defer and Async to WordPress Enqueued Scripts | WP-Mix and it will do it always automatically.

they Plugin loads the models via a code snippet like this:

              <ground receive-shadows="true"></ground>
                     <model url="https://models.babylonjs.com/CornellBox/cornellBox.glb">
                    </model>
              <camera radius="100">
                <behaviors>
                </behaviors>
              <position x="3" y="3" z="3"></position>
              </camera>
              <scene>
                <clear-color r="0.2" g="0.8" b="1"></clear-color>
              </scene>
            </babylon>

I was hoping to there was something I could do with this language to change the way it loads, but if not I can just use a plug-in.

1 Like

Looks like you are using react-babylonjs, without telling us what plugin you use (with link to its official webpage), people can’t help.

1 Like

This is Babylon Viewer HTML markup, so all is correct.

Here it is impossible to tell the script to be async loaded. You either need to edit functions.php of our theme or use a plugin for async loadind (which is completely normal).

Makes sense, I just have too many plugins running already so I wanted to try to avoid using another one, but that’s life. Thanks for the help.