这几天一直好奇，我和屈屈用的同一个博客系统，为什么他的博客打开那么快，而我的那么慢？直到我看到屈屈两个激进的前端优化手段文章，才发现原来他做了很多工作。我结合他文章的建议，改进了我自己的博客，速度果然提升不少。

改进对比

pageSpeed insights对比

改进前：

改进后：

chrome dev tools

改进前：

改进后：

可以看出，pageSpeed insights得分明显升高；发送的网络请求增少，文件的体积也减小。

改进之处

js文件压缩和css文件合并压缩

1. js文件使用yui-compressor进行压缩。

2. css文件复制到一个文件，然后使用yui-compressor进行压缩。

能够降低传输体积，并且减少链接个数。

图片转BASE64 编码

对于一些常用的图片，例如网站的图标和小logo，可以转BASE64 编码写在CSS文件中（为什么直接写在HTML文件中，后续会解释）。

我的网站是把网站的大图标，专成BASE64写在了CSS文件中，网站的小logo放在腾讯云的COS源中，并且配有CDN加速。

压缩HTML文件

其实，对于HTML文件中，有一些标签的闭合标签可以去除，浏览器能够正确的解析，并且会补全，下面是配置文件。

#可以删除的闭合标签
remove_endtag = ["html", "body", "colgroup", "thead", "tr", "tbody", "td", "p", "dt", "dd", "li", "option", "tfoot"] 


#可以删除属性值的属性
token_only_name = ['d','','', '', '']


#可以删除的标签默认属性（空属性全部去掉）
token_def_val = { 
    'link' : { 'media' : 'screen' },
    'input' : { 'type' : 'text' },
    'form' : { 'method' : 'get' },
    'script' : { 'type' : 'text/javascript' }
}

此外，HTML文件中的换行符和制表符也可以去除，能够减少文件体积。

content = content.replace(/\n|\r|\t/g, '');

local-storage存储css和js文件

我发现屈屈的博客每次都没有发送css文件和js文件的请求，于是仔细分析了一下，发现源码中存在一个很奇怪的函数。

<script>LS.ls2html("stc_blog_css","style","v")</script>

后来，查看local-storage，发现js和css文件都存在下面，同时cookie下面也有一个v值。

清除cookie后，重新发送，文件的体积变大，查看源码，发现多了存储到local-storage代码。

流程：

• 第一次请求：调用LS.html2ls，存储css、js文件到local-storage中，并且生产cookie。
• 第二次请求：服务端发现请求cookie（说明local-storage有css、js缓存），调用nunjucks引擎，生产的html文件中不包含css和js文件。浏览器解析，通过LS.ls2html取出缓存。

一个不激进的优化方案

Nginx启用Brotli压缩，Brotli压缩效果很好。

Brotli 是 google 开发的文本压缩算法，比起gzip可能会有高达37%的提升。主流浏览器都支持br算法，建议大家升级改算法。使用算法的前提是启用了 https，因为 http 请求中 request header 里的 Accept-Encoding: gzip, deflate 是没有 br 的。

下图中，主页文件体积从13.1k压缩到4.1k，提升非常大。

参考链接：https://www.alipay.one/post/compile-nginx-on-centos