web-performance-optimization

Original：🇺🇸 English

Translated

Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques

21installs

Sourcebobmatnyc/claude-mpm-skills

Added on2026-02-04

NPX Install

npx skill4agent add bobmatnyc/claude-mpm-skills web-performance-optimization

SKILL.md Content

View Translation Comparison →

Web Performance Optimization

Optimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.

When to Use This Skill

Improving Lighthouse scores (target: 90+)
Reducing page load times (target: <2.5s LCP)
Optimizing Core Web Vitals for SEO rankings
Implementing modern performance patterns (2025)
Debugging performance bottlenecks
Setting up continuous performance monitoring

Business Impact: 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.

Start Here: Quick Wins

High-ROI optimizations by time investment:

1 Hour Quick Wins (⭐⭐⭐⭐⭐ ROI):

Add
```
loading="lazy"
```
to below-fold images (40-60% weight reduction)
Enable compression (gzip/brotli) (70-80% transfer size reduction)
Add
```
rel="preconnect"
```
for critical origins (100-500ms savings)

1 Day Investments (⭐⭐⭐⭐ ROI):

Implement code splitting (30-50% bundle reduction)
Optimize LCP image with
```
fetchpriority="high"
```
(200-400ms improvement)
Add basic service worker (instant repeat visits)

1 Week Comprehensive (⭐⭐⭐⭐⭐ ROI):

Full caching strategy (HTTP headers + service workers)
Bundle optimization (tree shaking, 40-60% reduction)
Performance monitoring (Lighthouse CI + RUM)

→ See quick-wins.md for complete implementation details

Core Web Vitals at a Glance

Metric	Target	Weight	Key Optimization
LCP (Largest Contentful Paint)	<2.5s	25%	Optimize images, preload critical resources
INP (Interaction to Next Paint)	<200ms	30%	Reduce JavaScript, break up long tasks
CLS (Cumulative Layout Shift)	<0.1	25%	Reserve space, optimize fonts
TBT (Total Blocking Time)	<200ms	30%	Code splitting, defer non-critical JS
FCP (First Contentful Paint)	<1.8s	10%	Eliminate render-blocking resources

→ See core-web-vitals.md for deep dive on each metric

Modern Patterns (2025)

View Transitions API - Smooth page transitions without JavaScript

css

@view-transition { navigation: auto; }

Speculation Rules API - Prerender pages for instant navigation
React Server Components - Zero-bundle server components
Priority Hints -

fetchpriority="high"

for LCP optimization
Content Visibility - CSS-based rendering optimization

→ See modern-patterns-2025.md for cutting-edge techniques

Navigation

Quick Start (Load First)

⚡ Quick Wins - Time-boxed optimizations (1hr/1day/1week) with ROI ratings. Load FIRST for immediate impact.

Deep Dives

📊 Core Web Vitals - LCP, INP, CLS optimization strategies with debugging workflows. Load when targeting specific metrics.
🔧 Optimization Techniques - Image, JavaScript, CSS, resource loading, caching patterns. Load when implementing specific optimizations.

Modern Features

✨ Modern Patterns 2025 - View Transitions, Speculation Rules, RSC, Islands Architecture. Load when adopting cutting-edge patterns.

Framework-Specific

⚛️ Framework Patterns - Next.js, React, Vue, Vite, Astro, SvelteKit optimizations. Load for your framework.

Measurement & Monitoring

📈 Monitoring - Lighthouse CI, RUM setup, performance budgets, debugging tools. Load when setting up continuous monitoring.

Key Reminders

Measure first, optimize second - Always baseline with Lighthouse/WebPageTest before changes
Focus on user-centric metrics - Core Web Vitals > vanity metrics
Test on real devices - 53% of mobile users abandon after 3 seconds
Monitor continuously - Performance degrades over time without vigilance
Prioritize by ROI - Start with Quick Wins (high impact, low effort)

Red Flags

Stop and reconsider if:

Optimizing without baseline measurement
Focusing only on Lighthouse score (ignoring field data)
Ignoring mobile performance (53% abandon rate after 3s)
Loading all resources eagerly (no lazy loading)
No caching strategy implemented
Third-party scripts loaded synchronously
Missing performance monitoring/budgets

Integration with Other Skills

nextjs-core - Next.js Image component, font optimization, static generation
react - Component optimization, memoization, code splitting
vite - Build optimization, chunk splitting
typescript-core - Type-safe performance patterns

Real-World Impact

Conversion Impact:

Pinterest: 40% faster perceived wait = 15% more sign-ups + 15% more SEO traffic
Zalando: 0.1s improvement = 0.7% revenue increase
AutoAnything: 50% faster load = 12-13% sales increase

SEO Impact:

Core Web Vitals are ranking factors (June 2021+)
75% of users passing Core Web Vitals = ranking boost
Mobile-first indexing prioritizes mobile performance

Remember: Performance is a feature, not an afterthought. Every millisecond counts. Start with Quick Wins for immediate impact.