入门系列之在Nginx配置Gzip
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~
简介
网站加载的速度取决于浏览器必须下载的所有文件的大小。减少要传输的文件的大小可以使网站不仅加载更快,而且对于那些宽带是按量计费的人来说也更友好。
gzip是一种流行的数据压缩程序。您可以使用gzip压缩Nginx实时文件。这些文件在检索时由支持它的浏览器解压缩,好处是web服务器和浏览器之间传输的数据量更小,速度更快。
gzip不一定适用于所有文件的压缩。例如,文本文件压缩得非常好,通常会缩小两倍以上。另一方面,诸如JPEG或PNG文件之类的图像已经按其性质进行压缩,使用gzip压缩很难有好的压缩效果或者甚至没有效果。压缩文件会占用服务器资源,因此最好只压缩那些压缩效果好的文件。
在本指南中,我们将讨论如何配置安装在Ubuntu 16.04服务器上的Nginx,以利用gzip压缩,来减少发送给网站访问者的文件的大小。
必备条件
要学习本教程,您需要:
- 一个已安装Nginx的Ubuntu 16.04服务器,没有服务器的同学可以在这个页面购买。 关于Nginx搭建,可以参考腾讯云开发者实验室的这个教程:https://cloud.tencent.com/developer/labs/lab/10003
第一步、创建测试文件
这一步中,我们将在默认的Nginx目录中创建几个测试文件来进行测试gzip的压缩效果。
Nginx不会分析文件内容,他只分析文件后缀,所以,它只是查找文件扩展名以确定其MIME类型,这样nginx就会对不同的文件作出不同的压缩处理。
因为只是测试,所以测试文件的内容无关紧要。通过适当的更改文件名,我们可以欺骗Nginx,让Nginx认为这个文件是图像或者是js脚本。
在我们的配置中,Nginx不会压缩非常小的文件,因此我们将创建大小恰好为1KB的测试文件。这将让我们验证Nginx是否使用压缩,压缩一种类型的文件而不是其他类型的文件。
使用创建truncate在默认Nginx目录中命名的1 KB文件test.html。扩展名表示它是一个HTML页面。
sudo truncate -s 1k /var/www/html/test.html
让我们以相同的方式创建一些测试文件:一个jpg图像文件,一个css样式表和一个jsJavaScript文件。
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
下一步是检查NGIX如何对刚刚创建的文件进行压缩。
第二步、检查默认行为
让我们检查名为test.html的HTML文件是否被压缩。该命令从我们的Nginx服务器请求一个文件,并指定使用HTTP头(Accept-Encoding: gzip)来查找gzip压缩的内容。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
作为响应,您应该看到几个HTTP响应标头:
Nginx响应头
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:04:12 GMT
Content-Type: text/html
Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT
Connection: keep-alive
Content-Encoding: gzip
在最后一行中,您可以看到Content-Encoding: gzip。这告诉我们gzip压缩已用于发送此文件。这是因为在Ubuntu 16.04上,Nginx的 gzip在安装后使用默认设置自动启用了压缩。
但是,默认情况下,Nginx仅压缩HTML文件。新安装中的每个其他文件都将以未压缩的形式提供。要验证这一点,您可以请求以test.jpg相同方式命名的测试图像。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
结果应该与以前略有不同:
Nginx响应头
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:10:34 GMT
Content-Type: image/jpeg
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT
Connection: keep-alive
ETag: "569e973e-0"
Accept-Ranges: bytes
Content-Encoding: gzip没有输出,这意味着文件是在没有压缩的情况下提供。
您可以使用测试CSS样式表重复测试。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
再一次,输出中没有提到压缩。
CSS文件的Nginx响应头
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:20:33 GMT
Content-Type: text/css
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT
Connection: keep-alive
ETag: "569e9a91-0"
Accept-Ranges: bytes
下一步是将Nginx配置支持其他类型文件的压缩。
第三步、配置Nginx的gzip设置
要更改Nginx的 gzip配置,请使用nano或者其他您喜欢的编辑器,来打开的Nginx主要配置文件。
sudo nano /etc/nginx/nginx.conf
找到gzip设置部分,如下所示:
. . .
##
# `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;
. . .
您可以看到默认情况下,指令gzip启用了压缩gzip on,但使用#注释符号注释了几个其他设置。我们将对此部分进行一些更改:
- 通过取消注释所有注释行来启用其他设置(就是删除
#) - 添加
gzip_min_length 256;指令,告诉Nginx不要压缩小于256字节的文件。这是非常小的文件,可以不用压缩 gzip_types是表示压缩的文件类型,还可以添加web字体格式、ioc图标和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 text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
. . .
保存并关闭文件以退出。
要启用新配置,请重新加载Nginx。
sudo systemctl reload nginx
下一步是检查配置的更改是否按预期工作。
第四步、验证新配置
我们可以像在第2步中那样测试它,方法是使用curl每个测试文件并检查Content-Encoding: gzip是否有输出。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
curl -H "Accept-Encoding: gzip" -I http://localhost/test.js
现在,只有test.jpg图像文件才能保持未压缩状态。在所有其他示例中,您应该能够Content-Encoding: gzip在输出中找到标头。
如果是这种情况,您已gzip成功在Nginx中配置了压缩!
结论
更改Nginx配置来使用gzip压缩,是很容易的一件事,而且能带来不错的提,。不仅带宽有限的访问者会更快地收到该网站,而且Google也会对网站加载速度感到满意。作为现代网络和使用的重要组成部分,网站的加载速度越来越受到关注,这gzip是改进它的一大步。
参考文献:《How To Add the gzip Module to Nginx on Ubuntu 16.04》
问答
相关阅读
此文已由作者授权腾讯云+社区发布,原文链接:https://cloud.tencent.com/developer/article/1158755?fromSource=waitui
欢迎大家前往腾讯云+社区或关注云加社区微信公众号(QcloudCommunity),第一时间获取更多海量技术实践干货哦~
海量技术实践经验,尽在云加社区!
入门系列之在Nginx配置Gzip的更多相关文章
- Nginx配置gzip.md
参考 入门系列之在Nginx配置Gzip gzip是一种流行的数据压缩程序.您可以使用gzip压缩Nginx实时文件.这些文件在检索时由支持它的浏览器解压缩,好处是web服务器和浏览器之间传输的数据量 ...
- Nginx配置GZIP
记录一次解决网站加载慢的问题 一. nginx配置 gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;g ...
- Jenkins 入门系列--Jenkins 的安装配置
写的我想吐血,累死了. 网页看着不爽的,自己去下载PDF.有问题请留言! Jenkins入门系列之--03PDF文档下载 第二章 Jenkins安装与配置 2 Jenkins安装 在最简单的情况下,J ...
- Nginx 配置 Gzip 压缩
打开配置文件 /etc/nginx/nginx.conf,取消掉以下的注释项: #gzip on; 取消后: gzip on; 在此配置后加上以下内容: gzip on; gzip_vary on; ...
- Web网站配置Gzip,压缩js css文件
启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...
- Nginx启用Gzip压缩js无效的原因
Nginx启用gzip很简单,只需要设置一下配置文件即可完成,可以参考文章Nginx如何配置Gzip压缩功能.不过,在群里常有人提到,他们的网站Gzip压缩虽然成功了,但检测到JS仍然没有压缩成功,这 ...
- nginx之gzip压缩
nginx的gizp压缩 为了使网站节省带宽和加快访问速度,在服务器方面的一个优化的就是使用nginx提供的gzip压缩. 一.使用压缩原理: 1.当用户使用浏览器访问网站时,就是在发送一个http请 ...
- nginx之gzip压缩提升网站速度
目录: 为啥使用gzip压缩 nginx使用gzip gzip的常用配置参数 nginx配置gzip 注意 为啥使用gzip压缩 开启nginx的gzip压缩,网页中的js,css等静态资源的大小会大 ...
- nginx的gzip压缩
随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术.经过gzi ...
随机推荐
- 一个自定义MVP .net框架 AngelFrame
摘要:本篇是本人在完成.net平台下一个项目时,对于MVP框架引发的一些思考,以及开发了一个小型的配置型框架,名字叫作AngelFrame.这个项目属于前端桌面管理系统的一部分,最终要集成进去. 关键 ...
- WCF服务通信测试
知识需要反复咀嚼,常读常新,简单的WCF通信测试:basicHttpBinding(基本通信)\netTcpBinding(双工通信)\netMsmqBinding(消息队列),简单的测试Demo.简 ...
- SELinux导致无法访问外网,PHP连接MySQL异常Can't connect to MySQL server、redis程序访问提示Redis server went away的解决方法
今天上班遇到的问题,新配的Linux服务器,php.Apache和一系列扩展插件装好后,在本地好好的程序移上去就一直抱数据库连接错误,而用sql命令却能连接上去, 做了一个简单的判断数据库连接页面还是 ...
- 菜鸟的Xamarin.Forms前行之路——windows下VS运行ios模拟器调试
在Xamarin.Forms项目中,运行安卓模拟器是很方便的,但是想要运行IOS模拟器,相对而言是困难一点. 在参考一些资料后,发现很多是与Xamarin.studio有关的方法,尝试了许久没有成功. ...
- 纸壳CMS(ZKEACMS)体验升级,快速创建页面,直接在页面中修改内容
关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...
- WPF 修改dev GridControl行背景色
<dxg:TableView.RowStyle> <Style TargetType="dxg:RowControl" > <Style.Trigge ...
- 【QTP专题】05_参数化之Excel
QTP使用外部Excel实现参数化主要有以下两种方式 导入到DataTable中 Syntax:DataTable.ImportSheet(FileName, SheetSource, SheetDe ...
- css3动画(animation)效果3-正方体合成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js 一些知识点
vue.js 也是试图层的运用方法,跟react的方法类似,不过也有许多的不同地方: 1.vue.js 对于数据也是用{{ }} 进行数据更新: 2.vue.js 使用 v-html 指令用于输出 h ...
- 6,synchronized, lock 区别
参考文档 http://zzhonghe.iteye.com/blog/826162 http://houlinyan.iteye.com/blog/1112535 1,ReentrantLock 拥 ...