Performance Budgets, Lazy Loading, and Core Web Vitals

Images account for over 50% of the average web page's total payload. Image optimization directly determines Google Core Web Vitals:

• Largest Contentful Paint (LCP): The time it takes for the largest visual element (often a hero image) to render. Target: under 2.5 seconds. Hero images must never be lazy loaded.
• Cumulative Layout Shift (CLS): Jumpy layout shifts caused when images load without explicit width and height dimensions. Always define aspect ratios in CSS.
• Native Lazy Loading: Below-the-fold images must specify loading="lazy" to defer downloading until the user scrolls near them.