1 如何让浏览器缓存静态资源

在使用pagespeed.web.dev测试网站性能时，在测试的结果页面我们可以看到有一个采用高效的缓存策略提供静态资源。

WordPress – 网站性能优化，设置浏览器缓存静态资源-StubbornHuang Blog

在上图中所示的分析页面我们可以看到三个主要的信息：网址、缓存TTL、传输文件大小，其中缓存TTL就是表示静态资源在浏览器中缓存的时间。

为了浏览器主动缓存网站的静态资源，比如说图片文件、字体文件、js文件、css文件，避免每次都从服务器进行请求，需要在服务器端设置HTTP响应头，用来标志浏览器需要缓存某些静态资源。

以下是与缓存相关的标头：

  • Cache-Control：用于控制资源的缓存机制。通过设置值为 public 或 private 来指定资源是否可以被缓存，并通过设置 max-age 指定资源应该被缓存的时间长度。
  • Expires：允许指定一个过期时间，过期后，浏览器必须重新获取资源。
  • ETag：允许服务器标识资源，并使用 If-None-Match 请求头进行缓存验证。
  • Last-Modified：允许服务器指定资源最后修改的时间，并使用 If-Modified-Since 请求头进行缓存验证。

比如说：

Cache-Control: max-age=31536000

max-age 参数告诉浏览器它应该将资源缓存多长时间，单位为秒。以下示例将持续时间设置为 31536000，对应于 1 年：60 秒 × 60 分钟 × 24 小时 × 365 天= 31536000 秒。

通过在服务器中对对应文件设置相应的HTTP标头标志在浏览器中缓存静态资源。

2 WordPress网站的静态资源缓存

2.1 Nginx

如果你的服务器使用的Nginx进行代理，可以参考以下代码设置静态文件缓存

    # 图片文件
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }

    # js，css文件
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log /dev/null; 
    }

    # 字体文件
    location ~ .*\.(eot|ttf|woff|woff2)?$
    {
        expires      180d;
        error_log off;
        access_log /dev/null; 
    }

2.2 Apache

如果你的服务器使用的Apache进行代理，可以参考以下代码设置静态文件缓存

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

3 合理的设置静态资源缓存

如果你的静态资源经常更新，可以将其缓存设置为 no-cache，但浏览器仍会缓存该资源，不过首先会与服务器进行检查，以确保资源仍然是最新的。也可以减少其expire的时长，比如说几个小时，避免影响网站的其他功能。所以说并不是缓存期越长越好。而是需要根据实际需求进行权衡，以决定资源的最佳缓存期。

参考链接