# 小小的公告

本 Blog 部署到 Cloudflare Workers 上啦。

之后会发布详细的文章来详细地碎碎念的。

# 前情提要

自从发现并迁移到 Shoka，这个过于精致的 Hexo 主题快要让我的 F5 键烂掉了其实是 Cmd+R。
除了让网站的访问统计达到了真・所有人都是我的小号之外，过度的钟意也带来一些病态的执着。
那么漂亮的网站，我好想让它变得更棒❤️（自行想象病娇的语气）
那么，开始吧！

# Render Blocking Resources

相信大家都知道 PageSpeed Insights 叭，不知道的也快去看看。
总之这是一个能测试出你的网站哪里讨人厌的工具。
通常来说，如果你使用了 Web 字体（如 Google Font），为了渲染 HTML 元素，会从外部服务器加载 CSS 字体资源。
而这个过程正是导致出现 Render blocking resources 的原因。

因此在加载 Web 字体资源的期间，网页的文本可能是不可见的。

在 PageSpeed Insights 中显示，Web 字体资源的加载时间严重拖慢了网站性能。
并非常严肃给出了移除阻塞渲染的资源的建议。

# 所以要做什么？移除 Web 字体吗？

Hell no!
不要那么容易妥协啊 kora，少男 / 少女。
对待事情要像你的暗恋一样努力唷。
让我们康康，怎么才能够让 PageSpeed Insights 满意叭。

# Async CSS（异步加载 CSS）

非常显然，这是依靠异步加载的时候了！
将 CSS 文件设定为异步加载可以：

• 防止阻塞浏览器渲染 HTML 元素。
• 在 Web 字体加载过程中文本可见。
• 让你的 PageSpeed Insights 结果变得好看。

# preload & preconnect（预加载和预连接）

preload 是现代浏览器绝大部分支持的高优先级预加载。
就如字面意思，它可以对浏览器说明加载的优先度，确保资源可以优先加载。

preconnect 可以帮助浏览器预先连接文件源（也可以理解为预热）
考虑到一些字体文件托管在与链接文件源不同的情况，
Google 本身在 CSS 字体资源文件的 header 就有 preconnect，然而，如果通过在代码段添加第一方的 preconnect 实现预连接，可以取得更大的延迟优势。

# 加入异步加载 CSS

异步加载 CSS 可以通过简单的方法实现：

1
2
3

<link rel="stylesheet"
      href="$CSS"
      media="print" onload="this.media='all'" />

# 加入 preload & preconnect

1
2
3

<link rel="preload"
      as="style"
      href="$CSS" />

1
2
3

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

# 加入 & display=swap

在 Web 字体资源链接后加入 & display=swap，
让字体文件本身使用异步载入。

# 合体吧！

于是，我们得到了这一串代码。

1
2
3
4
5
6
7
8
9

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

# 结果

PageSpeed Insights 表示很满意！

# 碎碎念

最近… 真的好累啊。

无论是感情上的，学习上的还是家庭上的。

感觉压力无时无刻都沉重得令我难以呼吸。

也根本没办法忘掉。