I used the Babylon JS CDN on a Wordpress site for a 3d hompepage but the page speed seems to be really slow. The Babylon JS library seems to a reason why it is slower. I ran a Lighthouse test and there is a lot of unused JS and it also seems to block rendering by quite an amount.
The site is here: https://www.finalto.com/
Is it possible to only load parts of the CDN or is there any other measure I can do to try and increase page load speeds?
First you should NOT use our CDN from a prod environment
Then you should not use all the package directly because as you mentioned it is full of stuff you may not need.
I highly encourage you to switch to a bundler (webpack, rollup) and use our ES6 packages:
Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation (babylonjs.com)
(BTW: I love your site! It is really cool)
Hey,
Thanks for the compliment. And yes, I am looking at moving it away from the CDN. Is it possible to use a bundler such as Webpack or Rollup on Wordpress?
I normally use the ES6 packages with Vue/Node etc
Thanks,
Callum
I have no idea ;D
You don’t need to use it on Wordpress. Just bunlde your code to js and deploy with Wordpress.
Do you defer your JS scripts? - <script>: The Script element - HTML: HyperText Markup Language | MDN
Would it be possible for you to link to a guide or an article for this? I am a bit new to doing things like that.
The scripts are loaded in the footer and are deferred at the moment.
Just as example - one of possible approaches: Babylon.js docs
It seems like you are referencing babylon twice:
One with a specific version (which doesn’t work this way), and the other the actualy script and the loaders script, which, i assume, is where you are actually getting the right engine reference.
As @labris said, you can have an external project just bundling the classes you need from babylon and deploying it to a CDN or your server, and serve this file alone. I can only assume this file will be smaller than the 1.6MB needed for the full UMD version of Babylon
Oh, and - awesome site!!!
Hiya,
I think that was a test to see if loading the babylon JS files via the WP enqueue script function would load quicker than loading via the footer scripts. I have removed this now, but the site has cached it so you can see it twice.
Just trying to wrap my head around bundling it separately. I will check out the document @labris linked and see if I can get something working better.
And thanks for the complement!
Callum
If you plan to use Babylon at other pages too, it is better to stay with UMD version of Babylon.
You may also load the script and the scene after DOMContentLoaded behind some nice placeholder which will disappear when the scene will be ready.
Note that for the first page opening every user already will have such placeholder because of cookies alert.
I had no problems opening your site on mobile, and actually I don’t think you need to improve anything at the front page 
I think for now its only used on the homepage. One thing it does not have is a loading screen on the actual Babylon JS scene which might help. The client is just a bit frustrated with the loading speed of the page in general.
