0x00 前情概要
最近我花了不少时间对我的博客进行了一些技术上的优化和改进，目的就是为了给大家提供一个更快、更流畅且更加有趣的阅读体验。今天我想跟大家分享一下这些变化背后的故事。
0x01 卡顿的页面
JavaScript 造成页面卡顿？砍！
提起网站的速度，我们都知道一个快速响应的网站能显著改善用户体验。为了确保我的博客能够提供最佳的浏览体验，通过 Google 的 PageSpeed Insights 工具，我们可以对站点进行全面分析，可以发现站点会加载一些第三方类库，为了我们的加载速度，我们可以：
- 砍掉这部分功能
- 使用工具或者手动精简第三方库大小，只保留需要的方法
- 自己写一个 / 整合进现有第一方库
在这里我选择第一个方案，直接砍掉无伤大雅的功能（反正大部分访客也用不到）。
字体过大？使用懒加载
在网站设计中，当所选字体文件过大时，它们会显著增加页面的加载时间，尤其是在移动网络环境下。更糟糕的是，大字体文件可能导致页面内容在字体加载完成前后的突然抖动，也就是我们常说的累积布局偏移（Cumulative Layout Shift, CLS）。为了解决这个问题，我选择了 Cloudflare Fonts 作为解决方案。
简单来说，Cloudflare Fonts 通过重写网页的 HTML 来工作。它删除了 Google Fonts 链接并将其替换为内联 CSS，这样可确保字体通过 Cloudflare 的来提供，从而优化性能并保护了用户的隐私。Cloudflare Fonts 支持的浏览器版本我列在下方，供大家参考。
Edge 16+
Safari 10+
Firefox 44+
Opera 22+
IE 9+
Chrome for Android 115+
Safari on iOS 10+
Samsung Internet 5+
如果你想了解更多，推荐你去 Cloudflare Fonts 官方文档 看看。
0x02 糟糕的图像大小
可能你没有注意到，在 2024 年 12 月 4 日之前，本站的头像（也就是favicon.png）实际上是 480×480px 超大高清图，这导致他的大小一度来到了 17 kb，会严重拖慢各位朋友的友情链接页面（自托管头像除外）。由于本站没有任何地方使用到了它，所以 PageSpeed 一直发现不出来（。
使用 Cloudflare Images 解决难点
本着能白嫖就白嫖的原则，我选择使用 Cloudflare Images 解决我的难点。Cloudflare Images 提供端到端解决方案，旨在帮助我们从单个 API 简化图像的处理。
Cloudflare 支持非常多的来源文件扩展，具体列在下方仅供参考：
- JPEG
- PNG
- GIF (包括动画)
- WebP (包括动画)
- SVG
我选择使用 URL 的方式传递本域上的图片，通常的传递方式如下，每一项的具体解释可以参考官方文档：
https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
依照这个构建方式，我很快通过文档构建了属于我的图片优化参数，如下：
https://blog.liuzhen932.top/cdn-cgi/image/quality=50,format=auto/favicon.png
你可能会说，欸？你这改了但是我没有收到你的头像修改请求啊？别着急，下面就是我无感切换图片源的方法————转换规则。
使用转换规则无感传递优化选项
在我们改完后不想更新 URL 怎么办呢？我们可以选择使用转换规则，长话短说，转换规则可以将源 URL 转换为目标 URL 的服务器端操作。对于网站访客来说他们并不能看到重写，因为浏览器中显示的 URL 不会更改。
为了避免请求循环（源地址 - CF 加载 - 源地址…），文档推荐我们在每个表达式后面加上 ...and (not (any(http.request.headers["via"][*] contains "image-resizing")))。
这里贴出我所使用的表达式方案：
这部分参考 Serve images from custom paths，希望对你有所帮助！
0x03 评论系统调优
Artalk 的介绍
表情
待填写，丢个链接在这里 https://blog.liuzhen932.top/assets/OwO.json
0x05 总结
待填写