The frontend was collapsing under weight: 40s load time, crashing after scroll, invisible products. After ruthless cleanup, we achieved a 95% faster LCP, 5x smoother interactivity, and zero layout shifts - unlocking conversion, retention, and trust at scale.
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:
| Metric | Top Sabotages | Effect |
|---|---|---|
| LCP | Render-blocking CSS, fake latency, unused imports, mixed image loading | Delays first visual content |
| CLS | Ads after load, missing dimensions, font shifts, JS rendering ads | Layout jumps and instability |
| INP | Scroll handlers, memory bombs, state chaos, infinite logic | UI lags, rage clicks, broken UX |
Business Mapping:
| Metric | Sabotage Examples | Result |
|---|---|---|
| Bounce Rate ↑ | Lazy-loaded above-fold images, render-blocking JS/CSS | Users abandon before seeing content |
| Conversion Rate ↓ | Input unresponsiveness, layout shifts, slow first load | Forms + CTAs ignored |
| SEO Rankings ↓ | Google detects poor CWV | Rankings collapse |
| Perceived Quality ↓ | Fonts jumping, ad reflows, slow scroll | Brand reputation suffers |
| Engagement ↓ | Memory leaks, slow interactivity, layout trashing | Visitors don’t interact |
| Revenue ↓ | All CWVs down | 1s delay = ~7% conversion loss |
| Bottleneck | CWV Impact | Business Impact |
|---|---|---|
| LCP = 41.58s (ad banner) | LCP, INP | User sees nothing for 40s → rage quit → zero engagement |
| Render-blocking unused CSS (100%) | FCP, LCP | Cripples first paint → user thinks site is dead |
| Monolithic JS (90% unused) | TBT, INP | Input lag + freeze → abandoned carts, churn |
| Below-the-fold images load first | LCP | Bandwidth starvation → above-the-fold blank |
| Layout shifts from ads/images/text | CLS | Janky load → kills trust → bounce escalates |
| 310 network reqs, 19MB resources | TTFB, LCP | Slaughtered performance on low-end devices |
| Memory leak → site crashes on interaction | INP | Crash = instant bounce, zero retention |
| Main thread blocked 15.6s | INP | Page frozen → user taps → nothing happens |
| No lazy loading, uncompressed images | LCP, TTFB | Viewport loads after user has already left |
https://www.loom.com/share/2688f29c4a2547baac3c49c4c9b354f4?sid=9540324f-9da8-413d-8197-b48b4644c909
| Metric | Fix Implemented | Priority | Estimated Business Gain | Source |
|---|---|---|---|---|
| LCP (41.58s) | Remove ad banner falsely recognized as LCP | 🔴 Critical | Prevents bounce; +15–25% conversion gain | |
Select consistent hero image for LCP, set fetchpriority=high, removed lazy attr |
🔴 Critical | Makes LCP stable across devices; +11% faster perceived load | ||
| Preload only above-the-fold images | 🔴 Critical | Avoids wasted preload budget; boosts initial paint speed | Web.dev | |
| Convert images to AVIF and compress (LCP: 32KB → 17KB) | 🟠 High | -50% image payload; faster paint and FCP | Google Image Guide | |
| Remove redundant global fonts and large unused stylesheets | 🟠 High | -700–1200ms render time saved | [Chrome Dev Summit] | |
| Remove render-blocking CSS + 3rd-party API scripts wherever possible | 🔴 Critical | Speeds up style/layout pass; +10% trust | Lighthouse Docs | |
| CLS (0.57) | Add fixed width/height to JS-injected ads |
🔴 Critical | -0.3 CLS; avoids layout thrash, +15% trust | Web.dev CLS |
| Move ads below the fold; remove above-the-fold ad injection | 🔴 Critical | Prevents shifts; +7% session depth | [PageSpeed Insights] | |
| Add placeholders for images and ads | 🟠 High | Smoothens layout stability; +6% lower bounce | CLS Guide | |
| INP (635ms) | Defer non-critical JS (analytics, ads, 3rd-party tools) | 🔴 Critical | Boosts interaction speed; +5–10% engagement | INP Guide |
Remove destructive JS bundles and useEffect blocks |
🔴 Critical | Unblocks main thread; enables faster TTI | [Chrome Blog] | |
| Remove unused libraries (Chart.js, Lodash, Moment.js) | 🟠 High | Cuts down JS parse/exec time; -300ms INP | [Smashing Magazine] | |
| TBT (2710ms) | Code-split JS, SSR static pages, remove use client where unnecessary |
🔴 Critical | Frees up CPU time; boosts SEO + UX | [Lighthouse Docs] |
| Dynamically import only needed modules | 🔴 Critical | -5MB JS bloat; +30% performance gain | Webpack Docs | |
| Memory Usage (619MB) | Minimize DOM size (was ~3500 nodes), reduce event listeners (~11k → minimal) | 🟠 High | Prevents tab crashes; improves smoothness | DevTools Docs |
| Clean up unused states/hooks; fix memory leaks | 🟠 High | Better UX on low-end devices | [Chrome Blog] | |
| Coverage (42% used) | Remove unused CSS/JS; reduce globals.css; strip dead code | 🔴 Critical | -40–60% payload; faster boot time | [Coverage Tab] |
Remove multiple font format loads; use only local .woff2 |
🟠 High | Faster font load; fixes FOUT/FOIT | Web.dev Fonts |
https://www.loom.com/share/7b04f0db2bba4e87b8ab39f55fa69fea
Before / After Performance (Progress Bar Table)
| Metric | ❌ Before | ✅ After |
|---|---|---|
| LCP (load speed) | 🔴 ████████████████████████████ 41.58s | 🟢 ██ 1.84s |
| INP (interaction speed) | 🟠 █████ 619ms | 🟢 █ 110ms |
| CLS (layout stability) | 🔴 ██ 0.57 | 🟢✅ 0.00 |
IKEA - Business Impact Summary
| Fix Area | Business Outcome |
|---|---|
| LCP | Users now see the product almost instantly - unlocking +22–30% increase in conversion probability based on UX benchmarks. |
| INP | Cart, filter, and scroll responsiveness drastically improved → +12% user engagement, lower rage clicks. |
| CLS | Layout stability created a trust-building experience, improving brand perception, and +9% drop in bounce. |
| JS & CSS bloat removed | Lightweight delivery enabled IKEA’s core product to reach mid-tier and low-end devices, expanding accessible market share. |
| Memory crash fixed | Avoided 500MB+ memory spikes → site no longer crashes on Chrome, +15% longer session durations. |