如何使用Nginx缓存静态资源以加速网站

为什么静态资源缓存很重要

每次用户访问您的网站时，他们的浏览器都会请求数十个静态资源：CSS文件、JavaScript、图片、字体等。如果没有适当的缓存，每个请求都会到达您的服务器，增加加载时间和带宽使用。Nginx作为一款高性能Web服务器，可以通过告诉浏览器在本地缓存这些资源以及在服务器端缓存它们，来显著改善这一点。

在本指南中，您将学习如何配置Nginx来有效缓存静态资源，从而减少延迟和服务器负载。

理解浏览器缓存与服务器端缓存

这里涉及两种主要的缓存类型：

• 浏览器缓存：浏览器根据Cache-Control和Expires等HTTP头将资源存储在本地。后续访问时从磁盘加载资源，避免网络请求。
• 服务器端缓存：Nginx将响应存储在内存或磁盘中，并对重复请求直接提供这些响应，从而减少后端负载。

两者对性能都至关重要。我们将涵盖这两方面。

步骤1：使用Expires头配置浏览器缓存

启用浏览器缓存最简单的方法是在Nginx配置中添加expires指令。这会设置Expires和Cache-Control头。

打开您站点的配置文件（例如/etc/nginx/sites-available/example.com），并为静态资源添加一个location块：

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

这告诉浏览器将这些文件缓存一年。immutable指令表示文件永远不会改变，因此浏览器在重新加载时甚至不会重新验证。

最佳实践：使用带版本的文件名（例如style.abc123.css），这样您可以在不破坏缓存的情况下更新资源。当文件更改时，文件名也会更改，浏览器会获取新版本。

步骤2：使用代理缓存启用服务器端缓存

如果您在Nginx后面运行应用服务器（如Node.js、Python或PHP），您可以在Nginx中缓存静态响应以减少后端请求。

首先，在nginx.conf的http块中定义缓存路径：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:10m max_size=1g inactive=60m use_temp_path=off;

然后，在您的server块中使用它：

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    proxy_cache static_cache;
    proxy_cache_valid 200 302 1y;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_lock on;
    add_header X-Cache-Status $upstream_cache_status;
    proxy_pass http://backend;
}

这将成功响应缓存一年，并在后端不可用时提供过时内容。X-Cache-Status头有助于调试（HIT、MISS等）。

步骤3：使用压缩和HTTP/2进行优化

缓存减少了请求，但您可以通过启用gzip压缩和HTTP/2进一步加速传输。

在nginx.conf中启用gzip：

gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_min_length 1000;

HTTP/2多路复用请求，通过向listen指令添加http2来启用：

listen 443 ssl http2;

注意：HTTP/2需要HTTPS。如果您尚未设置TLS，请参阅我们的指南HTTPS和TLS如何真正工作。

比较：Cache-Control指令

步骤4：测试和验证

应用更改后，重新加载Nginx：sudo nginx -s reload。然后使用curl测试：

curl -I https://example.com/style.css

查找Cache-Control和Expires头。您还可以使用浏览器DevTools（网络选项卡）查看资源是否从缓存提供（状态200或304）。

对于服务器端缓存，监控X-Cache-Status头。

常见陷阱和最佳实践

• 不要缓存HTML：HTML应该是动态的或具有较短的缓存时间以反映更新。
• 使用版本控制：在文件名后附加哈希值，以便在内容更改时清除缓存。
• 设置适当的max-age：对于带版本的资源，一年是安全的。
• 监控缓存大小：服务器端缓存可能会增长；设置max_size和inactive。
• 考虑CDN：对于全球受众，CDN可以将资源缓存到更接近用户的位置。

常见问题

如何知道我的资源是否被缓存？

使用curl -I或浏览器DevTools检查响应头。查找Cache-Control: public, max-age=31536000和Expires头。在DevTools中，Size列对于缓存的资源会显示"(来自磁盘缓存)"。

expires和Cache-Control有什么区别？

expires设置绝对日期，而Cache-Control使用相对秒数。在现代浏览器中，Cache-Control优先。Nginx的expires指令为了兼容性同时设置两者。

我可以缓存动态内容吗？

可以，但要谨慎。使用proxy_cache并设置较短的TTL，并考虑基于cookie或头的缓存键。对于用户特定内容，使用private或避免缓存。

使用TryQuickToolBox加速您的工作流程

在优化网站性能时，您可能需要压缩图片或PDF。试试我们的图像压缩器，在不损失质量的情况下减小图像大小，补充您的Nginx缓存策略。