返回》

开启Brotli压缩缩小你的网页体积 让网站加载更快

Brotli是一种开源的无损压缩算法,由谷歌开发。最初是为了减少网络字体的大小,现在Brotli作为一种通用的压缩数据格式。Brotli作为gzip和Deflate的替代品,生成的文件更小,解压速度也同样快。这里搬主题介绍一下Brotli压缩标准及如何开启,让网站加载更快。一、Brotli的简单介绍Brotli最初是用来压缩WOFF2网页字体的。它是Zopfli的延续,Zopfli是谷歌开发的另一种压缩算法,与gzip、zlib和Deflate向后兼容。Zopfli和Brotli都提供了比gzip、zlib或Deflate好得多的压缩率,尽管CPU使用率高得多。随着时间的推移,Brotli放弃了向后兼容,转而采用自己的文件格式,即使用.br扩展名。Brotli的独特之处在于,它只能通过加密的连接使用。这是由于中间机构(或 “中间盒”)拦截和读取未加密的HTTP流量。当面对一个Brotli文件时,其中一些中介机构试图通过将文件的Content-Encoding头从br改为gzip来传递文件。通过将Brotli限制在HTTPS,谷歌防止了这种干扰,以允许更快地采用Brotli。二、压缩标准Brotli提供的压缩率明显高于Deflate,但代价是更高的CPU使用率。在谷歌2015年的一项研究中,Brotli的最高压缩级别比Deflate的最高级别提供了29%的压缩率。然而,Brotli在这个级别的压缩和解压速度分别比Deflate的慢97%和17%(0.5和289.5 MB/s,而15.5和347.3 MB/s)。由于其压缩速度相对较慢,公司正在使用Brotli来提前压缩文件。2017年,Dropbox将dropbox.com上的静态内容转换为Brotli,使其资产的大小平均减少了20-25%。由于内容是静态的,Dropbox可以在构建过程中预先压缩文件并直接提供给用户。三、如何使用Brotli?几个最流行的网络服务器支持Brotli,无论是本机还是使用模块。一些CDNs也提供对Brotli的支持。像gzip、zlib和Deflate一样,Brotli提供多个压缩级别。较高的级别通常在较慢的速度下提供更好的压缩率,1级是最快的,11级是最慢的。第5级被推荐为文件大小和速度之间的良好平衡,特别是对于动态压缩。ApacheApache通过mod_brotli模块支持Brotli,该模块是在2.4.26版本中添加的。要启用Brotli,请在你的虚拟主机配置中添加以下内容。# 压缩常见的基于文本的MIME类型 AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript # 跳过已经压缩的内容 SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-brotli # 设置压缩级别(默认为5) BrotliCompressionQuality 6mod_brotli在每次请求时都会对内容进行重新压缩。要提供预压缩的文件,把你的Brotli文件复制到Apache可以访问的文件夹中。然后,在你的虚拟主机配置中添加一个重写条件,用这些文件来代替它们的gzip等价物。# 如果brotli压缩的CSS文件存在,并且客户端接受brotli的话,就可以提供这些文件。 RewriteCond "%{HTTP:Accept-encoding}" "br" RewriteCond "%{REQUEST_FILENAME}.br" "-s" RewriteRule "^(.*).css" "$1.css.br" [QSA] # 如果brotli压缩的JS文件存在,并且客户端接受brotli,那么就提供这些文件。 RewriteCond "%{HTTP:Accept-encoding}" "br" RewriteCond "%{REQUEST_FILENAME}.br" "-s" RewriteRule "^(.*).js" "$1.js.br" [QSA] # 提供正确的内容类型,并防止重复压缩。 RewriteRule ".css.br$" "-" [T=text/css,E=no-brotli:1] RewriteRule ".js.br$" "-" [T=text/javascript,E=no-brotli:1] # 提供正确的编码类型。 Header append Content-Encoding br # 强制代理机构缓存brotli & # 非brotli的css/js文件分开。 Header append Vary Accept-Encoding NginxNginx通过ngx_brotli模块支持Brotli。该模块实际上由两个独立的模块组成:一个用于实时压缩,另一个用于预压缩的文件。为了使用Brotli,你必须在编译Nginx时包含该模块。brotli on; # 启用即时压缩功能。 brotli_static on; # 启用预压缩文件的服务。 brotli_types *; # 启用所有MIME类型的压缩,text/html响应总是被压缩。 brotli_comp_level 6; # 设置压缩级别(默认为6)。Microsoft IIS你可以通过开源的Brotli压缩方案插件模块在IIS中使用Brotli。使用安装脚本会自动为所有IIS站点安装和配置Brotli。你可以通过打开你的applicationHost.config文件并导航到部分来配置压缩参数。 ... ... 截至目前,唯一可配置的选项是静态和动态压缩水平。CDNs一些CDN为Brotli提供透明支持,包括KeyCDN和Akamai。然而,其他CDN不能识别Brotli编码的文件,甚至可能试图退回到gzip。当LinkedIn在2017年在他们的网站上推出Brotli时,他们发现他们所有的五个CDN都将Accept-Encoding头从Vary恢复到gzip,即使他们在提供Brotli文件时。CDNs也无法缓存内容,因为LinkedIn的内容服务器在其响应中包含Content-Encoding: br,而CDNs无法理解。为了解决这个问题,LinkedIn将他们的Brotli文件移到一个完全独立的URL上,并删除了Content-Encoding: br头。在文件被CDN缓存后,他们会在每次对客户端的响应中重新添加该头信息。虽然这是一个变通办法,但它将性能提高了2-6.5%,其中移动用户的用处最大。Browsers除了Internet Explorer 11和Opera Mini之外,大多数现代浏览器都支持Brotli。Chrome在第50版增加了支持,Firefox在第44版,Edge在第15版,Opera在第38版,而Safari在第11版。全球有84.25%的浏览器接受Brotli,而在美国有83.42%的浏览器支持它。幸运的是,不支持Brotli的浏览器将退回到其他压缩算法,只需在Accept-Encoding头中不请求Brotli即可。四、最终总结Brotli代表了新一代的数据压缩和存储。Brotli有可能将网页大小减少20%,它将导致一个更快更小的网络。你可以在官方GitHub页面上了解更多关于Brotli的信息。
THE END