Table of Content

链接优化

在文章内超链接的前面加上小图标,创意来自于罗磊的独立博客

字体优化

  • 使用 bramstein/fontfaceobserver 来管理外部字体的加载
  • 使用 jrnewell/goog-webfont-dl 把谷歌字体下载到本地,虽然谷歌字体能访问了,根据测试,移动网络还是连不通,为了妥协,还是将字体放到本地吧
  • 使用尽可能少的 font-family,减少 CSS 下载时间
  • 加入一个标识符,如果 web 字体下载成功,就用 web 字体,如果没有,就调用系统内置字体

拆分大的 js

似乎很多浏览器都支持同时下载多个 js 文件,单文件太大的话可以考虑拆开,另外,之前服务器设置的 gzip 级别是 6,经常出现 js css 下载不下来的情况,单个文件也就不到 100kb,可能是阿里云处理器太烂了,后来降到 2,目前没什么问题。

精简 FontAwesome

这个家伙的 CSS,居然有 60kb,大部分 icon 是用不上的,手动处理一下就行,不算太多,没用脚本处理。

加入了 ToC

使用的是 idiotWu/jQuery-TOC 这个插件。

Archive 功能

无耻的移植了xiaoluoboding/ghost-theme-kaldorei的创意。

代码高亮

使用的是 highlight.js,Prism 用起来不太舒服。

Disqus

本来在首页可以显示评论数的,但是由于 Disqus 被墙,count.js 没法加载,已经用了 async,不知道什么原因,居然会阻塞页面渲染,只有超时失败之后才渲染出文字。

现在已经解决,具体方案请看 我是如何处理外部资源引用的

Google Analytics

最开始统计是放到服务器端的,GA 配合 Nginx,因为阿里云和 Google Analytics 还是很畅通的,但是问题就是导致统计的信息不全,最后还是放到了网页上,牺牲了一定的加载速度。

图片放到 CDN

我使用的是又拍云的 CDN,性能还不错,挑不出毛病,价格也合理。

图片压缩

ImageOptim,最强大的压缩软件,没有之一。又拍云的压缩功能损失略大,反正我不能接收,效果不如这个。手动压缩后再上传 CDN,虽然体验一般,效果还是不错的。

图片 Lazy Load

tuupola/jquery_lazyload 使用了这个插件,实现图片的懒加载,改进用户体验。

HTTPS & HTTP/2

  • Let's Encrypt 的证书,自动更新
  • Nginx 1.10.3 使用的是 dotdeb 编译的 Nginx,编译时加入了新版的 openssl,可以支持 HTTP/2

HSTS & OCSP Stapling

这就属于 Nginx 的配置范畴了,具体可以看 Nginx 配置上更安全的 SSL & ECC 证书 & Chacha20 & Certificate Transparency

HSTS Preloading

可以在这个网站上面提交你的网址 HSTS Preload List Submission,最后会加入到 Chrome 的 Preloading 列表,实现直接访问 HTTPS,而不是从 HTTP 跳转,可以有效预防劫持。