2025 年 Web 性能优化清单

P

性能专家

2周前

2025 年 Web 性能优化清单

性能优化Web Vitals最佳实践

2025 年 Web 性能优化完全指南

从 Core Web Vitals 到用户体验的全面优化。

1. Core Web Vitals 目标

  • •LCP (最大内容绘制): < 2.5s
  • •INP (交互到下一次绘制): < 200ms
  • •CLS (累积布局偏移): < 0.1

    • 2. 图片优化

    tsx
    import Image from 'next/image'

src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority
placeholder="blur"
/>

    3. 代码分割

    tsx
    const HeavyComponent = dynamic(() => import('./Heavy'), {

    
loading: () => ,
ssr: false
})

    4. 缓存策略

    typescript
    // next.config.js

    
headers: [
{
source: '/:all*(svg
    jpg
    png)',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000' }
]
}
]

    5. 性能监控

    typescript
    export function reportWebVitals(metric) {

    
analytics.send({
name: metric.name,
value: metric.value
})
}

    工具推荐

  • •Lighthouse CI
  • •WebPageTest
  • •Chrome DevTools Performance
    • 4.6k 阅读