本博客优化点总结

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

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.