这篇文章讨论如何过度优化静态博客的加载速度。

闲的无聊,于是思考,怎样才能让zrt.io/blog加载的更快呢?

这个blog是由hexo生成,所以可以看作纯静态的一堆html。

script defer

最简单的技巧是把script标签都放到body底部,这样script加载的过程就不会阻塞页面渲染。

进阶的方法是使用script标签的async属性,能够让script标签异步加载。

但是异步加载的标签并不能保证执行顺序,比如有一个script是jquery,一个是jquery.fancybox,后面的依赖前面的,async就有可能出错,这时可以考虑用defer属性,这个属性可以让标签在页面渲染完后依次加载。

HTTP/2 PUSH

由于用的Apache2服务器配置好了HTTP/2,而HTTP/2又有Server Push这个功能,可以尝试主动推送静态文件。

一般HTTP/1.1的情况下,发现script或css需要从src加载时,这时就会又发起一个请求去下载该静态资源,然后进行页面加载,这样会和服务器通信好几个来回,在延迟较高的情况下会导致网页加载较慢。

HTTP/2的Server Push是服务器在一次请求的返回信息里不仅返回请求的页面,还返回许多其他的静态资源,相当于告诉浏览器先收着这些你会需要这些资源的。

具体推送哪些资源,可以使用Link头,Apache2会根据返回的Link头推送这些资源。

但是因为是静态博客,所以我选择通过.htaccess文件添加Link头。

1
2
3
4
5
<FilesMatch "\.html$">
Header set Link "</blog/css/pure-min.css>; rel=preload; as=style"
Header add Link "</js/s.js>; rel=preload; as=script"
Header add Link "<https://piwik.enj0.com/>; rel=preconnect"
</FilesMatch>

.htaccess像上面这样写就可以推送/js/s.js,/blog/css/pure-min.css,和提前连接piwik.enj0.com。

但是发现无论如何都不能推送font-awesome的woff字体,网上搜寻无果,大概原因是需要哪种类型(woff/woff2/ttf/svg等)的字体应该是浏览器决定而不是服务器直接push。

于是看着chrome开发者模式Network中的那个100kb的font-awesome的请求很无奈,而且这个字体是css发起的请求,会卡主页面渲染,但是我就仅仅用这个字体做了几个图标。

然后发现了font-spider这个神器。

font-spider

font-spider

这个工具可以解析你的html以及css,然后精简你的字体文件,使得字体文件的字体库只包含用到的那些字体。

不过这个工具对css的:before,:after支持的不太好,需要自己写个脚本手动处理下。

然后就得到了定制版的非常小的的font-awesome字体文件。

InstantClick

InstantClick

这是一个黑科技的库,大概是拦截所有点击链接的操作,然后通过js加载这个页面,然后再修改网页刷出来(可以看到顶部有一个蓝色的进度条)。

他支持鼠标滑到链接的时候就开始加载,真正点击链接的时候输出来网页,这时候很可能早已经加载完成了,可以做到秒开网页的效果,非常爽。

但是不兼容各大统计代码,mathjax,fancybox等等。

需要自己手动解决,添加一些刷页面要执行的js代码,可以参考 https://zrt.io/instant.js

Isso评论

评论的js是异步加载的,但是为什么这么慢。

发现isso的embed.js是一个静态文件,但是在服务器上是用python host起来的(因为isso是python写的),然后再通过Apache反代出来的。
通过配置 ProxyPass /path/to/file ! 用Apache直接host这个文件,就可以让加载速度快很多。


好了,现在速度大概满意了。

讲个笑话: