Website Speed Optimization

1---
2name: website-speed-optimization
3description: >
4  Find and fix website performance problems in Next.js apps. Use this skill for
5  Core Web Vitals, bundle size, images, fonts, scripts, caching, server response
6  time, hydration, and runtime performance.
7---
8
9# Website Speed Optimization
10
11> Next.js website performance audit and optimization skill
12
13## Metadata
14
15- **Name**: website-speed-optimization
16- **Version**: 1.0.0
17- **Author**: webrenew
18- **Tags**: nextjs, performance, core-web-vitals, speed, lighthouse, optimization
19
20## When to Use
21
22This skill should be used when:
23- Auditing or improving Next.js website performance
24- Diagnosing slow page loads, high LCP, poor CLS, or sluggish INP
25- Reviewing bundle size, image optimization, font loading, or script loading
26- Preparing a site for production launch with performance targets
27- Investigating Core Web Vitals regressions
28- Optimizing server response times (TTFB) and hydration performance
29
30## Summary
31
32Provides a systematic approach to diagnosing and fixing Next.js performance issues across the full stack: server response, resource loading, rendering, hydration, and runtime interactivity. Covers Core Web Vitals (LCP, CLS, INP), bundle optimization, image/font/script strategies, caching, and monitoring.