# 小小的公告

本 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 可以通过简单的方法实现:

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

$CSS 代表 CSS 字体资源链接哟。

media="print" 指「在 print 类型时应用」。onload="this.media='all' 指「在加载完毕后,在全平台应用」。

# 加入 preload & preconnect

<link rel="preload"
      as="style"
      href="$CSS" />
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

# 加入 & display=swap

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

# 合体吧!

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

<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'" />

把它们全部丢到 head 去吧!

# 结果

PageSpeed Insights 表示很满意!

# 碎碎念

最近...... 真的好累啊。

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

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

也根本没办法忘掉呐。

我只是想要有人陪......

参考资料:

https://csswizardry.com/2020/05/the-fastest-google-fonts/

https://www.filamentgroup.com/lab/load-css-simpler/

更新于 阅读次数

富婆/金主,饿饿,饭饭qwq

游若葉 支付宝

支付宝

游若葉 alipayhk

alipayhk