Expires Headers可以控制特定文件的浏览器缓存时间,仅当浏览器缓存到期的情况下,才会从服务器请求文件。如将一些不经常变更内容的文件,设置较长的浏览器缓存时间,则可减少HTTP请求数量提升加载速度、大幅减低服务器负载与减少带宽。
建议为静态资源文件设置浏览器缓存
通常可以将js、css,以及所有图片、视频文件都设置较长的浏览器缓存,推荐30天或更久。因为这些文件不会经常更改。
如某个文件需要变更,则可以用版本参数的方式,让所有访问者立即加载更新后的版本,而不用另外创建新文件。
例如:jquery.min.js?ver=1.0
和jquery.min.js?ver=2.0
,在服务器上是相同的一个文件,但对于浏览器来说,这是两个不同的静态资源。jquery.min.js?ver=1.0
缓存未到期,也不影响浏览器立即加载jquery.min.js?ver=2.0
。
在 Apache 服务器上添加 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 天。
然后转到CSS & JS设置部分,然后输入 Expires header lifespan 值(以秒为单位),建议:31536000秒。
图片资源也是同样的设置方法。