前言

Speed is all you need.

硬件层面

正如之前的网站更新记所记述的那样，我将服务器公网带宽从1Mbps升级到了2Mbps。由于我的文章通常不涉及过多的图片，所以这个带宽已经很够用了。

主题修改

我将背景图和favicon图换成了比较小的文件，从原来的1M的图片，变成了295.39KB的图片，大大降低了下载图片所需要的时间。

在这之后，我发现，在不挂梯子的情况下，disqus会占用大量的加载时间，最后报出一个超时错误。所幸，我十分轻易的找到了解决方案，来自于Sukka的博客，这里放一个用到的代码：

function loadDisqus() {
  // Disqus 安装代码
  var d = document, s = d.createElement('script');
  s.src = 'https://[你的 Disqus shortname].disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
  window.disqus_config = function () {
    this.page.url = [你的页面 URL];
    this.page.identifier = [你的页面的唯一辨识符];
  };
  // 如果你和我一样在用 DisqusJS，loadDisqus() 里就应该是 DisqusJS 的初始化代码 new DisqusJS({...})
}

// 通过检查 window 对象确认是否在浏览器中运行
var runningOnBrowser = typeof window !== "undefined";
// 通过检查 scroll 事件 API 和 User-Agent 来匹配爬虫
var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
// 检查当前浏览器是否支持 IntersectionObserver API
var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;

// 一个小 hack，将耗时任务包裹在 setTimeout(() => { }, 1) 中，可以推迟到 Event Loop 的任务队列中、等待主调用栈清空后才执行，在绝大部分浏览器中都有效
// 其实这个 hack 本来是用于优化骨架屏显示的。一些浏览器总是等 JavaScript 执行完了才开始页面渲染，导致骨架屏起不到降低 FCP 的优化效果，所以通过 hack 将耗时函数放到骨架屏渲染完成后再进行。
setTimeout(function () {
  if (!isBot && supportsIntersectionObserver) {
    // 当前环境不是爬虫、并且浏览器兼容 IntersectionObserver API
    var disqus_observer = new IntersectionObserver(function(entries) {
      // 当前视窗中已出现 Disqus 评论框所在位置
      if (entries[0].isIntersecting) {
        // 加载 Disqus
        loadDisqus();
        // 停止当前的 Observer
        disqus_observer.disconnect();
      }
    }, { threshold: [0] });
    // 设置让 Observer 观察 #disqus_thread 元素
    disqus_observer.observe(document.getElementById('disqus_thread'));
  } else {
    // 当前环境是爬虫、或当前浏览器其不兼容 IntersectionObserver API
    // 直接加载 Disqus
    loadDisqus();
  }
}, 1);

经测试，十分有效。

随后，我通过PageSpeed Insight网站检测，发现字体渲染也可以加快访问速度，于是在CSS文件中增加了：

*
    font-display: swap

虽说我肉眼看不出有什么差别，不过测试结果倒是快了一些。