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

### Quick Wins

- Add `fetchpriority="high"` to the LCP image
- Preload LCP resources: `<link rel="preload" as="image" href="...">`
- Avoid lazy-loading above-the-fold images
- Inline critical CSS for the initial viewport

## CLS Optimization

CLS measures unexpected layout shifts. Common causes:

- **Images without dimensions**: Always set `width` and `height` or use `aspect-ratio`
- **Dynamic content injection**: Reserve space for ads, embeds, and async content
- **Web fonts**: Use `font-display: swap` with size-adjusted fallbacks
- **Animations**: Use `transform` animations, not layout-triggering properties

### Quick Wins

- Set explicit dimensions on all `<img>` and `<video>` elements
- Use CSS `aspect-ratio` for responsive containers
- Avoid inserting content above existing content after load
- Preload critical fonts

## INP Optimization

INP measures responsiveness to user interactions:

- **Break up long tasks**: Yield to the main thread with `scheduler.yield()` or `requestIdleCallback`
- **Reduce JavaScript execution**: Minimize and tree-shake bundles
- **Debounce expensive handlers**: Avoid running heavy logic on every keystroke or scroll
- **Use CSS for visual feedback**: Pseudo-classes (`:active`, `:hover`) respond instantly

## Asset Optimization

### Images

- Use modern formats: WebP (lossy/lossless), AVIF (best compression)
- Serve responsive sizes with `srcset` and `sizes`
- Lazy-load below-the-fold images: `loading="lazy"`
- Use CSS for decorative graphics when possible

### CSS

- Remove unused CSS (PurgeCSS or tree-shaking)
- Minimize CSS file size with minification
- Avoid `@import` in CSS files (causes sequential loading)
- Use CSS containment (`contain: layout style paint`) for isolated components

### JavaScript

- Tree-shake unused code
- Code-split by route or feature
- Defer non-critical scripts: `<script defer>` or dynamic `import()`
- Measure and budget bundle size

## Caching Strategy

| Resource Type | Cache Duration | Strategy |
|---------------|---------------|----------|
| Static assets (CSS, JS, images) | 1 year | Immutable with content hash in filename |
| HTML pages | Short or no-cache | Revalidate every request |
| API responses | Varies | `Cache-Control` with `stale-while-revalidate` |
| Fonts | 1 year | Immutable, self-host for reliability |

## Perceived Performance

- Show skeleton screens instead of spinners for content-heavy pages
- Use optimistic UI updates for user actions
- Prefetch likely next pages on hover or viewport proximity
- Provide instant visual feedback on interaction (button press states)

## Blazor-Specific Performance

- Use `@key` directive on repeated elements to optimize diffing
- Avoid unnecessary re-renders — use `ShouldRender()` override when appropriate
- Use `StateHasChanged()` only when necessary
- Virtualize long lists with `<Virtualize>` component
- Minimize component tree depth
- Use streaming rendering for server-side Blazor when data loading is slow

## Procedure

1. Measure current performance (Lighthouse, WebPageTest, browser DevTools)
2. Identify the bottleneck: is it LCP, CLS, INP, or total load time?
3. Apply targeted optimizations from the relevant section above
4. Re-measure to confirm improvement
5. Set performance budgets and monitor ongoing