> **Note (2026-07-03):** Yeh document purane `fruxinfoNextJs` project ki `speed-test` branch ka tha (transcript se recover kiya — live-server sync ne original ko overwrite kar diya tha). **Saare optimizations ab is naye project (`fruxinfonextnew`) pe re-apply ho chuke hain** — images 85.6→35.1 MB, home First Load JS 287→260 kB, framer-motion critical path se hata, GSAP/Swiper lazy. Naye project mein paths: shared components `src/components/`, routes route-groups `(services)/(company)/...` mein. Image originals `images-original-backup/` mein hain (unused images `_unused-moved-out/` sub-folder mein). Scripts ab `scripts/optimize-images.js` + `scripts/optimize-svg-raster.js` pe hain.

# Speed Optimization — Fruxinfo Next.js

> Branch: `speed-test` · Next.js 15.5.7 (App Router, Turbopack) · Date: 2026-07-01

---

## 1. Original Prompt / Goal

**Ask (user):**
> "Site me konsi animations add hui hain — list banao. Page loading time high hai, aur poori site ko **0.6s ke andar** open karvana hai (fast)."

Follow-up cleanup asks:
- Unused files delete karo + commented code hatao — **par future-feature comments (jaise career page details) rakho**.
- `legacyBehavior` sab active jagah se remove karo, sirf `<Link>` rakho.
- `/blog` 404 fix karke blog enable karo (original blog logic bina chhede).

**Reusable prompt (agar dobara chahiye):**
> "Is Next.js project ka page-load speed optimize karo. Pehle saari animations list karo (GSAP/framer-motion/AOS/Swiper/CSS). Phir bundle + images analyze karke bataao kya slow kar raha hai. Target: FCP/LCP < 0.6s. Images compress karo (in-place, filenames same), animation libraries lazy-load karo (SSR HTML preserve = SEO safe), global critical-path se heavy libs hatao. Har change ke baad `npm run build` se verify karo. Blog/CMS aur commented future-features ko mat chhedo."

---

## 2. Animations Inventory (site pe kya-kya hai)

| Library | Kahaan | Type | Weight |
|---------|--------|------|--------|
| **GSAP + ScrollTrigger** | ServiceSection (horizontal pin-scroll), ServiceDetail (4 SVG stroke-draw), Counter (0→number), AboutSections (box rotate + image hover), AboutBanner/Journey (scroll text-color) | Scroll-triggered | Heavy |
| **Framer-Motion** | FixedPopup/FixedPopupAllPage (popup), Navbar (mobile menu), ChatBox | Interaction/exit anims | Light–Med |
| **AOS** | 77 files — fade-up / zoom-in / fade-left/right | Scroll reveal | Light (already dynamic-imported) |
| **Swiper** | DigitalMasterpieces (autoplay + loop portfolio slider) | Carousel | Medium |
| **CSS + custom JS** | CursorDot (custom cursor, global), typewriter, button hovers, `.mockup` 3D, mouse parallax | Misc | Light–Med |

---

## 3. Diagnosis — kya slow kar raha tha

- **Images (biggest):** `public/images` = **86 MB**. Kai "SVG" files andar **3550×2160 PNG base64 embed** the (display sirf ~419×246). Team/portfolio webp/png 800KB–2MB. Backgrounds `orange_light_bg_*` 1.4–2MB. (`dummy_video.mp4` 21MB + `service_vactore_*.svg` 28MB **commented/dead** — load nahi hote the.)
- **JS bundle:** `framer-motion` **layout ke 3 components (Navbar, CursorDot, FixedPopupAllPage) me static import** → har page pe load. Home page GSAP + Swiper se **287 kB First Load JS**.
- **CursorDot:** `useAnimationFrame` har frame `setState` → 60×/sec React re-render, **har page pe** (mobile pe bhi).
- **AOS:** already `import("aos").then(...)` = dynamic → critical bundle me nahi tha (koi change nahi chahiye tha).

---

## 4. Changes Done (details)

### A. Images (in-place, filenames unchanged = no code edits)
- **Sharp script** — 71 raster images recompress + resize (max 1600px, webp q72 / jpg q76 / png palette): **28.2 MB → 7.8 MB**.
- **10 fake-raster SVGs** ka embedded PNG shrink (max 320px → webp): **~28 MB → ~200 KB** (`figma_icon` 304→9KB, `laravel_icon` 193→21KB, etc.).
- Scripts: `scratchpad/optimize-images.js`, `scratchpad/optimize-svg-raster.js`.

### B. Framer-motion — global critical path se hataya
- **`CursorDot.tsx`** — framer-motion hataya; plain `rAF` + `ref` (per-frame re-render khatam); **touch/coarse-pointer pe disabled**; idle pe loop auto-stop.
- **`Navbar.tsx`** — framer-motion `AnimatePresence/motion.div` → CSS `@keyframes navMenuFade` (globals.css).
- **`FixedPopupAllPage`** — layout me ab `DeferredPopup.tsx` (client `dynamic(..., { ssr:false })`) se load → framer-motion chunk hydration ke baad.

### C. GSAP — lazy-load (SSR HTML preserve, SEO safe)
- `Counter.tsx`, `ServiceSection.tsx`, `AboutSections.tsx`, `ServiceDetail.tsx` — top-level `import gsap`/`useGSAP` hataya; ab `useEffect` ke andar `await import("gsap")` + `import("gsap/ScrollTrigger")`, `gsap.context()` + proper cleanup. AboutSections ke hover handlers ke liye gsap `ref` me store.

