What is the most impactful single thing I can do to improve LCP?

For most pages, the single biggest LCP improvement is optimizing the hero image. In order of impact: (1) Add the priority prop (Next.js Image) or to start loading it immediately instead of after JavaScript parses. (2) Convert to WebP or AVIF format — typically 50-80% smaller than JPEG at equivalent quality, directly reducing download time. (3) Ensure the image is served from a CDN edge location near the user rather than your origin server. (4) Use correct sizes attribute so the browser downloads the right image size for the viewport. Together these changes routinely reduce LCP by 1-2 seconds on image-heavy pages.

How do I measure Core Web Vitals in production (not just Lighthouse)?

Lighthouse runs in a controlled environment (a single machine, throttled network) and does not reflect real user conditions. For production measurement use: (1) Google Search Console Core Web Vitals report — shows field data (real users, 28-day window) segmented by page group. (2) The web-vitals JavaScript library: import { onCLS, onINP, onLCP } from "web-vitals" and send metrics to your analytics. (3) Google Analytics 4 automatically collects Web Vitals if using the gtag library. Field data from real users is more valuable than lab data because it captures real device performance, real network conditions, and real usage patterns.

When does React.memo actually improve performance, and when does it hurt?

React.memo helps when: (1) The component is expensive to render (contains heavy computation or renders many children). (2) The parent re-renders frequently (e.g., on every keystroke). (3) The component's props are often the same between parent renders. React.memo hurts or is useless when: props change on every render (you memoized nothing), the component is cheap to render (the comparison overhead exceeds the render cost), or you forget to also memoize callback props (an unmemoized function prop creates a new reference on every render, defeating React.memo). Profile first with React DevTools Profiler to confirm a component is actually the bottleneck before adding memo.

What causes Cumulative Layout Shift and how do I fix it quickly?

The most common CLS causes are: (1) Images without explicit width and height — the browser doesn't know how much space to reserve. Fix: always add width/height attributes or use aspect-ratio CSS. (2) Web font flash — text renders in a fallback font, then jumps to the web font when loaded. Fix: use font-display: optional (best) or size-adjust to make the fallback font match the web font metrics. (3) Late-injected content — ads, cookie banners, and dynamic content that loads after initial render and pushes content down. Fix: reserve space with a placeholder div matching the expected height. (4) Animations that change layout properties (top, left, margin). Fix: use transform and opacity instead, which the browser composites without a layout recalculation.

How do I reduce JavaScript bundle size without sacrificing functionality?

Systematic approach: (1) Run ANALYZE=true npm run build (with @next/bundle-analyzer) to identify the largest modules. (2) Replace heavy libraries with lighter alternatives: moment.js → date-fns (tree-shakeable, ~70% smaller); lodash → lodash-es (tree-shakeable) or native JS equivalents; full icon libraries → import only specific icons. (3) Use dynamic imports for components that are not needed on initial page load (rich text editors, chart libraries, map components). (4) Check for duplicated packages (two versions of a dependency) in the bundle — often caused by peer dependency mismatches. (5) Enable tree shaking by using ES module imports (import { specific } from "lib") rather than CommonJS require. A typical Next.js app can reduce its initial JS bundle by 30-50% with these techniques.

Engineering·9 min read·June 21, 2026

⚡ Frontend Performance Optimization: Core Web Vitals

A practical guide to frontend performance optimization through Core Web Vitals: LCP, INP, and CLS — with actionable techniques including code splitting, lazy loading, bundle analysis, caching strategies, and when to actually use React.memo, useMemo, and useCallback.

📖Full-Stack SaaS with Next.js, Supabase & Groq AI (Full Access)

View →

Why Core Web Vitals Are Non-Optional in 2026

Google uses Core Web Vitals as a ranking signal in search. Beyond SEO, they are genuine measures of user experience — slow pages have higher bounce rates, lower conversion rates, and reduced engagement. A 1-second delay in page load time has been measured at a 7% reduction in conversions. This guide covers each vital with its threshold, what causes violations, and how to fix them.

Topics covered

Core Web Vitals optimizationLargest Contentful Paint LCPInteraction to Next Paint INPCumulative Layout Shift CLSReact code splitting dynamic importslazy loading images Next.jswebpack bundle analyzerReact.memo when to useuseMemo useCallback optimizationfrontend performance guideNext.js performance optimizationJavaScript bundle sizecache-control headers webimage optimization web performancetree shaking webpackweb vitals scoringLighthouse performance auditresource hints preload prefetch