web-performance-optimization-prompts.md
2,4 KB • MD • jun. 18, 2026 06:54
---
name: web-performance-optimization
description: >
Optimize web application performance using code splitting, lazy loading,
caching, compression, and monitoring. Use when improving Core Web Vitals and
user experience.
---
# Web Performance Optimization
## Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
## Overview
Implement performance optimization strategies including lazy loading, code splitting, caching, compression, and monitoring to improve Core Web Vitals and user experience.
## When to Use
- Slow page load times
- High Largest Contentful Paint (LCP)
- Large bundle sizes
- Frequent Cumulative Layout Shift (CLS)
- Mobile performance issues
## Quick Start
Minimal working example:
```typescript
// utils/lazyLoad.ts
import React from 'react';
export const lazyLoad = (importStatement: Promise<any>) => {
return React.lazy(() =>
importStatement.then(module => ({
default: module.default
}))
);
};
// routes.tsx
import { lazyLoad } from './utils/lazyLoad';
export const routes = [
{
path: '/',
component: () => import('./pages/Home'),
lazy: lazyLoad(import('./pages/Home'))
},
{
path: '/dashboard',
lazy: lazyLoad(import('./pages/Dashboard'))
},
{
// ... (see reference guides for full implementation)
```
## Reference Guides
Detailed implementations in the `references/` directory:
| Guide | Contents |
|---|---|
| [Code Splitting and Lazy Loading (React)](references/code-splitting-and-lazy-loading-react.md) | Code Splitting and Lazy Loading (React) |
| [Image Optimization](references/image-optimization.md) | Image Optimization |
| [HTTP Caching and Service Workers](references/http-caching-and-service-workers.md) | HTTP Caching and Service Workers |
| [Gzip Compression and Asset Optimization](references/gzip-compression-and-asset-optimization.md) | Gzip Compression and Asset Optimization |
| [Performance Monitoring](references/performance-monitoring.md) | Performance Monitoring |
## Best Practices
### ✅ DO
- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying
### ❌ DON'T
- Skip testing or validation
- Ignore error handling
- Hard-code configuration values