白话科普系列——网站靠什么提升加载速度?

百家 作者:又拍云 2020-12-07 20:40:30

随着生活节奏的不断加快,时间变得极其宝贵,等待页面加载的时间也随之缩短。这样一来如何留住客户变成了一项重要的考验。而减少页面加载等待时间,加快加载速度,就成了提高用户参与度S,提升业务可靠性的有效策略。

根据 Google 的一项研究,有 40% 的人放弃了某网站,是因为该网站的加载时间超过 3 秒,而页面加载时间增加1 秒,转化就相应减少了 7%。可见,互联网中的每一秒都至关重要。

那么如何提升网站速度呢?可以通过网页“压缩”也就减少网页体积来实现。至于要如何才能压缩网站,我们需要先了解两个算法, Gzip 和 Brotli 压缩算法。



Gzip 压缩算法


Gzip 基于 DEFLATE 算法,它是 LZ77 和霍夫曼编码的组合,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 Gzip 编码是一种用来改进 Web 应用程序性能的技术,它要求 Web 服务器和客户端(浏览器)必须共同支持 Gzip。而当下主流的浏览器,包括 IE6、IE7、IE8、IE9、FireFox、Google Chrome、Opera 等都已经开始支持 Gzip 压缩。可见 Gzip 的使用已经成为了互联网发展的必然趋势。

作为 Internet 上使用非常普遍的一种数据压缩格式,Gzip 对一般纯文本内容可压缩到原大小的 40%,这大大减少了网站文件中重复代码和空白的数量。它还可以提供 9 个压缩级别,可以方便使用者微调压缩量和压缩时间。

在用于提高 Web 应用程序的性能这一点上,Gzip 压缩一直是最受欢迎的。直到另一种压缩算法 Brotli 的出现,它成为了 Gzip 最大的竞争对手。



Brotli 压缩算法


Brotli 是 Google 在 2015 年 9 月推出的一种压缩算法,Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此与其他压缩算法相比,Brotli 有着更高的压缩效率。它通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩。

根据 Google 发布的研究报告,Brotli 压缩算法具有多个特点,最典型的是以下 3 个:

  • 针对常见的 Web 资源内容,Brotli 的性能相比 Gzip 提高了 17-25%;

  • 当 Brotli 压缩级别为 1 时,压缩率比 Gzip 压缩等级为 9(最高)时还要高;

  • 在处理不同 HTML 文档时,Brotli 依然能够提供非常高的压缩率

依靠着自身卓越的压缩性能,Brotli 自推出后就迅速开始占领压缩市场,从下图可以看到,除了 IE 和 Opera Mini 之外,几乎所有的主流浏览器都已支持 Brotli 算法。

△ Brotli 浏览器支持情况

在压缩效率上 Brotli 毫无疑问的遥遥领先。那么我们是否可以无脑盲选 Brotli 呢,Gzip 是不是应该就此退出市场?



Brotli 比 Gzip 更好吗?


显然与 Gzip 相比,Brotli 压缩在研究中显示出了不俗的成果。,例如 Gzip 有 9 个压缩级别,而 Brotli 有 11 个。此外,Brotli 还使用一个预定义的 120 千字节字典,该字典包含超过 13000 个常用单词、短语和其他子字符串。这些因素都有效提高了 Brotli 的压缩率。根据 Certsimple 的研究,用 Brotli 压缩的 Javascript 文件比 Gzip 小 14%,HTML 文件比 Gzip 小 21%,CSS 文件比 Gzip 小 17%。

无论从哪方面看 Gzip 都已经被 Brotli 碾压,两者之间毫无对比的可能性,我们似乎也完全不需要考虑选择左边或者右边。

注意:图像不应该被 Gzip 或 Brotli 压缩,因为它们已经被压缩,再次压缩将使其尺寸变大。

诚然 Brotli 在压缩程度上有着绝对的优势,但是这些优势是用其他代价换来的。Brotli 压缩操作所花费的时间会随着压缩级别的增加而增加。简而言之,就是 Brotli 需要更多的计算能力,而大家都知道计算能力需求的增加代表着设备和软件设施的成本上涨。另外 Brotli 要求浏览器必须支持与 HTTPS 一起使用,这也是他相比在浏览器支持量上比 Gzip 少的原因。毕竟 Gzip 同时支持 HTTP 和 HTTPS。

一边是压缩效果奇佳但是可能会因为浏览器的不支持而导致用户无法访问网站,另一边则是浏览器支持但是压缩效果降低用户加载网页时间依然略长,一个两难的抉择出现在了网站运营者面前。有机灵的小伙伴可能会说:“也不是所有用户都能使用 HTTPS,但是不是有功能判断么?难道压缩算法就不能整一个这种自动判断?让能使用 Brotli 的使用 Brotli,不能的使用 Gzip。”

bingo!华生,你发现了盲点。让我们愉快地掏出又拍云一站式减流量秘籍之智能压缩!



又拍云秘籍——智能压缩


又拍云智能压缩功能旨在为网站减少了流量开支,减少资源加载时间,让终端用户的体验更上一层楼。它同时支持 Gzip 和 Brotli 压缩算法,可同时开启,也可开启其中一种。开启该功能,可对静态文件类型进行压缩,有效减少用户传输内容大小,加速分发效果。为了配置的灵活性,“智能压缩”功能支持压缩等级(1 到 5)的设置。两种压缩算法的压缩等级默认为 1,等级越高,压缩率越大。考虑到压缩等级越高,压缩速度会降低,实际生产环境,建议压缩等级控制在 3 以内,具体请以线上环境实测为准进行自主设置。

当用户在后台同时开启 Gzip 和 Brotli 压缩时,后台会自行判断浏览器是否支持 Brotli 来选择进行哪种压缩。

那么这个浏览器自行判断是怎么操作的呢?

其实支持 Brotli 的浏览器会在接受编码请求标头中发送“ br”和“ gzip”(例如:Accept-Encoding: gzip, deflate, br)。如果 Web 服务器上启用了 Brotli,则用户将获取到 Brotli 压缩格式的响应。

这样就能有效避免选择 A 还是选择 B 的烦恼,你可以两者都拥有,在提升用户浏览体验的同时降低你的 CDN 流量。

当然对于“如果浏览器同时支持 Gzip 和 Brotli 会不会出现两次压缩,或者选择错误”的问题,又拍云也考虑到了哦。当客户端同时支持 Gzip 和 Brotli 算法的情况下,Brotli 的优先级高于 Gzip。

这么方便的功能,只需要登陆 CDN 控制台,进入 「性能优化」配置页面,找到「智能压缩」配置项,点击【管理】按钮,进入如下配置界面:

配置好压缩等级就可以愉快使用了。

△ 开启智能压缩前

△ 开启智能压缩后

除了智能压缩,又拍云还提供了一系列“省带宽,压成本”的绝招,包括 Webp 自适应、H.265 自适应、码率适配限速、窄带高清 等等,从编码技术、网络架构等角度出发,结合又拍云的产品成果,为大家节省流量,降低成本。有兴趣可以随时联系我们了解哦!


点击↓↓阅读原文↓↓了解更多


快 来 小 拍




推 荐 阅 读

 分享、点赞、在看  三连击,小拍奖金+ 5 元 

ღ( ´・ᴗ・` )

关注公众号:拾黑(shiheibook)了解更多

[广告]赞助链接:

四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

公众号 关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接