性能, 优化·
Web 性能优化指南
提升网站加载速度和用户体验的实用技巧
Web 性能直接影响用户体验和 SEO。本文介绍提升网站性能的最佳实践。
性能指标
Core Web Vitals
- LCP（最大内容绘制） - 主要内容加载时间，应 < 2.5s
- FID（首次输入延迟） - 首次交互响应时间，应 < 100ms
- CLS（累积布局偏移） - 布局稳定性，应 < 0.1
其他重要指标
- FP（首次绘制） - 首次像素绘制
- FCP（首次内容绘制） - 首次内容渲染
- TTI（可交互时间） - 页面完全可交互
- TBT（总阻塞时间） - 主线程阻塞时间
资源优化
图片优化
<!-- 使用正确的图片格式 -->
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="描述" loading="lazy">
</picture>
<!-- 响应式图片 -->
<img
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
src="large.jpg"
alt="描述"
>
<!-- 懒加载 -->
<img src="image.jpg" loading="lazy" alt="描述">
CSS 优化
/* 减少选择器嵌套 */
/* 不好的 */
.header .nav .menu .item .link {
color: blue;
}
/* 好的 */
.nav-link {
color: blue;
}
/* 使用 CSS 变量 */
:root {
--primary-color: #3498db;
--spacing: 16px;
}
JavaScript 优化
// 延迟加载非关键 JS
<script src="critical.js"></script>
<script defer src="non-critical.js"></script>
<script async src="analytics.js"></script>
// 代码分割
import('./module').then(module => {
module.doSomething();
});
// 使用 requestAnimationFrame
function animate() {
requestAnimationFrame(animate);
// 动画代码
}
缓存策略
HTTP 缓存
// Nginx 配置示例
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
Service Worker 缓存
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/styles.css',
'/script.js'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
网络优化
CDN（内容分发网络）
- 使用 CDN 分发静态资源
- 减少网络延迟
- 提高可用性
HTTP/2 和 HTTP/3
- 启用 HTTP/2 多路复用
- 使用 HTTP/3 减少连接延迟
- 服务器推送关键资源
预加载和预连接
<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="https://api.example.com">
<!-- 预加载 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- 预获取 -->
<link rel="prefetch" href="next-page.html">
代码优化
Tree Shaking
// webpack 配置
optimization: {
usedExports: true,
minimize: true
}
// 只导入需要的部分
import { debounce } from 'lodash-es';
// 而不是
import _ from 'lodash';
压缩和混淆
- 压缩 HTML、CSS、JavaScript
- 使用 Brotli 或 Gzip 压缩
- 代码混淆（可选）
监控和分析
性能监控工具
// 使用 Performance API
const perfData = performance.getEntriesByType('navigation')[0];
console.log('页面加载时间:', perfData.loadEventEnd);
// 使用 Web Vitals 库
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);
分析工具
- Lighthouse - 综合性能分析
- WebPageTest - 详细性能测试
- PageSpeed Insights - Google 性能评分
最佳实践
- 最小化 HTTP 请求 - 合并资源
- 优化图片 - 使用现代格式和压缩
- 使用 CDN - 加速资源加载
- 启用缓存 - 减少重复请求
- 延迟加载 - 懒加载非关键资源
- 优化代码 - 移除未使用代码
- 监控性能 - 持续监控和优化
学习资源
提升网站性能，改善用户体验！