Back to Details

web-performance-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Performance Optimization

网页性能优化

Optimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.
通过Core Web Vitals、现代浏览器API（View Transitions、Speculation Rules）以及框架专属技术优化网页性能。

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.
  • 提升Lighthouse评分（目标：90+）
  • 缩短页面加载时间（目标：LCP <2.5秒）
  • 优化Core Web Vitals以提升SEO排名
  • 实施现代性能模式（2025年）
  • 调试性能瓶颈
  • 设置持续性能监控
业务影响： 延迟1秒会导致7%的转化损失。提升0.1秒可带来8%的转化增长。

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
按时间投入划分的高ROI优化措施：
1小时快速见效（⭐⭐⭐⭐⭐ ROI）：
  • 为折叠区域以下的图片添加
    loading="lazy"
    属性（减少40-60%的资源体积）
  • 启用压缩（gzip/brotli）（减少70-80%的传输大小）
  • 为关键源添加
    rel="preconnect"
    （节省100-500毫秒）
1天投入（⭐⭐⭐⭐ ROI）：
  • 实现代码分割（减少30-50%的包体积）
  • 使用
    fetchpriority="high"
    优化LCP图片（提升200-400毫秒）
  • 添加基础Service Worker（实现重复访问即时加载）
1周全面优化（⭐⭐⭐⭐⭐ ROI）：
  • 完整缓存策略（HTTP头 + Service Workers）
  • 包优化（tree shaking, 40-60% reduction）
  • 性能监控（Lighthouse CI + RUM）
→ 查看quick-wins.md获取完整实现细节

Core Web Vitals at a Glance

Core Web Vitals 概览

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
指标目标权重关键优化方向
LCP (Largest Contentful Paint)<2.5秒25%优化图片、预加载关键资源
INP (Interaction to Next Paint)<200毫秒30%减少JavaScript代码、拆分长任务
CLS (Cumulative Layout Shift)<0.125%预留空间、优化字体
TBT (Total Blocking Time)<200毫秒30%代码分割、延迟加载非关键JS
FCP (First Contentful Paint)<1.8秒10%消除阻塞渲染的资源
→ 查看core-web-vitals.md深入了解各指标

Modern Patterns (2025)

现代模式（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
View Transitions API - 无需JavaScript实现流畅页面过渡
css
@view-transition { navigation: auto; }
Speculation Rules API - 预渲染页面实现即时导航
React Server Components - 零包体积的服务器组件
Priority Hints - 使用
fetchpriority="high"
优化LCP
Content Visibility - 基于CSS的渲染优化
→ 查看modern-patterns-2025.md获取前沿技术细节

Navigation

导航指引

Quick Start (Load First)

快速入门（优先查看）

  • ⚡ Quick Wins - Time-boxed optimizations (1hr/1day/1week) with ROI ratings. Load FIRST for immediate impact.
  • ⚡ 快速见效方案 - 按时间划分的优化措施（1小时/1天/1周）并标注ROI评级。优先查看以获得即时效果。

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.
  • 📊 Core Web Vitals - LCP、INP、CLS的优化策略及调试流程。针对特定指标优化时查看。
  • 🔧 优化技术 - 图片、JavaScript、CSS、资源加载、缓存模式。实施特定优化时查看。

Modern Features

现代特性

  • ✨ Modern Patterns 2025 - View Transitions, Speculation Rules, RSC, Islands Architecture. Load when adopting cutting-edge patterns.
  • ✨ 2025年现代模式 - View Transitions、Speculation Rules、RSC、Islands架构。采用前沿模式时查看。

Framework-Specific

框架专属内容

  • ⚛️ Framework Patterns - Next.js, React, Vue, Vite, Astro, SvelteKit optimizations. Load for your framework.
  • ⚛️ 框架模式 - Next.js、React、Vue、Vite、Astro、SvelteKit的优化方案。针对你的框架查看。

Measurement & Monitoring

测量与监控

  • 📈 Monitoring - Lighthouse CI, RUM setup, performance budgets, debugging tools. Load when setting up continuous monitoring.
  • 📈 监控 - Lighthouse CI、RUM设置、性能预算、调试工具。设置持续监控时查看。

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)
  • 先测量，后优化 - 更改前务必用Lighthouse/WebPageTest建立基准
  • 聚焦以用户为中心的指标 - Core Web Vitals > 虚荣指标
  • 在真实设备上测试 - 53%的移动用户会在3秒后放弃加载
  • 持续监控 - 缺乏关注的话，性能会随时间下降
  • 按ROI优先级处理 - 从快速见效方案开始（高影响、低投入）

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
出现以下情况时请停止并重新考虑：
  • 未建立基准测量就进行优化
  • 仅关注Lighthouse评分（忽略实际场景数据）
  • 忽视移动端性能（53%的用户会在3秒后放弃）
  • 所有资源都急切加载（未使用懒加载）
  • 未实施缓存策略
  • 同步加载第三方脚本
  • 缺少性能监控/预算

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
  • nextjs-core - Next.js Image组件、字体优化、静态生成
  • react - 组件优化、记忆化、代码分割
  • vite - 构建优化、代码块分割
  • typescript-core - 类型安全的性能模式

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.
转化影响：
  • 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
谨记： 性能是一项功能，而非事后补充。每一毫秒都很重要。从快速见效方案开始获得即时影响。