search

shuding / cobe

5kB WebGL globe lib.
https://cobe.vercel.app
MIT License
3.15k stars 169 forks source link

Lighthouse / PageSpeed Insights #38

Closed benmccann closed 2 years ago

benmccann commented 2 years ago

Hi, I'm working on a new homepage for SvelteKit and one idea we're considering is adding a WebGL globe - possibly with COBE. We try to keep our PageSpeed score high since developers who are considering us sometimes use our site as an example of how performant Svelte is (example). We consistently score in the 90s. However, the COBE site scored only 47 for me. I'm not sure if this is because of COBE itself or some other aspect of the site. It'd be great if the COBE site scored high so that I could have confidence that using COBE would not affect our own page's speed.

https://pagespeed.web.dev/report?url=https%3A%2F%2Fcobe.vercel.app%2F&form_factor=mobile

shuding commented 2 years ago

This is definitely critical and it's what COBE was made for. I think COBE should be way more performant than most of WebGL solutions out there. It's strange to have only 47, because it scored 100 for me:

CleanShot 2022-08-18 at 16 44 40@2x
benmccann commented 2 years ago

It's very bizarre that Chrome DevTools and PageSpeed Insights are giving such different results for this. I've filed an issue in the Lighthouse repository: https://github.com/GoogleChrome/lighthouse/issues/14301. Hopefully they can shed some light on it.

shuding commented 2 years ago

Btw let me know if there's anything I can help, if you decide to go with this library :)

benmccann commented 2 years ago

They said it's because the web-based PageSpeed Insights tool just runs WebGL with software rendering and there's a ticket to track that: https://github.com/GoogleChrome/lighthouse/issues/8557

I wonder if there's a way to detect if hardware rendering is enabled and only display the animation on https://cobe.vercel.app/ if it is?

shuding commented 2 years ago

This means every WebGL page will have the issue with PageSpeed Insights then. Personally I don’t think it makes sense to hack it to bypass performance measurement tools (because it can’t represent the real world usage then). But yeah you can for sure render a static image instead of this component if hardware rendering isn’t supported.

benmccann commented 2 years ago

I guess the question is what will you want to show to a real user if they don't have hardware acceleration. I agree we shouldn't special case performance measurement tools. I'm not sure what the experience on a non-accelerated machine would be generally though and whether it still makes sense to show the animation in that case

shuding commented 2 years ago

Yep! In our product we show a video of that same rotating globe if WebGL isn't supported, I think it works great in this case too.

benmccann commented 2 years ago

Cool. Thanks for the help!