[FEATURE] Performance + Accessibility Improvement of website

[akshatnema]

Why do we need this improvement?

With the addition of multiple components, pages and MD files, it's now important for us, to make the website efficient for all web + mobile users. Currently, the performance of the website has critically low numbers in both web and mobile view, which can impact the efficiency and user views in the website.

On the other hand, it's also important that we add the necessary accessibility labels to the website. Currently, with the addition of many new illustrations, we have not added label elements for these tags.

How will this change help?

The performance improvement will help the website render the contents more efficiently to the users and will drastically enhance lighthouse key metrics.

Screenshots

Some screenshots of lighthouse reports:

How could it be implemented/designed?

Following tasks need to be done in this issue:

• Make proper research + analysis on what needs to be fixed to improve performance in both mobile + web view.
• Propose the solution to improve the performance of website, at least 95% on each page.
• Search for the elements that require labels to improve accessibility.
• Create a workflow to analyse lighthouse reports for each page (not docs, blogs or any mdx rendered page0

🚧 Breaking changes

Yes

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

None

[sagarkori143]

This is a great project which was in my mind since the time I started contributing to the AsyncAPI. Looking forward to draft a fully researched and detailed proposal ✨

[nikhilkalburgi]

I would like to be actively involved in addressing this performance issue and closely monitor the progress to ensure improvements in web vital metrics.