Pages

Friday, 25 May 2012

用Gzip压缩内容,以提高页面载入速度

Gzip是一种压缩格式,对于文本的压缩比率是很高的。
要利用Gzip压缩,需要服务器和客户端都支持gzip压缩才行。客户端浏览器先通知服务器,它可以接受gzip压缩格式的内容,然后服务器在返回内容的时候,会指出是压缩格式的内容,然后浏览器就会在接受到内容后做解压缩的动作,然后渲染。

比如本站的某个页面,html文件本身大小是35.4K,gzip压缩后的大小是9.7K。压缩比率很大,对于下载的时间大大缩短。

在Apache服务上,如果用的是Apache1.3,那么就要用到mod_gzip模块,如果用的是Apache2.x,那么就是用的mod_deflate模块。前者几乎已经没有什么人在用了,那么就说说后者。

使用mod_deflate模块的时候,修改.htaccess文件,添加下面的代码:  AddOutputFilterByType DEFLATE text/html text/css application/javascript

从代码中可以看到,我对html文件,css文件,js文件,都进行了gzip压缩,这三种都是文本文件,压缩比例都在两到三倍间。

在使用Gzip压缩的时候,需要注意一点,就是代理服务器缓存的问题。而实际使用的时候,Apache的gzip模块会自动处理,添加一个文件头:Vary: Accept-Encoding
其实际的含义就是要求代理服务器根据是否压缩,保存不同的内容。
-------------------------------------------------------------------------

为网站程序启用gzip压缩,不需要程序的支持,可以为所有的php及html启用gzip压缩。当然,如果你使用 的是本身可以启用gzip的程序,例如discuz,wordpress等等,只需要在程序后台启用即可,就不需要这么麻烦了。如果你使用的是像 ShopEx这样的没有gzip功能的程序可以使用此方法,可以极大的提高访问速度(ShopEx最大的缺点就是速度慢).启用gzip会轻微加重服务器资源消耗,给html启用gzip,则html文件需要经过php引擎编译,会加重服务器负担。
首先给所有的php文件启用gip压缩:
在php.ini中添加下面语句
  1. output_buffering = Off
  2. output_handler =
  3. zlib.output_compression = On
复制代码
这样就可以给所有php文件进行gzip压缩了。注意的是,这样启用gzip之后需要将程序原来的gzip功能去掉,例如discuz等的gzip不要启用,否则程序会报错。
下面为html页面启用gzip压缩,我们要做的就是让apache将html文件当作php文件处理即可。在.htaccess文件中加入下面的语句即可:
  1. AddHandler x-httpd-php .html .htm
复制代码
这样就可以为html文件,htm文件启用gzip压缩了
-----------------------------------------------------

Nginx开启Gzip压缩,大幅提高页面加载速度及相关测试


wp的相册插件lightbox引入了很多js文件和css文件,页面一下子看起来非常臃肿,所以还是把Gzip打开了。

1、Vim打开Nginx配置文件
vim /usr/local/nginx/conf/nginx.conf
2、找到如下一段,进行修改
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
3、解释一下
第1行:开启Gzip
第2行:不压缩临界值,大于1K的才压缩,一般不用改
第3行:buffer,就是,嗯,算了不解释了,不用改
第4行:用了反向代理的话,末端通信是HTTP/1.0,有需求的应该也不用看我这科普文了;有这句的话注释了就行了,默认是HTTP/1.1
第5行:压缩级别,1-10,数字越大压缩的越好,时间也越长,看心情随便改吧
第6行:进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式就行了
第7行:跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧
第8行:IE6对Gzip不怎么友好,不给它Gzip了
4、:wq保存退出,重新加载Nginx
/usr/local/nginx/sbin/nginx -s reload
5、用curl测试Gzip是否成功开启
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.urdomain.com/"
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.urdomain.com/xmlrpc.php
Content-Encoding: gzip
页面成功压缩

curl -I -H "Accept-Encoding: gzip, deflate" "http://www.urdomain.com/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.urdomain.com/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.urdomain.com/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
图片成功压缩
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.urdomain.com/wp-content/plugins/wp-multicollinks/wp-multicollinks.css"
HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:23:27 GMT
Content-Type: text/css
Content-Length: 180
Last-Modified: Sat, 02 May 2009 08:46:15 GMT
Connection: keep-alive
Expires: Mon, 27 Aug 2012 06:23:27 GMT
Cache-Control: max-age=43200
Accept-Ranges: bytes
最后来个不到1K的文件,由于我的阈值是1K,所以没压缩.
------------------

通过gzip和nginx来提高网站打开速度


要知道,网站的打开速度取决于浏览器打开下载的网页文件大小。如果传输的页面内容文件减少,那你网站的打开速度一定会加快。特别是手机端的用户,打开网站速度受限于移动端网络,所以压缩网站页面内容显得至关重要。

  gzip是一种非常流行的数据压缩方式。你可以在nginx配置中开启gzip来压缩网页文件。然后,这些文件又由浏览器解压缩,文件不会受任何。但是压缩文件是会占用服务器资源,所以最好压缩那些效果比较好的文件。比如文本文件压缩效果非常好,通常会缩小两倍多。而JPG或PNG这类文件,本身就已经进行格式压缩,所以再做二次压缩,效果并不是特别明显。

  本文主要讲一下如何配置nginx来开启gzip压缩。

  环境

  ubuntu 20.04服务器

  root权限或具有sudo特权的非root用户

  一、创建测试文件

  在这一步中,我们将在默认的Nginx目录中创建几个测试文件。稍后我们将使用这些文件来检查Nginx的默认行为是否进行gzip压缩,并测试配置更改是否具有预期的效果。

  首先,创建几个测试文件,这些文件主要用来查看我们的gzip压缩效果。gzip是不会分析文件内容的,它主要通过文件扩展名来判断文件类型,如果还分析文件内容,那整个效率就会大大降低。所以我们可以创建一些图像文件、html文件和一些样式文件。

