perf: improving performance of website

[patilpratik1905]

Improvisation 1 : Implemented dynamic Imports for mermaidjs

Affected File : MDX.tsx
While analyzing Lighthouse performance reports, I noticed that the Total Blocking Time (TBT) was significantly high.
Further breakdown showed two major contributors:

1. Heavy JavaScript execution time
2. Loading of unused JavaScript chunks

To address this, I analyzed the largest chunks impacting the main thread and identified one that primarily included Mermaid.js a visualization library that wasn’t required on all pages.

Implemented Changes

• Replaced direct imports of mermaid.js with dynamic imports and conditional loading.
• Ensured that only pages actually using Mermaid diagrams load the library.
• Reduced unnecessary JS evaluation on pages that don’t require Mermaid.

Impact

• Decreased JS execution time for non-Mermaid pages.
• Reduced main thread blocking and improved TBT.
• Prepared the foundation for similar optimizations across other large chunks.

Aim to bring TBT down from the current 500–600 ms range to around 150–200 ms and improving the overall performance of website

Linked Issue : #3186

Improvisation 2 : Font Performance Optimization

1. Next.js Fonts Implementation
   Files Changed:
   utils/fonts.ts (new) - Inter & Work Sans config
   pages/_app.tsx - Apply font variables
   tailwind.config.ts - Update font families
   pages/_document.tsx - Remove Google Fonts links
   styles/globals.css - Add font-display: swap
   Performance Impact:

• Eliminated render-blocking Google Fonts CSS
• Reduced external requests from 3 to 0
• Faster font loading with preloading
• Better fallbacks with system fonts

2. Fira Code Optimization
   Files Changed:
   styles/globals.css - Replace external import with self-hosted @font-face
   pages/_document.tsx - Add Fira Code preload
   tailwind.config.ts - Optimize mono font stack
   public/fonts/FiraCode-VF.woff2 (new) - Self-hosted font
   Performance Impact

• Eliminated render-blocking external CSS import

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	829a1d2
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/6907a1ef920760000869f248
😎 Deploy Preview	https://deploy-preview-4489--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[aeworxet]

@asyncapi/bounty_team