Back to Details

i-optimize

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Identify and fix performance issues to create faster, smoother user experiences.
识别并修复性能问题，打造更快、更流畅的用户体验。

Assess Performance Issues

评估性能问题

Understand current performance and identify problems:
  1. Measure current state:
    • Core Web Vitals: LCP, FID/INP, CLS scores
    • Load time: Time to interactive, first contentful paint
    • Bundle size: JavaScript, CSS, image sizes
    • Runtime performance: Frame rate, memory usage, CPU usage
    • Network: Request count, payload sizes, waterfall
  2. Identify bottlenecks:
    • What's slow? (Initial load? Interactions? Animations?)
    • What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
    • How bad is it? (Perceivable? Annoying? Blocking?)
    • Who's affected? (All users? Mobile only? Slow connections?)
CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
了解当前性能表现并定位问题：
  1. 衡量当前状态：
    • Core Web Vitals：LCP、FID/INP、CLS 得分
    • 加载时间：可交互时间、首次内容绘制时间
    • 包体积：JavaScript、CSS、图片大小
    • 运行时性能：帧率、内存占用、CPU 使用率
    • 网络：请求数量、负载大小、请求瀑布图
  2. 定位瓶颈：
    • 哪里慢？（首屏加载？交互？动画？）
    • 原因是什么？（大体积图片？高开销JavaScript？布局抖动？）
    • 问题严重程度？（可感知？影响体验？阻塞使用？）
    • 受影响用户范围？（所有用户？仅移动端？慢网络用户？）
重要提示：优化前后都要做性能测量。过早优化会浪费时间，优先优化实际影响体验的问题。

Optimization Strategy

优化策略

Create systematic improvement plan:
制定系统性的改进方案：

Loading Performance

加载性能

Optimize Images:
  • Use modern formats (WebP, AVIF)
  • Proper sizing (don't load 3000px image for 300px display)
  • Lazy loading for below-fold images
  • Responsive images (
    srcset
    , 
    picture
    element)
  • Compress images (80-85% quality is usually imperceptible)
  • Use CDN for faster delivery
html
<img 
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  loading="lazy"
  alt="Hero image"
/>
Reduce JavaScript Bundle:
  • Code splitting (route-based, component-based)
  • Tree shaking (remove unused code)
  • Remove unused dependencies
  • Lazy load non-critical code
  • Use dynamic imports for large components
javascript
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
Optimize CSS:
  • Remove unused CSS
  • Critical CSS inline, rest async
  • Minimize CSS files
  • Use CSS containment for independent regions
Optimize Fonts:
  • Use 
    font-display: swap
    or 
    optional
  • Subset fonts (only characters you need)
  • Preload critical fonts
  • Use system fonts when appropriate
  • Limit font weights loaded
css
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately */
  unicode-range: U+0020-007F; /* Basic Latin only */
}
Optimize Loading Strategy:
  • Critical resources first (async/defer non-critical)
  • Preload critical assets
  • Prefetch likely next pages
  • Service worker for offline/caching
  • HTTP/2 or HTTP/3 for multiplexing
图片优化：
  • 使用现代格式（WebP、AVIF）
  • 合理设置尺寸（不要为300px的展示区域加载3000px的图片）
  • 为首屏外的图片开启懒加载
  • 使用响应式图片（
    srcset
    、
    picture
    元素）
  • 压缩图片（80-85%的质量通常不会有肉眼可感知的损失）
  • 使用CDN加快资源分发
html
<img 
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  loading="lazy"
  alt="Hero image"
/>
减小JavaScript包体积：
  • 代码分割（基于路由、基于组件）
  • Tree shaking（移除未使用的代码）
  • 移除未使用的依赖
  • 懒加载非关键代码
  • 大型组件使用动态导入
javascript
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
CSS优化：
  • 移除未使用的CSS
  • 关键CSS内联，其余异步加载
  • 压缩CSS文件
  • 独立区域使用CSS containment
字体优化：
  • 使用 
    font-display: swap
    或 
    optional
  • 字体子集化（仅保留需要用到的字符）
  • 预加载关键字体
  • 合适场景下使用系统字体
  • 限制加载的字体字重数量
css
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately */
  unicode-range: U+0020-007F; /* Basic Latin only */
}
加载策略优化：
  • 优先加载关键资源（非关键资源使用async/defer）
  • 预加载关键资源
  • 预获取大概率会访问的下一个页面资源
  • 使用Service Worker实现离线能力和缓存
  • 使用HTTP/2或HTTP/3实现多路复用

