[BUG] Low Lighthouse Performance Score (~44) — Heavy JS Execution & Non-Lazy Images

[AdityaTile04]

Describe the bug.

While testing the AsyncAPI website locally using Lighthouse in incognito mode (no extensions), the Performance score was low (~44) compared to other metrics (Accessibility 96, Best Practices 100, SEO 100).

The report suggests performance bottlenecks mainly due to:

• Heavy JavaScript execution (~4.6s)
• High main-thread work (~6.5s)
• Offscreen images not lazily loaded (potential savings ~1.38MB)
• Unused JavaScript (~194 KB) and unused CSS (~27KB)
• Large total network payload (~4.7MB)
• 8 long main-thread blocking tasks

These issues indicate optimization opportunities in JS bundle size, image loading strategy, and overall load performance.

Expected behavior

The website should load faster with improved Lighthouse Performance score (preferably 80+).

Expected improvements after optimization:

• Reduced JavaScript execution time and main-thread blocking
• Faster initial page load and better responsiveness
• Images loaded lazily to reduce first paint cost
• Smaller bundle size using tree-shaking/dynamic imports
• Better Core Web Vitals & overall user experience

Screenshots

Performance Audit Screenshot

Diagnostics Screenshot

How to Reproduce

Steps to Reproduce

1. Clone the AsyncAPI website repository.
2. Install dependencies:

   npm install
   
   

3. Build and run the project in production mode:

   npm run build && npm run start
   
   

4. Open the site in Chrome at: http://localhost:3000/en
5. Open Chrome DevTools → navigate to the Lighthouse tab.
6. Run a Performance Audit in Incognito mode with all extensions disabled.
7. Observe that the Performance score is around ~44, while Accessibility, Best Practices & SEO remain high.
8. Expand the Diagnostics section to view performance warnings, including:
   • High JavaScript execution time
   • High main-thread work
   • Offscreen images not deferred (missing lazy loading)
   • Unused JavaScript detected (~194KB)
   • Unused CSS detected (~27KB)
   • Large network payload (~4.7MB)
   • Multiple long main-thread tasks found

🖥️ Device Information [optional]

• Operating System (OS):
• Browser:
• Browser Version:

👀 Have you checked for similar open issues?

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

🏢 Have you read the Contributing Guidelines?

• [x] I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!