WordPress 利用Expires Headers给前端加速,节约流量

Expires Headers可以控制特定文件的浏览器缓存时间,仅当浏览器缓存到期的情况下,才会从服务器请求文件。如将一些不经常变更内容的文件,设置较长的浏览器缓存时间,则可减少HTTP请求数量提升加载速度、大幅减低服务器负载与减少带宽。

建议为静态资源文件设置浏览器缓存

通常可以将js、css,以及所有图片、视频文件都设置较长的浏览器缓存,推荐30天或更久。因为这些文件不会经常更改。

如某个文件需要变更,则可以用版本参数的方式,让所有访问者立即加载更新后的版本,而不用另外创建新文件。

例如:jquery.min.js?ver=1.0jquery.min.js?ver=2.0,在服务器上是相同的一个文件,但对于浏览器来说,这是两个不同的静态资源。jquery.min.js?ver=1.0缓存未到期,也不影响浏览器立即加载jquery.min.js?ver=2.0

在 Apache 服务器上添加 Expires Headers

如果站点主机使用 Apache Web 服务器,可以使用网站根目录中的 .htaccess 文件添加Expires Headers。

在 .htaccess 文件顶部,添加以下代码:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month”
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year”
ExpiresByType image/gif "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month”
ExpiresByType application/xhtml+xml "access 1 month""
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 4 days"
</IfModule>

其中,1 month是缓存时间1个月,而1 year则是缓存时间1年。以上时间期限可以根据需要针对不同类型的文件进行修改。常用的单位有:days、month、year。

在 Nginx 服务器上添加 Expires Headers

Nginx 与 Apache Web 服务器不同,Nginx不支持 .htaccess 文件。Nginx仅支持在服务器的配置文件中进行设置。

正因为如此,一般建议新手选择Apache Web 服务器,而非Nginx。

在Nginx配置文件中的server{……}部分内,添加以下内容:

location ~* \.(jpg|jpeg|gif|png)$ {
   expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
   expires 30d;
}

其中d是以天为单位。

在IIS服务器上添加 Expires Headers

IIS提供了窗口式的设置方式,较为简单。打开IIS管理器,点击要设置的站点,在功能视图中双击HTTP响应标头进行设置。

如果要对不同的文件进行单独设置,则可以选择文件所在文件夹并切换内容视图,选中要设置的静态文件,右键切换到功能视图双击图中的“HTTP响应标头”即可开始设置缓存时间。

WordPress网站的一些建议

如果是WordPress网站,则建议将所有js、css以及媒体图片的缓存时间设置为31536000 秒或 365 天。

除了使用上述方法之外,WordPress网站还可以使用支持控制标头的插件进行设置。例如W3 Total Cache等。

W3 Total Cache插件开启Expires Headers设置

然后转到CSS & JS设置部分,然后输入 Expires header lifespan 值(以秒为单位),建议:31536000秒。

W3 Total Cache设置expires headers值

图片资源也是同样的设置方法。