Open DevTools → Lighthouse tab → Generate report. Note the score and every suggestion. Screenshot the "before" state. You need to measure where you started to prove improvement.
<!-- Preload critical font -->
<link rel="preload"
href="/fonts/inter.woff2"
as="font" type="font/woff2"
crossorigin>
<!-- Preload critical CSS -->
<link rel="preload"
href="/assets/main.css"
as="style">
<!-- Font optimization -->
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2')
format('woff2');
font-display: swap;
/* Show fallback font immediately,
swap when custom font loads.
No invisible text. */
}
// ❌ Before: image loads, shifts content
<img
src={thumbnail}
alt={name}
/>
// ✅ After: reserve space before load
<img
src={thumbnail}
alt={name}
width={300}
height={200}
className="aspect-[3/2]"
/>
npx vite-bundle-analyzer
// Common problems:
// ❌ import _ from 'lodash'
// (imports ALL of lodash: 72KB)
// ✅ import debounce from
// 'lodash/debounce' (4KB)
// ❌ Full chart library on every page
// ✅ Lazy-load only on analytics page
// ❌ Duplicate dependencies
// (two versions of the same lib)
// ✅ npm dedupe
import { Suspense, lazy } from 'react';
const Editor = lazy(
() => import('./pages/Editor'));
const Gallery = lazy(
() => import('./pages/Gallery'));
const Analytics = lazy(
() => import('./pages/Analytics'));
function App() {
return (
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/editor"
element={<Editor />} />
<Route path="/gallery"
element={<Gallery />} />
<Route path="/analytics"
element={<Analytics />} />
</Routes>
</Suspense>
);
}
// Only loads Editor code when
// navigating to /editor.
// Homepage bundle stays small.
git switch -c perf/PIXELCRAFT-080-core-web-vitals
git add src/ index.html
git commit -m "Optimize Core Web Vitals: LCP, CLS, code splitting (PIXELCRAFT-080)"
git push origin perf/PIXELCRAFT-080-core-web-vitals
# PR → Review → Merge → Close ticket ✅
Web performance is user perception engineering.
The metrics (LCP, CLS, INP) are calibrated to match human perception thresholds. Performance isn't a nice-to-have — it directly impacts revenue.