AgentSkillsCN

web-performance-optimization

运用Core Web Vitals指标、现代模式（视图过渡、推测规则）以及各框架专属优化技巧，全面提升Web性能。

SKILL.md
--- frontmatter
name: web-performance-optimization
description: "Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques"
updated_at: 2025-12-02T00:00:00Z
tags: [performance, optimization, lighthouse, core-web-vitals, frontend]
progressive_disclosure:
  entry_point:
    summary: "Optimize web performance through Core Web Vitals, modern browser APIs, and framework-specific patterns for fast, responsive experiences"
    when_to_use: "When improving Lighthouse scores, reducing load times, implementing modern performance patterns, or debugging bottlenecks"
    quick_start: "1. Audit with Lighthouse 2. Apply Quick Wins (lazy loading, compression, preconnect) 3. Optimize Core Web Vitals (LCP, CLS, INP) 4. Add modern patterns (View Transitions, Speculation Rules) 5. Monitor continuously"
  references:
    - quick-wins.md
    - core-web-vitals.md
    - optimization-techniques.md
    - modern-patterns-2025.md
    - framework-specific.md
    - monitoring.md

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

MetricTargetWeightKey Optimization
LCP (Largest Contentful Paint)<2.5s25%Optimize images, preload critical resources
INP (Interaction to Next Paint)<200ms30%Reduce JavaScript, break up long tasks
CLS (Cumulative Layout Shift)<0.125%Reserve space, optimize fonts
TBT (Total Blocking Time)<200ms30%Code splitting, defer non-critical JS
FCP (First Contentful Paint)<1.8s10%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

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.