PageSpeed Insights delivers incredibly bad results with Model Viewer

[jigendev]

Hello.

I have recently made usage of the wonderful asset that is Model Viewer on my website.

Curious of the impact it had on the performances, I ran a few tests ussing the Google's PageSpeed Insights tools.
I so made a few adjustements and won a very very few seconds, but it's still horrible, the adjustements were:
-- Async the script
-- Uploading it to the network so that it's locally accessed by Shopify.

I can't go past that sadly.

I don't notice my site to be too slow honestly nor my friends does, should I just ignore that? Despite it being e-commerce and so having good scores on such things seems important.

I link to you some images of the insights, and uploaded a website preview here: https://gempagestestte.myshopify.com for you to see.

Thank you for everything.

[elalish]

@reddingtondev Yeah, as you've identified, PageSpeed will tend to make MV look awful even though we actually keep things quite responsive. The reason is the choice of metric, which is always a compromise and was not chosen with us in mind. They define the page as loaded when the last 50ms task is finished; unfortunately we do have a hitch a bit longer than that for shader compilation (though we're working on improving this). The problem is that happens after the GLB is downloaded, which means all of the download time (scaled for a slow internet connection) is added to the page load time even though the page is perfectly responsive and has a progress indicator and everything during that period.

So, yes, you can choose to ignore it, as the metric doesn't apply well to this situation. However, since page speed affects search ranking, it's probably worth optimizing. Therefore I'd recommend you take a look at our Lighthouse scores page, which demonstrates how you can get very good page speed scores with a little bit of extra work. This is the more complex example, but it also links to a simpler version. Just inspect the source to see what was done. The key is to only trigger the model to download after some kind of user interaction; this will keep the crawlers from triggering model download and destroying the score.

[jigendev]

I see, but as yo ucan see on my site, the product is displayed right on-load, which appears directly when you open the page.
So if it waits an interaction, it would kind of.. destroy the whole principle of it.

May loading the .js after the HTML doc is ready fix that?

How would you go to lazy load the whole JS library of Model Viewer?

[elalish]

How would you go to lazy load the whole JS library of Model Viewer?

The link above shows exactly how to do that. The trick is, what should cause the library to load? Obviously you can put the model below the fold, but that defeats your purpose. I chose instead to load on any interaction (mouse move, scroll, click, etc). It has the effect of basically loading immediately, but in such a way that a crawler won't trigger it.