Improving SEO / Lighthouse / PageSpeed Insights performance for 3D?

Questions
,
1

Wondering if anyone knows some tricks to improving SEO / Lighthouse / PageSpeed Insights performance for pages (especially home pages) with embedded 3D?

We’re using deferred script loading, small/optimised assets, gzip compression, selective/granular module imports with tree shaking etc (bundle size is 3.7mb, mostly Babylon modules) but “time to interactive” especially main thread “script evaluation” is quite large.

I’ve informally benchmarked a number of Babylon.js & Three.js demos and third-party apps with a range of results but still in a similarly poor ballpark for “time to interactive” and “script evaluation”.

Anyone know of anything else we can try to improve SEO performance?

2

One thing you can do is have a loading scene that requires little to no external modules from babylon’s core.
So you have 2 scenes - a loading scene that renders very quickly, and the real scene that starts after the loading scene is finished (or even after pressing a “continue” button).

The other way would be to not render 3D at all, until the page finishes rendering. Wait for user interaction with the page, very similar to the way youtube embed videos.

4 Likes
3

Thanks @RaananW we’ll try out these options.

1 Like
4

Just a follow-up. I tried @RaananW’s second suggestion using increasingly aggressive measures:

  • delayed 3D asset loading and scene initialisation and rendering until after document.readyState = “interactive” (a tad better)
  • then delay until document “complete” (good)
  • then add an additional timeout of 200ms after document “complete” (awesome)

I was able to go from 14.2s time to interactive (Lighthouse performance score of 56) before, to 2.6s time to interactive (performance score 90).

It seems to be OK in our use case as all the 3D is further down the page so the user is less likely to notice the delay on the 3D.

Thanks again @RaananW !

3 Likes
5

Awesome news! Do we have a doc page for optimizing pageload/Lighthouse? I’m sure this would be useful for many users @PirateJC

2 Likes
6

I’m no expert on this aspect obviously, but I’d be happy to contribute what I just learned to this doc page, given just these simple measures made such a huge difference in our case.

2 Likes
7

I don’t think we have a doc page dedicated to this topic, but this page seems like the best place to add a new sub-category to.

@inteja - Would you mind taking a pass at updating this page. Perhaps add a new section to the doc that talks about your learnings in this area? You can add me as a reviewer to your PR.

Thanks for your desire to teach others what you’ve learned!

2 Likes
8

I’ll have a crack at it first chance I get - likely within a few days.

2 Likes