[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?

• [X] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• [X] I have read the Contributing Guidelines

Are you willing to work on this issue?

None

[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.

[lakshaydewan]

I would love to work on this issue, just give me a reply so i can start preparing the detailed proposal on what strategies will i be taking to solve the performance metrics. Would love to start working on this ASAP.