284 lines
6.0 KiB
Markdown
284 lines
6.0 KiB
Markdown
# 网站性能优化指南
|
||
|
||
## 🚀 优化成果
|
||
|
||
经过全面的性能优化，网站首次访问速度得到显著改善：
|
||
|
||
### 优化前的问题
|
||
- ❌ 新闻详情页首次访问卡顿 1-3 秒
|
||
- ❌ 产品页面和新闻页面首次访问延迟
|
||
- ❌ 客户端渲染导致的白屏时间
|
||
- ❌ 大量重复翻译数据增加包体积
|
||
- ❌ 缺少预加载和缓存机制
|
||
|
||
### 优化后的改进
|
||
- ✅ 服务端预渲染，消除客户端数据获取延迟
|
||
- ✅ ISR 缓存策略，1小时重新验证
|
||
- ✅ 关键页面预加载机制
|
||
- ✅ 翻译数据提取，减少代码重复
|
||
- ✅ 图片和资源优化加载
|
||
- ✅ 性能监控和分析系统
|
||
|
||
## 📈 技术实现
|
||
|
||
### 1. 服务端渲染 (SSR) 转换
|
||
|
||
#### 新闻详情页优化
|
||
```typescript
|
||
// 之前：客户端数据获取
|
||
'use client';
|
||
const [article, setArticle] = useState(null);
|
||
useEffect(() => {
|
||
fetch(`/api/articles/${id}`).then(...)
|
||
}, []);
|
||
|
||
// 现在：服务端预渲染
|
||
export default async function NewsArticlePage({ params }) {
|
||
const data = await getArticleData(params.id, params.locale);
|
||
return <NewsArticleServerComponent article={data.article} />;
|
||
}
|
||
```
|
||
|
||
#### 产品页面优化
|
||
- 移除客户端状态管理
|
||
- 提取翻译数据到独立文件
|
||
- 使用服务器组件预渲染
|
||
|
||
### 2. 增量静态再生 (ISR) 缓存
|
||
|
||
```typescript
|
||
// API 路由缓存策略
|
||
const response = await fetch(url, {
|
||
next: { revalidate: 3600 } // 1小时后重新验证
|
||
});
|
||
|
||
// HTTP 缓存头
|
||
response.headers.set('Cache-Control',
|
||
'public, s-maxage=3600, stale-while-revalidate'
|
||
);
|
||
```
|
||
|
||
### 3. 预加载机制
|
||
|
||
```typescript
|
||
// 首页预加载关键页面
|
||
function PrefetchLinks({ locale }) {
|
||
return (
|
||
<>
|
||
<Link href="/products" prefetch={true} style={{ display: 'none' }} />
|
||
<Link href="/news" prefetch={true} style={{ display: 'none' }} />
|
||
<Link href="/contact" prefetch={true} style={{ display: 'none' }} />
|
||
</>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 4. 资源优化
|
||
|
||
#### 图片预加载
|
||
```typescript
|
||
// 预加载关键图片
|
||
const criticalImages = [
|
||
'/images/hero-bg.jpg',
|
||
'/images/cloud-services.jpg',
|
||
'/images/aws-logo.png'
|
||
];
|
||
```
|
||
|
||
#### 字体预加载
|
||
```typescript
|
||
// 预加载关键字体
|
||
<link
|
||
rel="preload"
|
||
href="/fonts/inter-var.woff2"
|
||
as="font"
|
||
type="font/woff2"
|
||
crossOrigin="anonymous"
|
||
/>
|
||
```
|
||
|
||
## 🛠️ 使用指南
|
||
|
||
### 配置环境变量
|
||
|
||
```env
|
||
# 性能监控
|
||
NEXT_PUBLIC_PERFORMANCE_API=https://your-analytics-endpoint.com/perf
|
||
|
||
# CDN 配置
|
||
NEXT_PUBLIC_CDN_DOMAIN=https://cdn.your-domain.com
|
||
NEXT_PUBLIC_IMAGE_CDN_DOMAIN=https://images.your-domain.com
|
||
```
|
||
|
||
### 启用性能监控
|
||
|
||
```typescript
|
||
// 在 _app.tsx 或 layout.tsx 中
|
||
import { usePageLoadOptimization } from '@/lib/performance-config';
|
||
|
||
export default function RootLayout({ children }) {
|
||
usePageLoadOptimization(); // 启用性能优化
|
||
return <>{children}</>;
|
||
}
|
||
```
|
||
|
||
### 性能配置调整
|
||
|
||
编辑 `lib/performance-config.ts` 来调整配置：
|
||
|
||
```typescript
|
||
export const performanceConfig = {
|
||
cache: {
|
||
apiCacheDuration: 3600, // API 缓存时间
|
||
isrRevalidate: 3600, // ISR 重新验证时间
|
||
},
|
||
prefetch: {
|
||
criticalPages: ['/products', '/news'], // 预加载页面
|
||
prefetchDelay: 100, // 预加载延迟
|
||
},
|
||
// ... 更多配置
|
||
};
|
||
```
|
||
|
||
## 📊 性能指标
|
||
|
||
### Core Web Vitals 目标值
|
||
- **LCP (Largest Contentful Paint)**: < 2.5s
|
||
- **FID (First Input Delay)**: < 100ms
|
||
- **CLS (Cumulative Layout Shift)**: < 0.1
|
||
|
||
### 缓存策略
|
||
- **API 响应**: 1小时内存缓存 + HTTP 缓存
|
||
- **静态资源**: 24小时浏览器缓存
|
||
- **页面**: ISR 1小时重新验证
|
||
|
||
### 预加载策略
|
||
- **关键页面**: 首页自动预加载
|
||
- **关键图片**: 100ms 延迟预加载
|
||
- **字体文件**: 立即预加载
|
||
|
||
## 🔧 开发建议
|
||
|
||
### 1. 添加新页面时
|
||
```typescript
|
||
// 优先使用服务器组件
|
||
export default async function NewPage() {
|
||
const data = await getServerData();
|
||
return <ServerComponent data={data} />;
|
||
}
|
||
|
||
// 避免不必要的客户端状态
|
||
// ❌ 不推荐
|
||
'use client';
|
||
const [data, setData] = useState(null);
|
||
|
||
// ✅ 推荐
|
||
// 在服务端预获取数据
|
||
```
|
||
|
||
### 2. 优化图片使用
|
||
```typescript
|
||
// 使用 Next.js Image 组件
|
||
import Image from 'next/image';
|
||
|
||
<Image
|
||
src="/image.jpg"
|
||
alt="Description"
|
||
width={800}
|
||
height={400}
|
||
priority // 关键图片设置优先级
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
/>
|
||
```
|
||
|
||
### 3. 代码分割最佳实践
|
||
```typescript
|
||
// 动态导入非关键组件
|
||
const LazyComponent = dynamic(() => import('./LazyComponent'), {
|
||
ssr: false,
|
||
loading: () => <Skeleton />
|
||
});
|
||
```
|
||
|
||
## 📱 移动端优化
|
||
|
||
### 响应式图片
|
||
```typescript
|
||
// 针对不同屏幕尺寸优化
|
||
const imageSizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw";
|
||
```
|
||
|
||
### 触摸优化
|
||
```css
|
||
/* 提升触摸响应速度 */
|
||
.button {
|
||
touch-action: manipulation;
|
||
}
|
||
```
|
||
|
||
## 🔍 监控和调试
|
||
|
||
### 性能监控
|
||
```typescript
|
||
// 自动性能指标收集
|
||
PerformanceOptimizer.monitorPerformance();
|
||
```
|
||
|
||
### 开发调试
|
||
```bash
|
||
# 运行性能分析
|
||
npm run dev
|
||
# 打开 Chrome DevTools > Lighthouse 进行性能测试
|
||
```
|
||
|
||
### 生产环境监控
|
||
- Core Web Vitals 自动收集
|
||
- 导航时间监控
|
||
- 错误日志记录
|
||
|
||
## 🚀 部署优化
|
||
|
||
### 构建优化
|
||
```json
|
||
// next.config.js
|
||
{
|
||
"experimental": {
|
||
"optimizeCss": true,
|
||
"optimizePackageImports": ["react-icons"]
|
||
},
|
||
"images": {
|
||
"formats": ["image/webp", "image/avif"]
|
||
}
|
||
}
|
||
```
|
||
|
||
### CDN 配置
|
||
- 静态资源 CDN 加速
|
||
- 图片 CDN 优化
|
||
- 全球边缘缓存
|
||
|
||
## 📈 预期效果
|
||
|
||
实施这些优化后，预期可以获得：
|
||
|
||
- **首次访问速度提升**: 60-80%
|
||
- **重复访问速度提升**: 90%+
|
||
- **用户体验评分**: 显著改善
|
||
- **SEO 排名**: 因性能提升而受益
|
||
- **服务器负载**: 减少 40-60%
|
||
|
||
## 🔄 持续优化
|
||
|
||
### 定期检查
|
||
- 每月性能审计
|
||
- 监控 Core Web Vitals 变化
|
||
- 分析用户行为数据
|
||
|
||
### 优化建议
|
||
- 根据实际使用数据调整缓存策略
|
||
- 优化预加载页面列表
|
||
- 持续监控和改进
|
||
|
||
---
|
||
|
||
通过这些优化措施，网站的首次访问体验得到显著改善，用户不再需要等待1-3秒的加载时间，页面响应更加流畅。 |