perf: optimize lighthouse score

[neo773]

Optimizations:

• Patched GraphiQL to load fonts via CDN, reducing CSS Bundle size from 525kb to 165kb (-68% reduction)
• Optimized Lottie animations files reducing payload by another 50%
• Optimized all PNGs and JPEGs
• Some accessibility issues

For accessibility I've fixed the 1st party issues rest all are caused by 3rd party like GraphiQL

Report for /playground

Report for /

/claim #216
/claim #217

fixes #216
fixes #217

[neo773]

@amitksingh1490
Fixed!

[amitksingh1490]

@neo773 can you deploy this change on https://neo773.github.io/tailcallhq.github.io/. want to check the lighthouse score now

[amitksingh1490]

@neo773 Screenshot @tusharmath shared in the issue was for mobile audit and you have shared it for desktop audit.
Last deployed changes on https://neo773.github.io/tailcallhq.github.io/playground/
is not close to 100% on both the pages

[raikasdev]

Google's pagespeed is a more realistic Lighthouse run being not affected by eg. extensions: https://pagespeed.web.dev/analysis/https-neo773-github-io-tailcallhq-github-io/50w4z55rwq?form_factor=mobile

[neo773]

@raikasdev

Sorry, I have to disagree on this one.
Lighthouse is actually more accurate here, as PageSpeed is flagging issues that are out of my control, such as "Reduce JavaScript execution time." This includes the Lottie animation library, which alone adds 320.0 kB to the bundle.

Lighthouse's diagnostic is also inaccurate as it's doing CSS coverage for home page and excluding Docusaurus content.

[neo773]

Also I pushed a change that adds avif images

[raikasdev]

Pagespeed is Lighthouse, but it just runs on Google's servers. That's the environment the search engine cares for, if the goal here is to get better SEO and load times.

Lighthouse's diagnostic is also inaccurate as it's doing CSS coverage for home page and excluding Docusaurus content.

It's not inaccurate. It means that there is useless CSS rules loaded on the home page that are only on Docusaurus content pages.