Web Performance Optimization

Reference for diagnosing and improving web application performance, covering measurement, asset delivery, rendering, caching, and monitoring.

1. Core Web Vitals

Largest Contentful Paint (LCP)

Measures time until the largest visible content element (image, video poster, or text block) finishes rendering.

• Good: <= 2.5s | Needs improvement: <= 4.0s | Poor: > 4.0s
• Causes of poor LCP: slow TTFB, render-blocking CSS/JS, slow hero image loads, client-side rendering delays.

Interaction to Next Paint (INP)

Replaced FID in March 2024. Measures latency of all click, tap, and keyboard interactions, reports near the worst case.

• Good: <= 200ms | Needs improvement: <= 500ms | Poor: > 500ms
• Causes of poor INP: long main-thread tasks, excessive DOM size, layout thrashing, heavy event handlers.