性能优化

一句话定义

通过优化加载速度、交互响应和视觉稳定性，提升用户体验和Google搜索排名。

Core Web Vitals三大指标：LCP（最大内容渲染时间）< 2.5秒、FID/INP（首次输入延迟）< 100毫秒、CLS（累积布局偏移）< 0.1。Google将这三个指标纳入排名因素，直接影响SEO流量。用PageSpeed Insights检测当前状态。
图片压缩与格式优化：图片通常占页面总大小的60%以上。使用WebP格式替代PNG/JPG，体积减少30%-50%；配合next/image组件自动生成响应式图片和多格式输出。上传前先用TinyPNG或Squoosh压缩，单张图片控制在100KB以内。
代码分割与懒加载：NextJS自动按页面进行代码分割，但第三方库（如Chart.js、PDF.js）需要手动dynamic import。图片和组件使用lazy loading，首屏只加载可视区域内容，减少初始JS bundle体积。
缓存策略配置：静态资源设置长期缓存（Cache-Control: max-age=31536000），文件名包含hash指纹实现缓存失效。HTML页面设置短期缓存或no-cache。Cloudflare缓存规则和Vercel的Edge Cache配合使用效果最佳。
数据库查询优化：使用索引加速常用查询、避免N+1问题（ORM的常见坑）、列表接口加分页限制。Neon Serverless数据库支持连接池，减少冷启动延迟。

过早优化：功能还没做完就花大量时间调性能 → 正确做法：先保证功能完整上线，用PageSpeed Insights定位瓶颈，按优先级逐个优化
只看Lab数据忽略Field数据：只看Lighthouse跑分 → 正确做法：同时关注Google Search Console中的实际用户Core Web Vitals数据，Field数据才是排名依据
忽视移动端性能：只在电脑上测试速度 → 正确做法：移动端流量占比超过50%，优先优化移动端LCP和CLS