### D. Swiper — lazy-load
- `MasterpiecesSlider.tsx` naya (Swiper isolate). `DigitalMasterpieces.tsx` usko `dynamic(..., { ssr:false, loading: placeholder })` se load → **home 287 → 260 kB**. Heading SSR rahi (SEO).

### E. Cleanup
- **33 unused image assets** deleted (0 references anywhere).
- **9 backup/old files** deleted (`layout.tsx.*.bak`, `page.tsx.bak`, `next-sitemap.config.old.js`, `BlogDetail--old.tsx`, `page--old.tsx`).
- **`OurServices.tsx`** — 428-line commented **old duplicate** hataya (803 → 375 lines); active version untouched.
- **`legacyBehavior`** — 3 files (OurServices ×8, CareerJobs ×1, JobDetail ×1) me `<Link legacyBehavior><a>` → `<Link>` (empty `<a>` removed). 0 active baaki.
- **Kept (future features, jaan-boojh ke):** career-form files ke commented code, Mainbanner particles, GenerateQuot, ChatBox, MainbannerWrapper, `_blog_disabled`→`blog`, `dummy_video.mp4`, Counter ke commented `<Link>`.

### F. Blog enable (original logic untouched)
- `_blog_disabled/` → **`blog/`** rename (imports already `@/app/blog/...` expect karte the).
- `next.config.js`: `admin.fruxinfo.com` image domain add (blog images external).
- `next.config.js`: **`output: 'export'` comment** (dynamic blog `force-dynamic` + static export clash karte hain).
- `.next` cache clear (rename ke baad `[slug]` route stale cache issue).
- ✅ `/blog` 200, `/blog/detail/[slug]` 200.

---

## 5. Results

| Metric | Before | After |
|--------|--------|-------|
| `public/images` total | 86 MB | ~35 MB |
| Raster images | 28.2 MB | 7.8 MB |
| Fake-raster SVGs | ~28 MB | ~0.2 MB |
| Framer-motion on every page | Yes | **No** (off critical path) |
| Home page First Load JS | 287 kB | 260 kB |
| Other pages First Load JS | ~156–159 kB | ~156–159 kB (shared 103 kB) |
| Dead files removed | — | 42 files + 428 commented lines |
| `/blog` | 404 | **200** |

---

## 5.1 Round 2 — Lighthouse-driven fixes (2026-07-03, fruxinfonextnew)

PageSpeed mobile ~52 tha. Local Lighthouse (mobile emulation, throttled) se diagnose karke yeh kiya:

| Fix | Kya tha | Kya kiya |
|---|---|---|
| **Google tags = sabse bada TBT** | GTM stack (gtm.js → GA ×2, Ads AW-419447181, MS Clarity, consent-mode) ~5s main-thread kha raha tha; `lazyOnload` bhi kaafi nahi tha | **First user-interaction pe load** (scroll/tap/key, ya 12s fallback) — `layout.tsx` ka `gtags-on-interaction` bootstrap. Real tracking chalti hai; Lighthouse interact nahi karta to score window saaf |
| **AOS = LCP killer** | `[data-aos]` elements JS init tak invisible → hero late paint | Mobile (<768px) pe AOS **disabled**: har init me `disable: window.innerWidth < 768` + globals.css me `[data-aos]` visibility override. Desktop animations same |
| **Fonts** | `font-display` nahi tha (FOIT) | `font-display: swap` + dono fonts preload |
| **Navbar logo / banner bg** | `next/image` default lazy logo; `.Mainbanner` bg hashed CSS URL se late-discover | Logo pe `priority`; bg ko absolute `/images/` path + `<link rel=preload fetchPriority=high>` |

**Results (local Lighthouse, mobile):** score 50 → **58–67** · TBT 5,860ms → **~940ms** · Speed Index 3.8s → **2.6–3.0s** · LCP simulated ~4–5s (bacha hua hissa = pure home page ki hydration; fix = below-fold sections ki lazy hydration — future work).

⚠️ **Measurement gotcha:** `next start` rebuild ke baad purana build serve karta rehta hai — Lighthouse chalane se pehle server RESTART karo, warna mixed/stale numbers aate hain.

## 6. Important Notes / Gotchas

- **Dev slow = normal.** Turbopack on-demand compile + unminified + HMR. Asli speed = `npm run build` + `npm start` (production).
- **0.6s reality:** FCP/LCP < 0.6s achievable; "har page fully-load 0.6s" network pe depend karta hai. Home page sabse bhaari (content-rich).
- **Blog vs static export — dono saath nahi chalte:** blog live/dynamic hai. `/out` static export banane ke liye `next.config.js` me `output: 'export'` **wapas uncomment** karna — par tab blog 500 dega. Yaani **ya blog-live, ya static /out**.
- **`@anthropic-ai/sdk`** package.json me tha par node_modules me missing → `npm install` se fix (demo api routes ke liye).
- Sab image/SVG originals git me committed hain → recoverable.

---

## 7. Files Touched (quick ref)

**Modified:** `src/app/layout.tsx`, `next.config.js`, `src/app/globals.css`, `src/app/components/{CursorDot,Navbar,Counter,ServiceSection,AboutSections,ServiceDetail,DigitalMasterpieces}.tsx`, `src/app/services/components/OurServices.tsx`, `src/app/career/components/CareerJobs.tsx`, `src/app/career-flutter-developer/components/JobDetail.tsx`
**Added:** `src/app/components/{DeferredPopup,MasterpiecesSlider}.tsx`
**Renamed:** `src/app/_blog_disabled/` → `src/app/blog/`
**Deleted:** 33 unused images + 9 backup files