本博客优化点总结

Web Design Feb 18, 2017

文章修订记录

  • 2021.01.05 - 更新部分内容
  • 2017.02.18 - 初稿完成

储存模块

自己写了一个可以上传图片到 upyun 的插件,pupboss/ghost-upyun-store

已经改用七牛云。

链接优化

在文章内超链接的前面加上小图标,详细功能参考下面列表:

优化文章内链接

外部链接使用新 tab 打开。用 DOM 选择器遍历一下整个文档即可。

$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

// 或者

var links = document.links;
for (var i = 0; i < links.length; i += 1) {
  if (links[i].hostname && links[i].hostname != window.location.hostname) {
    links[i].target = '_blank';
  }
}

字体优化

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

拆分大的 js

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

实际上是因为 Nginx 错误配置,导致缓存区无权限读写 - https://twitter.com/isjetl/status/1350725012550868995

精简 FontAwesome

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

干脆自己造 icon 了,还方便前文说的网站小图标。某些去广告插件会屏蔽 social icon,自己造 icon 还有个好处就是可以避免这种情况。

Fanboy's Social Blocking List 这个规则简直丧心病狂,icon-github 这种 icon 也会被屏蔽掉。更要命的是在某些情况下,这个规则是默认加载到 AdBlock 的 – https://twitter.com/isjetl/status/1346393859580784641

加入了 ToC

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

Archive 功能

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

Disqus

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

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

改用 Valine 方案,因为不需要后端,又能满足需求。

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。Nginx 默认已经支持 HTTP/2。

HSTS & OCSP Stapling

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

HSTS Preloading

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

Tags

Jie Li

🚘 On-road / 📉 US Stock / 💻 Full Stack Developer / 🎓 Grad Student / ®️ ENTJ