** 温馨提示：这篇文章已经过时 **
这篇文章讨论如何过度优化静态博客的加载速度。
闲的无聊，于是思考，怎样才能让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头。
<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
这个工具可以解析你的html以及css，然后精简你的字体文件，使得字体文件的字体库只包含用到的那些字体。
不过这个工具对css的:before，:after支持的不太好，需要自己写个脚本手动处理下。
然后就得到了定制版的非常小的的font-awesome字体文件。
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这个文件，就可以让加载速度快很多。
好了，现在速度大概满意了。