Rendering Performance

渲染性能

Avoid Layout Thrashing:
javascript
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = height * 2; // Write
});

// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2; // All writes
});
Optimize Rendering:
  • Use CSS 
    contain
    property for independent regions
  • Minimize DOM depth (flatter is faster)
  • Reduce DOM size (fewer elements)
  • Use 
    content-visibility: auto
    for long lists
  • Virtual scrolling for very long lists (react-window, react-virtualized)
Reduce Paint & Composite:
  • Use 
    transform
    and 
    opacity
    for animations (GPU-accelerated)
  • Avoid animating layout properties (width, height, top, left)
  • Use 
    will-change
    sparingly for known expensive operations
  • Minimize paint areas (smaller is faster)
避免布局抖动：
javascript
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = height * 2; // Write
});

// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2; // All writes
});
渲染优化：
  • 独立区域使用CSS 
    contain
    属性
  • 减小DOM深度（层级越平渲染越快）
  • 减小DOM体积（元素越少越好）
  • 长列表使用 
    content-visibility: auto
  • 超长列表使用虚拟滚动（react-window、react-virtualized）
减少绘制与合成开销：
  • 动画使用 
    transform
    和 
    opacity
    （GPU加速）
  • 避免触发布局的属性动画（width、height、top、left）
  • 仅针对已知高开销操作谨慎使用 
    will-change
  • 缩小绘制区域（区域越小渲染越快）

Animation Performance

动画性能

GPU Acceleration:
css
/* ✅ GPU-accelerated (fast) */
.animated {
  transform: translateX(100px);
  opacity: 0.5;
}

/* ❌ CPU-bound (slow) */
.animated {
  left: 100px;
  width: 300px;
}
Smooth 60fps:
  • Target 16ms per frame (60fps)
  • Use 
    requestAnimationFrame
    for JS animations
  • Debounce/throttle scroll handlers
  • Use CSS animations when possible
  • Avoid long-running JavaScript during animations
Intersection Observer:
javascript
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element is visible, lazy load or animate
    }
  });
});
GPU加速：
css
/* ✅ GPU-accelerated (fast) */
.animated {
  transform: translateX(100px);
  opacity: 0.5;
}

/* ❌ CPU-bound (slow) */
.animated {
  left: 100px;
  width: 300px;
}
60fps流畅度：
  • 单帧耗时目标为16ms（对应60fps）
  • JS动画使用 
    requestAnimationFrame
  • 滚动事件处理器使用防抖/节流
  • 优先使用CSS动画
  • 动画执行期间避免运行长时间JavaScript任务
Intersection Observer：
javascript
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element is visible, lazy load or animate
    }
  });
});

React/Framework Optimization

React/框架优化

React-specific:
  • Use 
    memo()
    for expensive components
  • useMemo()
    and 
    useCallback()
    for expensive computations
  • Virtualize long lists
  • Code split routes
  • Avoid inline function creation in render
  • Use React DevTools Profiler
Framework-agnostic:
  • Minimize re-renders
  • Debounce expensive operations
  • Memoize computed values
  • Lazy load routes and components
React专属优化：
  • 高开销组件使用 
    memo()
  • 高开销计算使用 
    useMemo()
    和 
    useCallback()
  • 长列表虚拟化
  • 路由代码分割
  • 避免在render中创建内联函数
  • 使用React DevTools Profiler定位性能问题
通用框架优化：
  • 减少不必要的重渲染
  • 高开销操作使用防抖
  • 计算值做缓存
  • 路由和组件懒加载

Network Optimization

网络优化

Reduce Requests:
  • Combine small files
  • Use SVG sprites for icons
  • Inline small critical assets
  • Remove unused third-party scripts
