Optimize Web Performance and Core Web Vitals

Web Performance Optimization addresses slow loading, main-thread blocking, image delivery, and visual instability. Its examples connect Core Web Vitals to concrete investigation areas: a slow hero image affecting LCP, JavaScript work affecting INP, and missing dimensions causing CLS. Bundle analysis and image processing then provide candidate changes to test.

The examples are hypothetical teaching scenarios, not measured outcomes or guaranteed savings. Compare equivalent builds, devices, networks, and field distributions before drawing conclusions. Bundle bytes alone do not establish interaction latency, so an apparent download improvement still needs measurement of actual responsiveness.

Use it when a website loads slowly, interactions are delayed, JavaScript bundles are large, images are inefficient, or a performance audit needs an actionable optimization plan. It also identifies caching strategies as a relevant use case. Before execution, read the required detailed guide, loading the sections relevant to focused work or the complete guide for an end-to-end effort.

Do not blindly install current tools or replace dependencies based on illustrative size comparisons. Pin tools compatible with the project, preserve originals, and review dependency and API changes. Missing environment details, permissions, or success criteria require clarification before applying changes.

Inputs include current performance measurements, bundle composition, image assets, and the implementation responsible for loading and interaction behavior. Outputs include an optimization plan, revised asset and code-loading approaches, and comparable validation results.

Bundle work includes identifying heavy dependencies, importing only required library functions, considering native alternatives, lazy-loading noncritical components, and splitting code by route or component. A supplied analysis command is:

npx webpack-bundle-analyzer dist/stats.json

Production webpack configuration supports tree shaking, but side-effect declarations must retain files such as CSS and polyfills that must execute when imported. Blanket side-effect removal can drop required styling. Noncritical third-party scripts can be deferred or loaded later rather than blocking initial rendering.

Image work includes compression, AVIF and WebP variants with JPEG fallbacks, responsive source selection, and appropriate dimensions. Reserve space for delayed content to reduce layout shifts. Above-the-fold hero images use eager loading and high fetch priority, while lower-priority images can load lazily. These choices should follow the actual image role rather than a universal lazy-loading rule.

Examples use webpack bundle analysis, React lazy loading, Next.js dynamic imports, and the Next.js Image component. Sharp demonstrates generating image variants in a separate output directory. CDN delivery and hero-image preloading are additional techniques to evaluate alongside the measured bottleneck and the project's existing asset pipeline.