Slow Livepeer home page without cache

[ECWireless]

🧪 Performance Benchmark Report — https://explorer.livepeer.org/

Date: 2025-11-12
Environment: Lighthouse v13.0.1 (mobile emulation, slow-4G, 4× CPU slowdown)
Runs: 3 consecutive (home-2025-11-12-111910-run1, -112545-run2, -112835-run3)

---

📊 Median Results (3-run average)

Metric	Run 1	Run 2	Run 3	Median	“Good” Threshold	Status
Performance Score	~0.68	~0.67	~0.68	≈ 0.68	≥ 0.90	⚠️ Needs improvement
First Contentful Paint (FCP)	1.9 s	2.0 s	2.0 s	2.0 s	≤ 1.8 s	⚠️ Slightly slow
Largest Contentful Paint (LCP)	1.9 s	2.0 s	2.0 s	1.9 s ✅	≤ 2.5 s	✅ Good
Speed Index	2.2 s	2.0 s	2.1 s	2.1 s ✅	≤ 3.0 s	✅ Good
Cumulative Layout Shift (CLS)	0.00	0.00	0.00	0.00 ✅	≤ 0.10	✅ Excellent
Total Blocking Time (TBT)	3.3 s	3.2 s	3.1 s	≈ 3.2 s ❌	≤ 0.2 s	🚨 Poor
Time to Interactive (TTI)	33 s	32 s	31 s	≈ 32 s ❌	≤ 4 s	🚨 Poor
Total Transfer Size	5.6 MB	5.5 MB	5.4 MB	≈ 5.5 MB ❌	< 2 MB	🚨 Heavy

---

🩺 Diagnosis Summary

✅ The good

• LCP, CLS, and Speed Index are strong. Layout and image optimization are excellent.
• Server response (TTFB ≈ 50 ms) is fast; backend isn’t the bottleneck.

⚠️ The bad

• ~4.3 MB of JavaScript across ~75 scripts overwhelms the main thread.
• High Total Blocking Time (3 s +) and TTI > 30 s indicate the UI remains unresponsive after paint.
• Hydration and third-party scripts likely block interactivity.

---

🧩 Root Causes

1. Excessive client-side JS – large bundles and non-lazy widgets.
2. Hydration bottlenecks – React mounts too many components at once.
3. Unoptimized 3rd-party scripts – analytics and embeds load early.

---

🛠️ Recommended Actions (Priority-Ordered)

Priority	Goal	Recommended Actions
1️⃣ Reduce shipped JS	Keep each route ≤ 350 KB gz	• Run @next/bundle-analyzer. • Convert heavy UI to Server Components. • Lazy-load off-screen code (dynamic(import, { ssr:false })).
2️⃣ Defer non-critical scripts	Lower TBT / INP	• Mark analytics/tracking with strategy:"afterInteractive". • Defer or async third-party scripts.
3️⃣ Parallelize and cache data fetching	Reduce blocking work	• Fetch data in parallel on the server. • Use ISR (revalidate) or CDN caching for static data.
4️⃣ Audit hydration hotspots	Improve interactivity	• Profile top React components for long tasks. • Split effects; use React 19 useTransition.
5️⃣ Trim assets	Shrink page weight	• Remove unused libs and polyfills. • Ensure images remain optimized (currently fine ≈ 0.27 MB).

---

🎯 Target Benchmarks

Metric	Current	Target	Improvement
TBT	3.2 s	< 0.2 s	−94 %
TTI	32 s	< 4 s	−88 %
JS Transfer	4.3 MB	≤ 0.5 MB gz	−88 %
LCP	1.9 s	≤ 2.2 s	maintain
CLS	0.00	≤ 0.10	maintain

Achieving these should raise the overall Lighthouse Performance Score from ≈ 0.68 → 0.93–0.96 and deliver strong Core Web Vitals for real users.

---

📈 Additional Steps

• Add a Lighthouse CI job to GitHub Actions for regression alerts.
• Re-run benchmarks after JS reduction to confirm improvement.

---

Compiled from 3 Lighthouse v13 mobile runs (2025-11-12).

[ECWireless]

Check #433 for performance improvement ideas

[Roaring30s]

@ECWireless I can attack this next once my other PRs are good to go.