Optimize APIs:
  • Use pagination (don't load everything)
  • GraphQL to request only needed fields
  • Response compression (gzip, brotli)
  • HTTP caching headers
  • CDN for static assets
Optimize for Slow Connections:
  • Adaptive loading based on connection (navigator.connection)
  • Optimistic UI updates
  • Request prioritization
  • Progressive enhancement
减少请求数量：
  • 合并小体积文件
  • 图标使用SVG雪碧图
  • 小型关键资源内联
  • 移除未使用的第三方脚本
API优化：
  • 使用分页（不要一次性加载所有数据）
  • 使用GraphQL仅请求需要的字段
  • 响应开启压缩（gzip、brotli）
  • 配置HTTP缓存头
  • 静态资源使用CDN
慢网络适配优化：
  • 根据网络状态（navigator.connection）做自适应加载
  • 乐观UI更新
  • 请求优先级排序
  • 渐进式增强

Core Web Vitals Optimization

Core Web Vitals优化

Largest Contentful Paint (LCP < 2.5s)

最大内容绘制（LCP < 2.5s）

  • Optimize hero images
  • Inline critical CSS
  • Preload key resources
  • Use CDN
  • Server-side rendering
  • 优化首屏大图
  • 关键CSS内联
  • 预加载关键资源
  • 使用CDN
  • 服务端渲染

First Input Delay (FID < 100ms) / INP (< 200ms)

首次输入延迟（FID < 100ms）/ 交互到下一步（INP < 200ms）

  • Break up long tasks
  • Defer non-critical JavaScript
  • Use web workers for heavy computation
  • Reduce JavaScript execution time
  • 拆分长任务
  • defer非关键JavaScript
  • heavy计算使用web workers
  • 减少JavaScript执行耗时

Cumulative Layout Shift (CLS < 0.1)

累积布局偏移（CLS < 0.1）

  • Set dimensions on images and videos
  • Don't inject content above existing content
  • Use 
    aspect-ratio
    CSS property
  • Reserve space for ads/embeds
  • Avoid animations that cause layout shifts
css
/* Reserve space for image */
.image-container {
  aspect-ratio: 16 / 9;
}
  • 为图片和视频设置固定宽高
  • 不要在已有内容上方插入新内容
  • 使用CSS 
    aspect-ratio
    属性
  • 为广告/嵌入内容预留空间
  • 避免触发布局偏移的动画
css
/* Reserve space for image */
.image-container {
  aspect-ratio: 16 / 9;
}

Performance Monitoring

性能监控

Tools to use:
  • Chrome DevTools (Lighthouse, Performance panel)
  • WebPageTest
  • Core Web Vitals (Chrome UX Report)
  • Bundle analyzers (webpack-bundle-analyzer)
  • Performance monitoring (Sentry, DataDog, New Relic)
Key metrics:
  • LCP, FID/INP, CLS (Core Web Vitals)
  • Time to Interactive (TTI)
  • First Contentful Paint (FCP)
  • Total Blocking Time (TBT)
  • Bundle size
  • Request count
IMPORTANT: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
NEVER:
  • Optimize without measuring (premature optimization)
  • Sacrifice accessibility for performance
  • Break functionality while optimizing
  • Use 
    will-change
    everywhere (creates new layers, uses memory)
  • Lazy load above-fold content
  • Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
  • Forget about mobile performance (often slower devices, slower connections)
推荐工具：
  • Chrome DevTools（Lighthouse、性能面板）
  • WebPageTest
  • Core Web Vitals（Chrome UX Report）
  • 包体积分析工具（webpack-bundle-analyzer）
  • 性能监控平台（Sentry、DataDog、New Relic）
核心指标：
  • LCP、FID/INP、CLS（Core Web Vitals）
  • 可交互时间（TTI）
  • 首次内容绘制（FCP）
  • 总阻塞时间（TBT）
  • 包体积
  • 请求数量
重要提示：在真实设备、真实网络环境下做性能测量。高速网络下的桌面Chrome表现不具备代表性。
禁止行为：
  • 不做测量就优化（过早优化）
  • 为了性能牺牲可访问性
  • 优化过程中破坏功能可用性
  • 随处使用 
    will-change
    （会创建新图层，占用内存）
  • 对首屏内容使用懒加载
  • 纠结微优化却忽略核心问题（优先优化最大的瓶颈）
  • 忽略移动端性能（移动端通常设备性能更差、网络更慢）

Verify Improvements

验证优化效果

Test that optimizations worked:
  • Before/after metrics: Compare Lighthouse scores
  • Real user monitoring: Track improvements for real users
  • Different devices: Test on low-end Android, not just flagship iPhone
  • Slow connections: Throttle to 3G, test experience
  • No regressions: Ensure functionality still works
  • User perception: Does it feel faster?
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
测试优化是否生效：
  • 前后指标对比：对比优化前后的Lighthouse得分
  • 真实用户监控：跟踪真实用户的性能提升情况
  • 多设备测试：在低端安卓设备上测试，不要只测旗舰iPhone
  • 慢网络测试：限速到3G测试使用体验
  • 无功能回归：确保所有功能正常运行
  • 用户感知：使用起来是否真的感觉更快？
记住：性能是产品的核心特性之一。快速的体验会让人觉得产品更响应、更精致、更专业。要系统性优化、严格测量、优先优化用户可感知的性能。