网站速度优化技巧:Nginx设置js、css过期时间方法

网址设置Js、css等公事的逾期时间,是进步网址速度的为主技能方法之一,从前写过怎么着在IIS设置网页内容过期时间一文,满意了部分网上基友的急需,近日有网络好友在群里提到,他们利用的是Nginx服务器,但还不知什么设置Js、css文件过期时间,故写下此教程,以便查看。

导读 这篇教程说明你应该怎样配置 nginx、设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片、 CSS 和 Javascript 文件)设置一个时间,这样用户的浏览器就会缓存这些文件。这样能节省带宽,并且在访问你的网站时会显得更快些(如果用户第二次访问你的网站,将会使用浏览器缓存中的静态文件)。

Nginx设置Js、Css等静态文件的缓存过期时刻

Nginx如何设置Js、css等文件的过期时间

1、准备事项

location ~.*.(js|css|html|png|jpg)$
{
expires 3d;
}

率先张开配置文件/etc/nginx/nginx.conf,然后找到下边那句话:

自家想你供给三个正规办事的 nginx 软件,能够查阅另一篇的帖子:在 Ubuntu
16.04 LTS 上安装 Nginx,PHP 7 和 MySQL 5.7
(LEMP)。

expires 3d;  //表示缓存3天

location~ .*.(gif|jpg|png|htm|html|css|js|flv|ico|swf)(.*) {expires
30d;}

2 配置 nginx

expires 3h;  //表示缓存3小时

设置expires这些参数就能够,30d表示30天,注意后边有个分行“;”。

能够参照 expires 指令手册来设置 HTTP 尾部过期时间,那一个符号可以投身”http {}”、”server {}”、”location {}” 等语句块大概 “location {}”
语句块中的条件语句中。平常会在 “location” 语句块中用 “expires”
指令调整你的静态文件,就好像下边相近:

expires max;  //表示缓存10年

借使过期时间为小时,则用“h”,如“expires
1h;”表示文件缓存在1钟头后过期。看看上面包车型大巴表率:

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

expires -1;  //表示永世过期。

#图片缓存30天location ~.*.(jpg|png|jpeg)${expires 30d;}#js
css缓存一钟头location ~.*.(js|css)?${expires 1h;}

在上头的例子中,全数后缀名是 .jpg、 .jpeg、 .png、 .gif、 .ico、 .css 和
.js 的文件会在浏览器访谈该公文自此的 365 天后过期。由此你要确定保证 location
{} 语句块仅仅包罗能被浏览器缓存的静态文件。

一经设置为-1在js、css等静态文件在还没改动的意况下回到的是http
304,要是改革再次回到http 200

语法解释

接下来重启 nginx 进度:

http
304:自从上次恳请后,乞求的网页未修改过。服务器再次回到此响适当时候,不会回到网页内容。

nginx作为web服务器,不经常需求让浏览器缓存(Browser Caching卡塔尔是为着加紧浏览并节约网络财富,浏览器在顾客磁盘上对近些日子央求过的文档进行仓库储存。nginx通过expires指令来安装浏览器的Header

/etc/init.d/nginx reload

http 200:服务器已成功拍卖了央浼,那意味服务器提供了供给的剧情。

语法: expires [time|epoch|max|off]默认值: expires off作用域: http,
server, location

你能够在
“expires” 指令中接收以下的小时设置:

============================================================
举例不想让代理或浏览器缓存,加no-cache参数
add_header Cache-Control no-cache;
如此浏览器F5刷新时,重回的正是http 200,并不是http 304

利用本指令可以决定HTTP应答中的“Expires”和“Cache-Control”的头标,(起到调控页面缓存的效果与利益卡塔尔(قطر‎。

  • ●”off” 让 “Expires” 和 “Cache-Control” 尾部不能够被改变。
  • ●”epoch” 将”Expires” 尾部设置成 一九七〇 年 1 月 1 日 00:00:01。
  • ●”max” 设置 “Expires” 底部为 2037 年 12 月 31 日 23:59:59,设置”
    Cache-Control “的最大存活时间为 10 年
  • ●没有” @
    “前缀的命宫表示那是一个与浏览器访问时间关于的超时时间。能够钦定一个负值的岁月,就能够把”
    Cache-Control “头部设置成” no-cache”。比方:”expires 10d” 恐怕”
    expires 14w3d”。
  • ●有” @ “前缀的时光钦赐在一五月的有些时间过期,格式是 Hh 恐怕Hh:Mm,H
    的限量是 0 到 24,M 的限制是 0 到 59,比方:”expires @15:34″。

能够在time值中动用正数或负数。“Expires”头标的值将因此当前系统时间拉长你设定的
time 值来获取。

您能够用以下的小运单位:

epoch 指定“Expires”的值为 1 January, 1970, 00:00:01 GMT。

  • ●”ms”: 毫秒
  • ●”s”: 秒
  • ●”m”: 分钟
  • ●”h”: 小时
  • ●”d”: 天
  • ●”w”: 星期
  • ●”M”: 月 (30 天)
  • ●”y”: 年 (365 天)

max 指定“Expires”的值为 31 December 2037 23:59:59
GMT,“Cache-Control”的值为10年。

比方:”1h30m” 表示一钟头半小时,”1y6M” 表示一年7个月。

-1 钦命“Expires”的值为服务器当前几天子;-1s,表示永恒过期,即不缓存文件。

在乎,假如你用三个在未来十分久才会晚点的头顶,当组件校正时您将在退换组件的文书名。由此给文件钦点版本是二个不易的点子。举个例子,假使您有个
javascript.js 文件
并且你要修正它,你能够在修正的文书名字背后加多二个版本号。这样浏览器就要下载那一个文件,假若您从未改换文件名,浏览器将从缓存里面加载(旧的)文件。

怎么着检查评定网页过期设置是或不是见到效果?

除外把依据浏览器访谈时间设置” Expires” 底部(举个例子 “expires
10d”)之外,也得以因而在岁月前面包车型地铁” modified “关键字,将 “Expires”
底部的基准设为文件校正的时间(请小心那无非对存款和储蓄在硬盘的实际文件有效)。

开荒webkaka的网址速度确诊工具(在线测验工具网站如下图State of Qatar,输入你的网页地址,检查评定后,立时能够见到设置是还是不是见效了。

expires modified 10d;

检验网页缓存是还是不是见到成效

3 测试

上海体育地方来看,被检查实验网页的js、css文件过期时间为1天。

要测量检验你的配置是还是不是有效,能够用火狐浏览器的开荒者工具中的网络解析功效,然后用火狐访谈二个静态文件(比方一张图片)。在输出的头顶新闻里,应该能收看
Expires 头部和有 max-age 标识的 Cache-Control 底部(max-age
标志包括了一个以秒为单位的值,例如 31536000 便是指以后的一年)
图片 1

4 链接

nginx 的 Http 尾部模块(HttpHeadersModule):”

发表评论

电子邮件地址不会被公开。 必填项已用*标注