front-end-performance

name	front-end-performance
description	Front-end performance optimization including Core Web Vitals, render performance, asset optimization, and perceived speed. Use when: diagnosing slow page loads, optimizing Largest Contentful Paint (LCP), reducing Cumulative Layout Shift (CLS), improving Interaction to Next Paint (INP), bundle size analysis, lazy loading, caching strategies.

Front-End Performance

When to Use

• Diagnosing or improving page load times
• Optimizing Core Web Vitals (LCP, CLS, INP)
• Reducing bundle size or eliminating render-blocking resources
• Implementing lazy loading for images, components, or routes
• Improving perceived performance with loading states and skeleton screens
• Configuring caching, compression, or CDN delivery
• Profiling runtime render performance

Core Web Vitals

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	≤ 2.5s	≤ 4.0s	> 4.0s
INP (Interaction to Next Paint)	≤ 200ms	≤ 500ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	≤ 0.25	> 0.25

LCP Optimization

LCP measures when the largest visible element renders. Common culprits:

• Slow server response: Optimize backend, use CDN, cache HTML
• Render-blocking resources: Defer non-critical CSS/JS, inline critical CSS
• Slow resource load: Preload hero images, use modern formats (WebP, AVIF)
• Client-side rendering delay: Server-render critical content, reduce JS execution