如何使用 GZIP 来优化你的网站

时间:2021-11-26 来源:未知网络 作者:996建站网

如果你想节省带宽提高网站速度,压缩是一种简单有效的方法。当我打算提高 JavaScript 的传输速率来开启 GZIP 压缩的时候,因为有旧版本浏览器的存在(IE6)我犹豫了。

然而在二十一世纪,我们大部分的流量来自于浏览器,坦白的讲,大部分的用户都是很懂技术的。我们不想让任何一个人在访问网站的时候遇到卡顿,哪怕是他在用 IE4.0 和 Windows 95。

谷歌和雅虎都开启了 GZIP 压缩。一个现代的浏览器要想不仅享受到现代网络信息还要享受到现代互联网的速度,就必须开启 GZIP 压缩。接下来将介绍如何使用 GZIP。

我们为什么要开启 GZIP 压缩

在此之前,我有必要解释一下什么是编码。

当你在互联网上想请求一个文件,比如 yahoo.com/index.html ,你的浏览器会和服务器有一个会话,大概如下图所示:

如何使用 GZIP 来优化你的网站插图

  1. 浏览器:嘿,给我来一个 index.html 文件。
  2. 服务器:好的,让我去找找它是不是在~
  3. 服务器:找到它了,我会返回一个成功的状态码(200 ok),我正在发送文件……
  4. 浏览器:100KB? 我滴天……等啊……等啊,好的,下载下来了。

当然,实际的请求头和协议会更加正规一点。

但是,它生效了,我拿到了 index.html 文件。

现在问题在哪呢?

好吧,这系统是正常的,但是太低效了,坦白讲 100KB 是一大段的文字,HTML 是冗余的,每一个 <html><table><div>都有一个几乎相同的闭合标签。虽然通篇文字都有重复,但是只要你砍掉任何的内容,HTML(以及它的同胞 XML)都不会正常显示。

当文件太大的时候有什么好办法呢,就是 GZIP 压缩它。

如果我们传输一个替代原始大文件的 ZIP 的压缩文件给浏览器,就会节省带宽和下载时间。

当浏览器可以下载 ZIP 文件,解压,并且渲染给用户,下载很快,页面加载也很快,用户心情就会很好。

这个浏览器–服务器的会话大概是这样的:

如何使用 GZIP 来优化你的网站插图

  1. 浏览器:嘿,给我来一个 index.html,如果可以,给我来一个压缩版的。
  2. 服务器:容我找找……好,满足你,如果找到了给你压缩以下,GZIP 格式的哦。
  3. 服务器:Yep,找到了,正在压缩,马上传给你。
  4. 浏览器:太棒了,只有 10KB,我来解压,并且渲染给用户。

情况很简单:文件越小,下载更快,用户感受更好。

雅虎主页的 HTML 部分通过压缩从 101KB 直接压到了 15KB:

如何使用 GZIP 来优化你的网站插图

残(淡)酷(定)的现实

变化的部分在于浏览器和服务器,它成功的发送过去一个压缩文件。对于 GZIP 压缩的要点有两点:

  • 浏览器发送一个请求头,告诉服务器接受压缩版本的文件(GZIP 和 Deflate 是两种压缩算法)Accept-Encoding: GZIP, Deflate
  • 如果文件压缩了,服务器返回一个头信息:Content-Encoding: GZIP

如果服务器没有返回 Content-Encoding 的头信息,意味着这文件是没压缩的(浏览器可以直接解析的)。请求头 Accept-Encoding 只是浏览器的一个请求,而不是命令。如果服务器不返回压缩文件,浏览器就不得不处理那庞大的源文件。

服务器设置

“好消息”是我们没办法控制浏览器,他发 “Accept-encoding: GZIP, Deflat” 或者不发,请求头就在那里,不增不减。

我们需要做的只是给服务器配置,让它返回压缩版本,如果浏览器控制,我们可以为每一个人节省带宽。

对于 IIS 服务器,启动压缩在 “设置” 里。

如果你像我一样用 NodeJS 来搭建服务器,那你中奖了,NodeJS 开启 GZIP 非常的简单,只需增加两行代码就可以搞定:

const express = require('express');
const app = express();
 
//express框架,前边肯定都是必要的,也就是只需安装compression组件,然后添加一下两句代码就好
const compression = require('compression');
app.use(compression());
 

如何使用 GZIP 来优化你的网站插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序