Performance Optimisation & Core Web Vitals

[DokaIzk]

Title: perf: optimise Next.js bundle and achieve green Core Web Vitals scores

Labels: frontend performance quality
Complexity: medium
Branch: perf/core-web-vitals
Depends on: FE-6, FE-7, FE-8

---

Problem Context

A slow frontend undermines the credibility of SoroScan as a production-grade tool. Google measures Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) as ranking signals and user-experience indicators. Achieving green Core Web Vitals is both a UX requirement and an SEO necessity.

---

Scope

Included:

• @next/bundle-analyzer audit and large dependency elimination
• Dynamic imports (next/dynamic) for heavy components (charts, editors, Monaco)
• Image optimisation with next/image across all pages
• Font optimisation with next/font to eliminate layout shift from font loading
• Route-based code splitting verification
• web-vitals library integration for reporting LCP, CLS, INP to console (dev) and analytics (prod)
• Lighthouse CI in GitHub Actions reporting scores on every PR

Not included:

• CDN / edge caching setup (infrastructure-level)
• Service worker / PWA (separate issue)

---

Implementation Guidelines

Files to create/update:

• next.config.ts — enable bundleAnalyzer, set images.domains, configure swcMinify
• src/app/layout.tsx — switch to next/font for all typefaces
• src/lib/web-vitals.ts — reportWebVitals callback
• src/app/page.tsx — use next/image for all hero/logo images
• .github/workflows/lighthouse.yml — Lighthouse CI action

Bundle analysis workflow:

ANALYZE=true npm run build
# Opens bundle-analyzer in browser — identify chunks > 100 KB

Dynamic import pattern for heavy charts:

const EventTimelineChart = dynamic(
  () => import('@/components/charts/EventTimelineChart'),
  { loading: () => <Skeleton className="h-64 w-full" />, ssr: false }
);

Lighthouse CI config:

# lighthouserc.js
module.exports = {
  ci: {
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
      },
    },
  },
};

Constraints:

• First-load JS bundle for the landing page must not exceed 200 KB (compressed)
• No layout shift from late-loading fonts or images (use width/height on all <Image> components)
• All dynamic() fallbacks must use shadcn <Skeleton> components to avoid CLS

---

Acceptance Criteria

• Lighthouse Performance score ≥ 90 on the landing page
• LCP ≤ 2.5 s, CLS ≤ 0.1, INP ≤ 200 ms on desktop
• First-load JS ≤ 200 KB (gzip) on the landing page
• All images use next/image with explicit dimensions
• All fonts loaded via next/font with display: swap
• Lighthouse CI action blocks PRs that regress Performance below 90

---

---

---

[Kayce10]

@Kayce10 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Please assign this issue to me my eta is 4 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kayce10 to this issue.

[originaldefiboy]

@originaldefiboy has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hey maintainer i am familiar with this task kindly assign issue to me.
Thank you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @originaldefiboy to this issue.

[drips-wave]

Congratulations, @originaldefiboy! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @originaldefiboy: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