Perf/lighthouse optimization

[abbys-code-hub]

Closes #22

Description

This PR implements comprehensive Core Web Vitals and Lighthouse optimizations for the Wraith Protocol landing page and secondary pages. By self-hosting assets, tree-shaking heavy SDKs, lazily loading below-the-fold components, and inlining critical CSS, we have achieved 95+ scores on all 4 axes for both mobile and desktop views.

---

⚡ Performance Audits Summary

Axis	Baseline Mobile	Optimized Mobile	Baseline Desktop	Optimized Desktop	Target
Performance	63	96 🟢	98	100 🟢	>= 95
Accessibility	100	100 🟢	100	100 🟢	>= 95
Best Practices	100	100 🟢	100	100 🟢	>= 95
SEO	100	100 🟢	100	100 🟢	>= 95

📈 Core Web Vitals Metrics (Mobile)

• First Contentful Paint (FCP): Improved from 4.7 s to 1.7 s 🟢
• Largest Contentful Paint (LCP): Improved from 5.2 s to 2.6 s 🟢
• Total Blocking Time (TBT): Reduced from 210 ms to 110 ms 🟢
• Speed Index (SI): Improved from 6.5 s to 2.0 s 🟢
• Cumulative Layout Shift (CLS): Stable at 0.011 🟢

---

🛠️ Key Changes

1. Font Optimization (Self-Hosting & Subsetting):

   • Removed external render-blocking Google Font CDNs.
   • Downloaded and subsetted local .woff2 files for only the used weights of Space Grotesk, Inter, and JetBrains Mono.
   • Added font-display: swap to all font-face definitions to prevent FOIT (Flash of Invisible Text) and added critical preloads inside index.html.

2. Main Bundle Tree-Shaking:

   • Replaced dynamic imports of @wraith-protocol/sdk inside StellarMetrics.tsx with local configurations. This allowed Rollup/Vite to fully tree-shake the heavy @stellar/stellar-sdk package.
   • Result: Main JS bundle size dropped from 1.23 MB to 204 KB (62.89 KB gzipped).

3. Homepage Component & Page Code-Splitting:

   • Wrapped below-the-fold components (Architecture, ForDevelopers, Chains, StellarMetrics, Compare, Showcase, EcosystemPartners, CtaStrip, Footer) and secondary route pages (/faq, /stellar, /use-cases, /privacy) in React.lazy() and Suspense.
   • This drastically decreased the initial execution time of the React main thread, lowering Mobile TBT.

4. Above-the-Fold Pre-rendering:

   • Inlined static HTML skeleton markup for the Header and Hero sections directly inside <div id="root"> inside index.html. The browser renders this instantly while downloading the JS bundles.

5. Critical CSS Inlining:

   • Created a post-build node script scripts/inline-css.js that injects the compiled stylesheet contents directly inside <style> tags in index.html and deletes the external stylesheet asset to eliminate render-blocking CSS downloads.

6. Image Optimization:

   • Resized and compressed the high-res brand logo.png from 35 KB down to 2.4 KB.
   • Added explicit width and height dimensions to the brand logo, footer logos, and partner SVGs to completely eliminate Lighthouse "unsized images" diagnostics and layout shifts.

7. CI/CD Lighthouse Integration:

   • Configured .github/workflows/ci.yml and .github/lhci-desktop.json to boot a preview server on every pull request, run Lighthouse CI on mobile and desktop profiles, upload results to temporary public storage, and post a markdown score card comment directly on the PR.

---

🧪 Verification

• Verified all optimizations locally running audits via Headless Chrome Lighthouse CLI.
• Ran the full test suite (pnpm test) to ensure all lazy routing and axe accessibility test expectations pass successfully.

[vercel]

Someone is attempting to deploy a commit to the truthixify's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@abbys-code-hub Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[truthixify]

Clean merge. Lighthouse CI config + 96-line PERF.md + 131-line font preload + woff2 assets + index.html optimizations + workflow. Thanks @abbys-code-hub.