Nginx开启Gzip压缩提高页面加载速度

本文转自http://www.veryhuo.com/a/view/51706.html,如有侵权,请及时联系转载人删除!

在实际运维中,为了提高web页面的访问加载速度,一般会把静态资源(比如js、css、img等)在服务器进行压缩再传输到客户浏览器,主要配置步骤如下:

环境:Centos

1、Vim打开Nginx配置文件

vim /etc/nginx/nginx.conf

2、找到如下一段,进行修改

gzip on; // 开启Gzip
gzip_min_length 1k; // 不压缩临界值,大于1K的才压缩,一般不用改
gzip_buffers 4 16k; // buffer,就是,嗯,算了不解释了,不用改
#gzip_http_version 1.0; // 用了反向代理的话,末端通信是HTTP/1.0,有需求的应该也不用看我这科普文了;有这句的话注释了就行了,默认是HTTP/1.1
gzip_comp_level 2; // 压缩级别,1-10,数字越大压缩的越好,时间也越长!
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png; // 进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式就行了
gzip_vary off; // 跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧
gzip_disable "MSIE [1-6]\."; // IE6对Gzip不怎么友好,不给它Gzip了

3、:wq保存退出,重新加载Nginx

nginx -s reload

4、用curl测试Gzip是否成功开启

curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/"

HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:13:09 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
X-Powered-By: PHP/5.2.17p1
X-Pingback: http://www.slyar.com/blog/xmlrpc.php
Content-Encoding: gzip

页面成功压缩

curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/plugins/photonic/include/css/photonic.css"

HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:21:25 GMT
Content-Type: text/css
Last-Modified: Sun, 26 Aug 2012 15:17:07 GMT
Connection: keep-alive
Expires: Mon, 27 Aug 2012 06:21:25 GMT
Cache-Control: max-age=43200
Content-Encoding: gzip

css文件成功压缩

curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-includes/js/jquery/jquery.js"

HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:21:38 GMT
Content-Type: application/x-javascript
Last-Modified: Thu, 12 Jul 2012 17:42:45 GMT
Connection: keep-alive
Expires: Mon, 27 Aug 2012 06:21:38 GMT
Cache-Control: max-age=43200
Content-Encoding: gzip

js文件成功压缩

curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/uploads/2012/08/2012-08-23_203542.png"

HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:22:45 GMT
Content-Type: image/png
Last-Modified: Thu, 23 Aug 2012 13:50:53 GMT
Connection: keep-alive
Expires: Tue, 25 Sep 2012 18:22:45 GMT
Cache-Control: max-age=2592000
Content-Encoding: gzip

图片成功压缩

时间: 2024-10-16 20:31:37

Nginx开启Gzip压缩提高页面加载速度的相关文章

提高页面加载速度的方法

提高页面加载速度的方法有如下几个方面:(一)减少HTTP强求(1)增加并行连接(2)合并资源文件:将多个小的css还有javascript文件进行合并成一个大文件,这样页面在加载页面的相关资源的时候,就会减少HTTP的请求,从而加快页面的加载速度(3)使用CSS sprite:将整个网站上所有共用的小图片都合成一张图片,然后使用background-position进行控制所需要的图片位置.原理是虽然每次只是使用了一张小图片,但是整个图片都已经被保存到了缓存中,这样每次使用就不需要再去请求图片

jquery实现图片预加载提高页面加载速度

使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图片的加载速度,这的确是个好方法,不过有时候我们也可以从前台找一些解决的 方法.下面我来介绍一种在实际应用中经常会使用到的js预加载的方法. 首先在输出图片的时候我们做一些处理 处理完html我们开始写js了,在这里我使用了jquery的类库

Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

提高页面加载速度

在做项目的是时候;有时候为了方便把平时需要的插件 css js都写在了layouts页面中,这样其他页面中就不需要再写一次了, 但是 但是 但是 这样不需要这些文件的页面也需要花时间去加载 有的特别耗费时间,这样就拖慢了页面的加载速度 所以最好的是把最基本的,每个页面都需要的css js写在layouts中, 然后其他的各自所需的css js写在各自的页面中, 这样就很耗费时间 layouts页面 <!DOCTYPE html> <html lang="zh-CN"&

Nginx开启Gzip压缩大幅提高页面加载速度

[[email protected] conf]# vi nginx.conf gzip on;#开启GZIP gzip_min_length 1k; #不压缩临界值,大于1K的才压缩,一般不用改 gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2;#压缩级别,1-10,数字越大压缩的越好,时间也越长 #gzip_types text/plain application/x-javascript text/css appli

基于Vue的SPA如何优化页面加载速度

常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使得入口文件index.js变小,开启懒加载之后,js是这样请求加载的: 2. 静态文件本地缓存有两种方式 HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头,很多文章讲的比较详细,推荐:https://www.cnblogs.com/chinajava/p/5

nginx缓存静态资源,只需几个配置提升10倍页面加载速度

nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求: 1.png 可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小,如果没有对这些静态资源压缩的话,那么静态资源加载应该会占用这个页面展示99%以上的时间.听起来是不是已经被吓到了,但是数据已经摆在这里了,这可不是危言耸听. 然后再看看使用了nginx缓存之后的效果图: 2.png 看到没有,朋友们

提高网站页面加载速度的方法

我们在访问一些网站时,总是感觉页面加载的速度不够快,这是什么原因导致的呢?作为网站的开发者又能做哪些优化,来提高页面的加载速度呢? 工具/原料 网页开发工具 方法/步骤 1 优化图像.图像能吸引访客的注意,但是每一张图片都需要从服务器下载到访客的电脑中,这无疑增加了页面的加载时间.因此,必须优化图像.优化方法包括适当减小图片尺寸,降低图片的颜色深度. 2 去掉不必要的插件.一些免费的插件能够增强网页的功能,但是如果添加了过多的插件,就会增加服务器的负担和页面加载时间.在构建页面时,去掉不必要的插