网站性能优化
1. 图片优化
使用现代格式
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="描述">
</picture>- WebP - 比 JPEG 小 30%
- AVIF - 最新格式，压缩率更高
懒加载
<img src="image.jpg" loading="lazy" alt="描述">2. CSS/JS 优化
压缩和合并
<!-- 生产环境使用压缩文件 -->
<link rel="stylesheet" href="css/style.min.css">
<script src="js/bundle.min.js"></script>异步加载 JS
<script src="analytics.js" defer></script>
<script src="module.js" type="module"></script>3. 关键 CSS 内联
<head>
<style>
/* 首屏关键样式 */
.header { ... }
.hero { ... }
</style>
<link rel="preload" href="css/style.css" as="style">
<link rel="stylesheet" href="css/style.css" media="print" onload="this.media='all'">
</head>4. 使用 CDN
静态资源使用 CDN 分发，提高加载速度。
5. 性能监控
- Lighthouse - Chrome 内置性能检测
- PageSpeed Insights - Google 在线工具
- WebPageTest - 详细的性能分析
性能指标
| 指标 | 目标 |
|---|---|
| FCP (首次内容绘制) | < 1.8 秒 |
| LCP (最大内容绘制) | < 2.5 秒 |
| CLS (累计布局偏移) | < 0.1 |