035. 压缩 HTML 加速网页响应—— renatomarinho/laravel-page-speed

压缩 HTML 加速网页响应—— renatomarinho/laravel-page-speed

为了让的网站或项目访问的更快,体验更好,我们会通过各种方法,使用各种扩展包来优化代码。今天要学习的扩展包是 renatomarinho/laravel-page-speed 就是通过压缩 HTML 来加速网页的。扩展包的文档中说明,可以自动优化网站,优化压缩 35%,我们来快速安装对比一下,看看效果。

安装

$ composer require renatomarinho/laravel-page-speed

file

使用

扩展包的使用是通过一堆中间件来完成的,文档中提到了很多 中间件 不过大部分还没有实现,可以用的只有前面的这 7 个。我们添加这些中间件测试一下,注册到 web 中间件组中。

app/Http/Kernel.php

.
.
.
'web' => [
    .
    .
    .
    \RenatoMarinho\LaravelPageSpeed\Middleware\InlineCss::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class,
    \RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class,
]
.
.
.

这么多的中间件,我们总结了一下它们的作用:

中间件 描述
InlineCss 将 HTML 中的行内样式,转换为一行单独的样式放在 <head>
ElideAttributes 去除 HTML 中一些多余的属性
InsertDNSPrefetch 添加 DNS 预读取 标签
RemoveComments 删除 HTML 注释
TrimUrls 简化 URL,将 <src="http://larabbs.test"> 修改为<src="//larabbs.test">
RemoveQuotes 去除一些标签的引用,src="foobar.com" 转换成 src=foobar.com
CollapseWhitespace 去除 HTML 中多余的换行和空格

InlineCss

当我们只开启这个中间件的时候,看的会更加明显:

file
file

中间件去除了某些行内样式,用一个 class 替换,将样式合并成一行,放在 head 中,提前加载,非常有用。

ElideAttributes

只要作用就是替换一些默认的标签:

  • 去除 from 表单中的 method="get" 属性,很少会这样用;
  • <button disabled="disabled"> 转换为 <button disabled>
  • <option selected="selected">Foobar</option> 转换为 <option selected>Foobar</option>

我们的项目中没有类似的标签,有兴趣的同学可以自己试试。

InsertDNSPrefetch

file

可以看到一些关于 DNS 预读取 的标签,也就是检查 HTML 中所有的链接,告诉浏览器提前去解析这些链接的 DNS,更快的加载图片,css等资源,用户打开链接的速度也会更快,是不是很有用呢?

RemoveComments

去除所有的 HTML 注释应该很好理解:
file

file

TrimUrls

file

file

作用就是去处链接的协议部分,因为默认会使用当前 URL 的协议。

但是这时候你会发现上面 DNS 预读取的标签都消失了,我们解决一下这个 BUG,修改一下中间件的顺序,将 TrimUrls 放在 InsertDNSPrefetch 之前。

file

一起正常了,解释一下,因为这些中间件是作用于请求的响应,其实执行的顺序,是从下往上的,放在下面的会先执行,TrimUrls 去除了协议,InsertDNSPrefetch 中使用正则匹配就会出问题了。

RemoveQuotes

file

file

中间件会去除一些标签的引号,会作用在下面这些标签:

  • src
  • width
  • height
  • name
  • charset
  • align
  • border
  • crossorigin
  • type

CollapseWhitespace

file

去除了换行以及空格,最终我们将 HTML 优化为上面这样。

对比效率

添加中间件前:
file

添加后:
file

由 22.1 kb 减小到 18.8 kb。

代码版本控制

$ git add -A 
$ git commit -m 'renatomarinho/laravel-page-speed'

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:2