Fonts didn’t load, interactions lagged, and memory crashes killed usability. Post-revamp, LCP dropped by 92%, scroll and clicks became instant, and every font now renders crisply - restoring product visibility and user confidence.
The site was so broken, even DevTools couldn’t breathe.
https://www.loom.com/share/c1543bb4993e44a2a4c9986ed5043df3?sid=6fbe93bf-a142-47d1-977d-f00afdbf84c8
Summary Table of Bottlenecks Injected:
| CWV | Bottlenecks | Impact |
|---|---|---|
| LCP | Font overload, CSS bloat, JS size, render-all | Slow First Paint, Blank screen, user bounce |
| CLS | Late fonts, JS DOM injection, unstyled elements | Jumps, visual instability, lower trust |
| INP | Heavy JS, event spam, state/context chaos | Slow UI, dropped inputs, rage clicks |
Business Mapping:
| Business Metric | Affected By | Result |
|---|---|---|
| Bounce Rate ↑ | LCP, CLS | First render is slow or visually unstable |
| Conversion Rate ↓ | INP | Poor responsiveness on interaction |
| Perceived Trust ↓ | CLS | Fonts pop in, UI jumps after load |
| SEO Rankings ↓ | All CWVs | Google downranks slow sites |
| Engagement ↓ | LCP, INP | Users don’t scroll or interact |
| Revenue ↓ | Any delay >2s | Each second delay = 7% conversion drop |
| Bottleneck | CWV Metric | Business Impact |
|---|---|---|
| Fonts for below-fold loading first, critical fonts delayed | LCP (17.45s) | Core product (fonts) not visible for 17s → zero perceived value → instant drop-offs |
| 90% unused monolithic JS bundle | LCP, INP, TBT | Wastes bandwidth, delays interactivity, causes "frozen" UI → failed first impressions |
| 95% unused CSS (blocking render) | LCP | Unused styles block real fonts/images → brand fails to appear |
| Heavy React libs (lodash etc.) | INP, TBT | Sliders, stars don’t work → broken UX → no interactions, no conversions |
| Input delay 2.1s, processing 1.5s | INP | Feels fake and slow → destroys trust → user ragequits |
| Memory bloat after interaction (619MB) | Crash Risk | Page crashes on interaction → zero retention |
| Unrendered fonts, failed fetches | LCP, UX | Font previews blank → kills core product → destroys intent |
| 1.1 min DOMContentLoaded | Load Time | Too slow even for exploration → mobile users bounce fast |
| 2970 DOM nodes | Parse Cost | Heavy DOM → main thread overhead → blocked render |
| Unoptimized logo image | UX | Brand appears broken → poor perception, unprofessional feel |
https://www.loom.com/share/6c6ccb4bb7364fbe90e10818dd88ee94
| Metric | Fix Implemented | Priority | Estimated Business Gain | Source |
|---|---|---|---|---|
| LCP (17.45s → 1.39s) | Preload above-the-fold fonts only (top 3-4 cards) | 🔴 Critical | -5s LCP, +12% engagement | [Google Fonts Guide] |
Replace Google font imports with local .woff2 only |
🔴 Critical | Faster font render; eliminates FOUT | web.dev/font-best-practices | |
| Remove duplicate font formats + unnecessary stylesheets | 🔴 Critical | -3–6s load, +10% retention | [Google PageSpeed] | |
Compress logo image, add width/height |
🟠 High | Prevents layout shifts, +5% trust | CLS Optimization Guide | |
Reduce globals.css to only necessary styles |
🟠 High | -700–1200ms render speed boost | [Chrome Dev Summit] | |
| Remove all unnecessary animations, containers, duplicated styles | 🟠 High | Smoother rendering; less layout overhead | Lighthouse Docs | |
| INP (2129ms → 179ms) | Remove heavy libraries (Lodash, Chart.js, etc.) | 🔴 Critical | -500ms CPU time; +7% engagement | [Smashing Magazine] |
Remove unnecessary useEffect hooks + fixed memory leaks |
🔴 Critical | Unblocked main thread; smoother interactions | [Chrome DevTools Blog] | |
| Deferr non-critical JS (fonts, analytics, extras) | 🔴 Critical | +15–20% interaction responsiveness | web.dev/inp | |
| CLS (0) | No layout shifts; dynamic assets already had fixed size | ✅ Good | — | — |
| TBT (18.6s → <1s) | Remove unused modules, reduce destructive JS bundles | 🔴 Critical | -70% blocking JS, +25% speed | Lighthouse Docs |
| De-prioritize non-critical CSS and JS | 🟠 High | -2–4s to interactivity | [PageSpeed Insights] | |
| Coverage (42% used) | Remove dead code, import only necessary modules | 🔴 Critical | -10MB bloat, 2x faster initial load | Webpack Docs |
SSR static pages; remove use client where unnecessary |
🔴 Critical | Faster boot, SEO boost | [Next.js Docs] | |
| Memory Spike (619MB → stable) | Minimize event listeners (~13k → minimal) | 🟠 High | Prevents crashes, +15% stability on low-end devices | DevTools Docs |
| Clean up redundant state logic and components | 🟠 High | Smooth UX, prevents memory leaks | [Chrome Blog] | |
| Network (2.1 min → ~2.9s visual load) | Host fonts properly, ensure no 404s | 🔴 Critical | +7% first paint success | web.dev/host-fonts |
| Prioritize loading only visible fonts on first paint | 🔴 Critical | -1.5 min load time; +22% performance | [Chrome UX Report] |
https://www.loom.com/share/32837513cb4749fdb9752de842e62e5b
Before / After Performance (Progress Bar Table)
| Metric | ❌ Before | ✅ After |
|---|---|---|
| LCP (load speed) | 🔴 ███████████████ 17.43s | 🟢 ██ 1.40s |
| INP (interaction speed) | 🔴 ██████████ 2.1s | 🟢 █ 179ms |
| CLS (layout stability) | 🟢✅ 0.00 | 🟢✅ 0.00 |
FontShare - Business Impact Summary
| Fix Area | Business Outcome |
|---|---|
| LCP | Fonts, the core product, now appear immediately → +25–35% increase in product engagement and scroll-through. |
| INP | Interactions now feel native-smooth → +18% uplift in click-through and CTA conversion (e.g., starring fonts, copying styles). |
| Fonts fully rendered | Visibility jump: from 6 fonts loading to 30+ working perfectly → bounce rate slashed, trust and credibility restored. |
| Crashes eliminated (619MB → stable) | No crashes, even on slower devices → expanded reach to entry-level laptops, +20% in retention. |
| Monolithic JS removed | Bundle size cut by ~80% → 2–3x faster TTI, less battery & data drain, enabling better SEO and Lighthouse scores. |