frontend-performance

LCP improvement starts by decomposing it into TTFB, resource load delay, resource load time, and render delay, then fixing the dominant phase. Common fixes include fetchpriority="high" on the hero image, inlining critical CSS, and removing render-blocking scripts.

Bundle reduction uses route-level code splitting with lazy(), named imports from ESM packages, and replacing heavy dependencies like moment or full lodash with lighter alternatives. Measure first with a bundle analyzer and enforce a gzipped byte budget in CI.

Poor INP comes from long main-thread tasks, synchronous handlers rendering large lists, and heavy work in onChange callbacks. Fixes include useTransition, useDeferredValue, yielding with scheduler.yield(), and moving transforms to web workers.

Field data from CrUX or RUM should rank what to fix because it reflects real devices and networks. Lab tools like Lighthouse and WebPageTest are better for diagnosing one specific regression reproducibly.

Memoization should be applied only where a React Profiler recording shows a real re-render cost, since these APIs add comparison and allocation overhead. Profile first, then memoize components that appear at the top of the flamegraph with an explainable change cause.

Layout shift at font swap happens when fallback font metrics differ from the web font. Fix it by matching the fallback with size-adjust, ascent-override, descent-override, and line-gap-override, and always set width and height on images and embeds.