怎样用Apache2优化图片加载速度

Apache2优化图片加载速度的实用方案

一 启用压缩与长缓存

• 启用压缩：使用 mod_deflate 压缩文本、样式、脚本等资源；对图片启用压缩通常收益有限，但可顺带处理 WebP 等格式。
• 启用长缓存：使用 mod_expires 与 mod_headers 为图片设置长期 Cache-Control 与 Expires，减少重复请求。

示例配置（建议放入站点或全局配置中）：

# 启用压缩（图片可选择性加入）
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript text/javascript
    AddOutputFilterByType DEFLATE image/webp
</IfModule>

# 长缓存策略
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg  "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png  "access plus 1 year"
    ExpiresByType image/gif  "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
</IfModule>

<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|webp)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>
</IfModule>

说明：对图片设置 immutable 可避免带文件指纹（如 ?v=）的资源在版本更新时仍被强制回源验证。修改后执行：sudo systemctl restart apache2 使配置生效。

二 启用 HTTP/2 与 KeepAlive

• 启用 HTTP/2（需 Apache 2.4.17+ 且启用 mod_http2）：多路复用可显著减少图片并发请求时的队头阻塞，提升首屏速度。
• 启用 KeepAlive：复用 TCP 连接，降低握手开销，对大量小图或雪碧图尤为有效。

示例配置：

# 在全局或虚拟主机启用 HTTP/2
<IfModule mod_http2.c>
    Protocols h2 http/1.1
</IfModule>

# 启用 KeepAlive
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 5

修改后执行：sudo systemctl restart apache2 使配置生效。

三 使用 CDN 与源站缓存

• 使用 CDN：将图片分发到全球边缘节点，用户就近获取，显著降低 TTFB 与跨网延迟。
• 源站静态文件缓存：启用 mod_cache_disk 等模块，对图片等静态资源做反向代理/网关层缓存，进一步减轻源站压力、提升命中率。

示例配置（源站启用磁盘缓存，按需调整）：

# 启用磁盘缓存（示例路径，权限与容量请按实际调整）
<IfModule mod_cache_disk.c>
    CacheRoot "/var/cache/apache2/mod_cache_disk"
    CacheEnable disk /
    CacheDirLevels 2
    CacheDirLength 1
</IfModule>

启用后重启服务：sudo systemctl restart apache2。结合 Cache-Control 与 Expires 能获得更稳定的缓存命中与回源策略。

四 图片本身优化与验证

• 图片优化：在上传前使用工具（如 imagemin）进行有损/无损压缩，合理选择 JPEG/PNG/WebP/AVIF 格式，控制分辨率与质量，减少字节数。
• 验证与观测：
  • 检查压缩是否生效：响应头中出现 Content-Encoding: gzip（对文本/CSS/JS 更有用）。
  • 检查缓存是否生效：响应头出现 Cache-Control: max-age=31536000 与 Expires 且值符合预期。
  • 使用 curl -I 或浏览器开发者工具查看响应头，确认 HTTP/2 是否启用（Protocol 列显示 h2）。