HTTP性能优化实战

1. 压缩优化

1.1 Gzip压缩

Accept-Encoding: gzip, deflate

1.2 Brotli压缩

Accept-Encoding: br

2. 缓存策略

2.1 强缓存

Cache-Control: max-age=31536000
Expires: Wed, 21 Oct 2025 07:28:00 GMT

2.2 协商缓存

Last-Modified: Wed, 21 Oct 2020 07:28:00 GMT
If-Modified-Since: Wed, 21 Oct 2020 07:28:00 GMT

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

3. 连接优化

3.1 Keep-Alive

Connection: keep-alive
Keep-Alive: timeout=5, max=1000

3.2 HTTP/2

Upgrade: h2
Connection: Upgrade

4. 资源优化

4.1 资源合并

<script src="bundle.js"></script>

4.2 图片优化

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg">
</picture>

5. CDN加速

Content-Delivery-Network: Cloudflare

6. 预加载

6.1 DNS预解析

<link rel="dns-prefetch" href="//example.com">

6.2 资源预加载

<link rel="preload" href="style.css" as="style">

7. 请求优化

7.1 域名分片

<script src="https://static1.example.com/script.js"></script>
<script src="https://static2.example.com/script.js"></script>

7.2 懒加载

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy">

8. 响应头优化

8.1 安全头

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Content-Security-Policy: default-src 'self'
X-Frame-Options: DENY

8.2 性能头

Timing-Allow-Origin: *
Feature-Policy: geolocation 'self'

9. 监控指标

9.1 关键指标

TTFB (Time To First Byte)
FCP (First Contentful Paint)
LCP (Largest Contentful Paint)
CLS (Cumulative Layout Shift)

9.2 监控工具

Lighthouse
WebPageTest
Chrome DevTools