LCP (Largest Contentful Paint): the main content (hero image, heading, block of text) should appear quickly. Improve by optimizing images, fonts, and server response; reduce render-blocking resources.

FID (First Input Delay): the main thread should stay free so the first click or tap feels instant. CLS (Cumulative Layout Shift): reserve space for images and dynamic content so the page does not jump. Measure with Lighthouse or PageSpeed Insights.

Use modern image formats (WebP, AVIF) and srcset/sizes for responsive images; lazy-load below-the-fold images. Minify and bundle JS/CSS; code split so the initial bundle is small and the rest loads on demand. Tree-shake unused code; use hashed filenames for long-term caching.

Reduce the number of requests (combine, inline critical CSS) and keep payloads small. A CDN and compression (Brotli/gzip) help. Preload critical resources when appropriate.

Long tasks on the main thread block input and animation. Break work into smaller chunks, use web workers for heavy computation, or defer non-critical work. Use requestAnimationFrame for smooth animations; avoid layout thrash (read then write in a loop).

Profile with DevTools Performance tab to find long tasks and layout recalculations. [MDN – Web performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started).