2023年博客优化一点小见解
为什么我都用了 CDN，我的博客还是这么慢？
为什么同样的内容，他的博客跑的比____记者还快，我的却总是得等上一秒？
为什么同样的图片，他加载的大小是 10KB，我的却要 2MB？
这一切的一切，都指向了一个内容：博客优化
我们都知道，Hexo 是一个轻量化的博客。有多轻量呢？只需要在本地生成，之后把生成的网页文件放到任何一个地方都能跑，什么 PHP、MySQL 都不需要。因此，生成的博客能跑多快，主要取决于服务器的发送速度和访客的加载速度和浏览器渲染速度。但老话说的好啊，解决不了问题，就把提出问题的人给解决了 改变不了别人，就改变自己吧。
因此，我们只能从优化服务器方面入手。好在，Hexo 生成后只有静态文件，没有 PHP 之类的动态文件，否则就只能先对着服务商说一句
优化静态文件的加载速度就好办多了。我们都知道（不要跟我港你不知道吼，Hexo 静态文件主要由 图片、CSS、JavaScript、HTML 这几类文件构成。CSS 和 JavaScript 可以通过调用公共 CDN 库或者使用 *.min.js/css 这类压缩的方式来优化。
国内常见的公共 CDN 库有如下几种（以 Next 主题的 CDN 调用方式来写）：
https://cdn.bootcdn.net/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file} # BootCDN加速
https://cdn.staticfile.org/${cdnjs_name}/${version}/${cdnjs_file} # 七牛CDN加速
https://cdn.bytedance.com/cdn/${cdnjs_name}/${version}/${cdnjs_file} # 字节CDN加速
其中，BootCDN 和 字节 CDN 的加速只有国内节点，如有海外访客则不推荐。
HTML 的优化也基本上以压缩为主，但是基本上能节省的很有限，因为 HTML 语法限制（主要是 HTML 之类的能想到的压缩 Gzip 和 Broti 都能做了）。
那就着重介绍一下图片压缩吧。
图片压缩/优化
在去年写的文章（也就是上一篇文章，我真能咕）中有提到，WebP 是一种很高效的图片格式。高效到什么程度呢？
以一张大小为 9.5 MiB 的 PNG 格式的照片为例，以 WebP Lossless 进行无损压缩后，大小为 5.7 MiB，下降了约 40%。那么以有损压缩呢？
答案是 556 KiB，节省了约 94% 的空间，并且可以看到照片的细节并没有丢失多少。
影响因子均为 4，有损压缩质量参数为 75
看到以上的数据，WebP 高效性各位应该都能理解了吧？但今天的另一位主角是 AVIF，一种更新颖、更高效的图片格式，首次出现于 2018 年年末，由 开放媒体联盟（AMO） 开发。
开放媒体联盟这个组织可能各位不甚了解，但如果提到他们所开发的视频编码格式 AV1 ，相信各位都不会太陌生了。对，就是那个让你在看 Bilibili、YouTube 时 CPU 拉满、风扇狂转的视频编码格式。万恶之源了属于是。
其实这个事吧，也不能怪人家，因为人开发出的这个编码格式确实高效，压缩率嗷嗷的，但由于比较新，所以硬件支持上除了 老大哥 Intel，其他几个 小弟 农企 硬件厂商不太能跟得上，就导致了这个问题。
回到 AVIF 这个格式。AVIF 所采用的压缩编码是自家的 AV1 ，肥水不流外人田嘛 ，压缩率自然也不会太差。还是以上面的照片为例，通过 Squoosh.app 设置 AVIF 格式，无损压缩，影响因子 4
但结果令人大跌眼镜。AVIF 格式在进行无损压缩的时候竟然出现了反向压缩的情况，可能是 “特性”。
而有损压缩就正常多了，影响因子 4，质量参数 30
大小为 189 KiB，节省了约 98% 的空间，同时照片的信息也并没有丢失太多，除了放大看部分细节的地方会出现模糊，算是可接受范围内
顺带一提，WebP 和 AVIF 格式的质量参数并不通用，文中采用的 75 或 30 均为默认参数
由此可以得出一个较为片面的结论：在无损压缩上，以 WebP 为优；而有损压缩上，以 AVIF 为优。
后记
当做完以上操作之后，打开博客就会感觉 duang 的一下就打开了，很快，很高效。