页面速度优化
图片优化
- 使用现代格式：WebP（支持率 90%）、AVIF（85%），以 JPEG/PNG 为后备
- 压缩图片：照片使用有损压缩（80% 质量），图形使用无损
- 提供正确尺寸的图片：使用 srcset 响应式图片
- 懒加载折叠以下图片：
loading="lazy" - 所有图片设置明确的 width 和 height 防止 CLS
- 预加载 LCP 图片：
<link rel="preload" as="image" href="hero.webp"> - 使用 CDN 分发图片
JavaScript 优化
- 延迟加载非关键脚本：
<script defer src="..."> - 独立脚本使用异步：
<script async src="..."> - 删除未使用的 JavaScript（构建工具 tree-shaking）
- 分割大型包（动态导入）
- 压缩并启用 gzip/brotli
- 用轻量级替代品替换重型库
CSS 优化
- 在 <head> 内联关键 CSS（首屏样式）
- 延迟加载非关键 CSS
- 压缩 CSS 文件
- 删除未使用的 CSS（PurgeCSS）
- 避免 CSS 中使用 @import（导致渲染阻塞链）
字体优化
- 使用
font-display: swap或optional - 预加载关键字体：
<link rel="preload" as="font" crossorigin> - 使用可变字体减少文件数量
- 字体子集化，仅包含所需字符
- 自托管字体（节省 DNS 查找时间）
服务器与缓存
- 启用 gzip 或 brotli 压缩（优先 brotli）
- TTFB 控制在 200ms 以内
- 使用 HTTP/2 或 HTTP/3（多路复用）
- 设置适当的 Cache-Control 头
- 使用 CDN 从边缘节点提供静态资源
- 启用长连接（keep-alive）
- 减少重定向链
资源提示
<!-- 预加载关键资源 -->
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="main.css" as="style">
<!-- 预取下一页资源 -->
<link rel="prefetch" href="/next-page.html">
<!-- DNS 预取第三方域名 -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<!-- 预连接（DNS + TCP + TLS） -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>