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

原文:http://www.webkaka.com/blog/archives/Nginx-set-the-expiration-time-for-js-and-css.html

配置Nginx expires缓存实现性能优化

原文:https://blog.webfsd.com/post_pei-zhinginx-expires-huan-cun-shi-xian-xing-neng-you-hua.html

网站设置Js、css等文件的过期时间,是提升网站速度的基本技巧方法之一,之前写过如何在IIS设置网页内容过期时间一文,满足了部分网友的需要,最近有网友在群里提到,他们使用的是Nginx服务器,但还不知如何设置Js、css文件过期时间,故写下此教程,以便查看。

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

首先打开配置文件/etc/nginx/nginx.conf,然后找到下面这句话:

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

设置expires这个参数即可,30d表示30天,注意后面有个分号“;”。

如果过期时间为小时,则用“h”,如“expires 1h;”表示文件缓存在1小时后过期。看看下面的范例:

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

语法解释

nginx作为web服务器,有时需要让浏览器缓存(Browser Caching) 是为了加速浏览并节约网络资源,浏览器在用户磁盘上对最近请求过的文档进行存储。
 
      nginx通过expires指令来设置浏览器的Header

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

使用本指令可以控制HTTP应答中的“Expires”和“Cache-Control”的头标,(起到控制页面缓存的作用)。

可以在time值中使用正数或负数。“Expires”头标的值将通过当前系统时间加上您设定的 time 值来获得。

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

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

-1 指定“Expires”的值为服务器当前时间;-1s,表示永远过期,即不缓存文件。

如何检测网页过期设置是否生效?

打开webkaka的网站速度诊断工具(http://pagespeed.webkaka.com/),输入你的网页地址,检测后,立即可以看到设置是否生效了。

检测网页缓存是否生效

上图看到,被检测网页的js、css文件过期时间为1天。

(转)网站速度优化技巧:Nginx设置js、css过期时间的更多相关文章

  1. DEDE网站地图优化技巧

    DEDE网站地图优化技巧-把网站地图生成在系统根目录,利于搜索引擎收录相信恨多用DEDECMS做站的朋友,为避免将data目录内的东西随便外泄,在robots中将data目录屏蔽了,但是DEDE默认的 ...

  2. Redis五种数据类型-设置key的过期时间

    1.redis命令客户端 [root@localhost bin]# ./redis-cli 127.0.0.1:6379> #是否运行着 127.0.0.1:6379> ping PON ...

  3. RabbitMQ 设置队列的过期时间

    设置队列的过期时间非常简单,在声明队列时,设置x-expires参数即可.当队列的生存周期超时后,RabbitMQ server会自动将该队列删除. 代码如下: channel.QueueDeclar ...

  4. netty系列之:一个价值上亿的网站速度优化方案

    目录 简介 本文的目标 支持多个图片服务 http2处理器 处理页面和图像 价值上亿的速度优化方案 总结 简介 其实软件界最赚钱的不是写代码的,写代码的只能叫马龙,高级点的叫做程序员,都是苦力活.那么 ...

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

    location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小 ...

  6. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  7. 详解 nginx location ~ .*\.(js|css)?$ 什么意思?

    语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...

  8. nginx配置静态文件过期时间

    1. 编辑虚拟主机配置文件/usr/local/nginx/conf/vhosts/huangzhenping.conf 说明:采用location方式 1 2 3 4 5 6 7 8 9 10  l ...

  9. thinkphp3.2设置session的过期时间

    thinkPHP3.2中session的过期时间配置是不能使用的,我们需要修改一下它的配置文件thinkPHP>common>functions.php,找到这一行: if(isset($ ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议34:为泛型参数设定约束

    建议34:为泛型参数设定约束 “约束”这个词可能会引起歧义,有些人肯能认为对泛型参数设定约束是限制参数的使用,实际情况正好相反.没有“约束”的泛型参数作用很有限,倒是“约束”让泛型参数具有了更多的行为 ...

  2. wp7启动+幻灯片效果

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Wi ...

  3. WPF MultiSelect模式下ListBox 实现多个ListBoxItem拖拽

    WPF 的ListBox不支持很多常见的用户习惯,如在Explorer中用鼠标可以选择多项Item,并且点击已经选择的Item,按住鼠标左键可以将所有已选择Item拖拽到指定的位置.本文简单的实现了这 ...

  4. WebStrom常用快捷键

    查找替换 ctrl+shift+N  通过文件名快速查找工程内的文件(必记) ctrl+shift+alt+N  通过一个字符快速查找位置(必记) ctrl+F  在文件内快速查找代码 ctrl+R  ...

  5. 【03】循序渐进学 docker:基础命令

    写在前面的话 之前谈了啥是 docker 和怎么安装 docker,这里就谈谈 docker 命令的使用,当然,这里的使用可能只是局限于 docker 的增删查改. 另外需要注意的是,为了图片的美观, ...

  6. java -jar jar包,运行报错没有主清单和无法加载主类

    jar: 包名(class 文件) META-INF(MANIFEST.MF ) .classpath 1.从eclipse直接导出的jar包: 2.修改MANIFEST.MF文件:

  7. Spring Boot多数据源

    我们在开发过程中可能需要用到多个数据源,我们有一个项目(MySQL)就是和别的项目(SQL Server)混合使用了.其中SQL Server是别的公司开发的,有些基本数据需要从他们平台进行调取,那么 ...

  8. Kylin -- Dup key found 问题

    kylin 构建 cube 时,抛出了如下的错误: org.apache.kylin.engine.mr.exception.HadoopShellException: java.lang.Runti ...

  9. 决策树--Python

    决策树 实验集数据: #coding:utf8 #关键词:决策树(desision tree).特征选择.信息增益(information gain).香农熵.熵(entropy).经验熵(H(D)) ...

  10. 优化浏览器默认scroll样式小技巧

    一个最简单的页面: <!DOCTYPE html> <html> <head> <title>优化scroll</title> <me ...