[performance] Optimize Carbonmark Projects Page Based on Lighthouse Report

[0xemc]

What:

Optimize the Carbonmark projects page (https://www.carbonmark.com/projects?layout=grid&sort=recently-updated) based on the Google Lighthouse report findings.

Why:

Improving the page's performance, accessibility, and best practices will enhance user experience and potentially improve search engine rankings.

How:

Implement the suggested actions from the Lighthouse report to address identified issues.

Suggested Actions:

1. Leverage the font-display CSS feature to ensure text visibility during webfont loads【49†source】.
2. Minimize third-party usage to improve load performance【50†source】.
3. Mark touch and wheel event listeners as passive to improve scroll performance【51†source】.
4. Set explicit width and height on image elements to reduce layout shifts【52†source】.
5. Use the next/image component for appropriately sized images【53†source】.
6. Ensure buttons have accessible names for screen reader users【54†source】.
7. Make links discernible and unique for screen reader users【55†source】.
8. Provide sufficient color contrast between background and foreground colors【56†source】.
9. Ensure interactive controls are keyboard focusable【57†source】.
10. Make interactive elements indicate their purpose and state【58†source】.
11. Ensure visual order on the page follows DOM order【59†source】.
12. Avoid focus traps in any control or region【60†source】.
13. Direct user focus to new content added to the page【61†source】.
14. Use HTML5 landmark elements for improved navigation【62†source】.
15. Hide offscreen content from assistive technology【63†source】.
16. Associate labels with custom controls【64†source】.
17. Add appropriate ARIA roles to custom controls【65†source】.

Expected Outcome:

• Implementation of optimizations based on Lighthouse report.
• Improved performance, accessibility, and adherence to best practices.

Testing Criteria:

1. Conduct a follow-up Lighthouse audit to measure improvements.
2. Ensure all implemented changes function correctly and enhance user experience.
3. Validate accessibility improvements with screen reader testing.

Reference

CM_projects_page_-_Lighthouse_Report.pdf