sudo truncate -s 1k /var/www/html/test.html
sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

  下一步是检查Nginx在使用我们刚创建的文件在全新安装中压缩请求的文件时的行为。

  二、命令方式查看压缩效果

  使用curl命令方式,添加标头Accept-Encoding: gzip,来查看各文件的压缩结果。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

  可以看到以下结果:

Output

HTTP/1.1 200 OK

Server: nginx/1.18.0 (Ubuntu)

Date: Tue, 09 Feb 2021 19:04:25 GMT

Content-Type: text/html

Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT

Connection: keep-alive

ETag: W/"6022dc8d-400"

Content-Encoding: gzip

  在最后一行,出现Content-Encoding: gzip字样。说明服务器正在用gzip压缩来发送文件。默认情况下,nginx仅压缩html文件。所有在这个命令中可以看到文件做了压缩处理。但其它的文件格式,并未做压缩处理。

  可以通过下面这条命令来验证我们刚才的说法。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

  再看一下结果,和之前的有所不同:

Output

HTTP/1.1 200 OK

Server: nginx/1.18.0 (Ubuntu)

Date: Tue, 09 Feb 2021 19:05:49 GMT

Content-Type: image/jpeg

Content-Length: 1024

Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT

Connection: keep-alive

ETag: "6022dc91-400"

Accept-Ranges: bytes

  输出结果中没有出现Content-Encoding: gzip,这意味着该文件并没有做任何的压缩。

  你也可以使用这个方法来测试css等样式文件。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

  结果一样,没有出现Content-Encoding: gzip

Output

HTTP/1.1 200 OK

Server: nginx/1.18.0 (Ubuntu)

Date: Tue, 09 Feb 2021 19:06:04 GMT

Content-Type: text/css

Content-Length: 1024

Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT

Connection: keep-alive

ETag: "6022dc91-400"

Accept-Ranges: bytes

  三、配置Nginx开启gzip功能

  本节主要操作相关配置,让gzip可以处理其它几种文件格式的压缩。

  你可以使用nano或vim编辑nginx的配置文件。

sudo nano /etc/nginx/nginx.conf

  找到gzip设置部分,如下所示:

  /etc/nginx/nginx.conf

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .

  因为我们用的是ubuntu 20.04。所以默认情况下,gzip是开启的。但有些设置无效,所以我们需要做一些修改:

  通过取消注释行前面的#来启用其他设置(即,删除#符号)

  添加gzip_min_length 256;参数,该参数是告诉nginx,不要去压缩小于256字节的文件,因为很小的文件没有太必要。压缩这类文件反而影响服务器效率。

  在gzip_types参数中添加其他文件类型扩展名,这些文件类型可以是Web字体,图片、XML、JSON结构化数据或SVG图片文件。

  应用这些更改之后,设置部分应如下所示:

  /etc/nginx/nginx.conf

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/svg+xml
text/css
text/javascript
text/plain
text/xml;
. . .

  保存并关闭文件以退出。要启用新配置,需要重新启动Nginx:

sudo systemctl restart nginx

  四、确保所有的配置正确

  重复之前的测试步骤,执行相应的命令请求:

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

  因为html文件,之前已经默认开启压缩,所以这个命令执行结果保持不变:

Output

HTTP/1.1 200 OK

Server: nginx/1.18.0 (Ubuntu)

Date: Tue, 09 Feb 2021 19:04:25 GMT

Content-Type: text/html

Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT

Connection: keep-alive

ETag: W/"6022dc8d-400"

Content-Encoding: gzip

  然后我们来测试一下之前未压缩的css样式表,看看结果会有什么变化:

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

  可以看到gzip正在压缩文件:

Output

HTTP/1.1 200 OK

Server: nginx/1.18.0 (Ubuntu)

Date: Tue, 09 Feb 2021 19:21:54 GMT

Content-Type: text/css

Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT

Connection: keep-alive

Vary: Accept-Encoding

ETag: W/"6022dc91-400"

Content-Encoding: gzip

  我们可以用相同的方式测试一下jpg文件:

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

  没有看到gzip压缩:

Output

HTTP/1.1 200 OK

Server: nginx/1.18.0 (Ubuntu)

Date: Tue, 09 Feb 2021 19:25:40 GMT

Content-Type: image/jpeg

Content-Length: 1024

Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT

Connection: keep-alive

ETag: "6022dc91-400"

Accept-Ranges: bytes

  因为在之前的配置中,我们并没有添加 image/jpeg。

  在这种情况下,我们已经在Nginx中成功配置了gzip。

  结论

  可以看出,gzip很容易配置,而且带来的速度提升也非常明显,搜索引擎也非常喜欢这类加载方式,如果想提高搜索引擎的排名,增加gzip是非常有必要的。