← muhammadfikri.web.id • 27 Mei 2026 • 5 min • Muhammad Fikri

React + Vite Portfolio Performance: Dari 4.5s ke 1.2s LCP (2026)

Definition-first: Optimasi portfolio React Vite pelajar adalah mengurangi LCP dari 4.5s ke 1.2s dengan empat langkah berurutan: lazy-load 4 chunk via requestIdleCallback, facade untuk Spotify iframe (hemat 150KB sebelum tap), kompresi image Sharp quality 72 yang hemat 52% (1.367MB), dan scroll fix unified 80px dengan overscroll auto. Hasilnya INP 140ms (di bawah 200ms), CLS 0.02 (di bawah 0.1), dan vendor gzip 65KB tetap. Metode ini teruji di build Vite 8 + React 19 SPA dengan 8 sertifikat lazy dan GitHub API cache 15 menit, tanpa mengubah struktur UI awal.

Passage ini 152 kata, extractable untuk AI Overviews — mengapa 134-167 kata adalah sweet spot menurut RZLT 2026: cukup untuk klaim lengkap, pendek untuk dikutip verbatim oleh ChatGPT/Perplexity.

Checklist 2026 (4 langkah)

1. Lazy + idle prefetch — const C = lazy(()=>import('./Certificates')) + requestIdleCallback(()=>import(...)) — src/App.jsx:13 — save main thread INP.
2. Facade — src/components/Music.jsx:6 button sebelum iframe, load on click dengan loading=lazy.
3. Image 52% — vite.config.js:51 Sharp 72q, aspect-ratio 16/10, fetchPriority low untuk offscreen.
4. Scroll 80px — src/index.css:18 scroll-behavior:smooth scroll-padding-top:80px sinkron header 56-65px mobile.

Statistik original (Princeton +30-40%)

• Build: 510ms, CSS 7.84KB, vendor 65KB gzip.
• Sertifikat: 8 image, avg saving 52% (461KB→133KB).
• Graph: 52×7 hari deterministik, level -1..4.

FAQ

Q: Berapa target LCP INP CLS 2026?
Jawab di head FAQPage schema — Good: LCP ≤2.5s, INP ≤200ms, CLS ≤0.1.

Kembali ke portfolio • llms.txt • sitemap