我的网站用 Lighthouse 跑分有问题，CLS 较差，所以来优化一下

前言

在此之前，强烈推荐点击我给的CLS链接了解一下什么是CLS，这对改善网站体验来说尤其有用。我使用的主题需用 Hugo 的 Page Bundle 来启用响应式图像（Responsive Image），但是 Hugo 的官方文档中对 Page Bundle 只言片语，虽然了解了一些关系，但还是不知道怎样算是使用了 Page Bundle——页包。所以记录一下我是怎么解决问题的。

要求

博主题文档是这样写的，在文章的变量头添加：

cover:
    image: "<image path/url>"
    # 也可以添加外部链接
    alt: "<alt text>"
    caption: "<text>"
    relative: false # 在hugo页面包中使用封面的相对路径

当您在页面包中包含图像时，将使用HTML5 srcset字段自动提供多个尺寸的图像,即响应式图像。

要减少站点的生成时间和大小，可以使用禁用此功能，在config.yml：

params:
    cover:
        responsiveImages: false

解决方法

总的来说就是我的理解就是 content 下的每一层都算一个包，没有子目录的算叶包（Leaf Bundle，索引是index.md），有子目录算枝包（Branch Bundle，索引为_index.md），每个页面包下的资源可以同级相对引用。但是这就比较麻烦，每一篇文章都建一个子文件夹……结构虽然好管理但是新建文章的时候很麻烦……所以我们现在写文章应该这样的结构：

content/
 └── posts
    ├──_index.md
    ├── postname1
    │   ├── image1.jpg
    │   ├── image2.png
    │   └── index.md
    └── postname2
        └── index.md

postname对应网站的/posts/postname/，随便自己取，而index.md就是文章内容了，就可以同级引用image1.jpg了。记住叶包前一层必定要有枝包的索引_index.md，否则无效。如果设置好后无效果，建议Ctrl+C重新hugo serve。

这里的好处就是因为节省流量，响应式图像面对不同分辨率设备的用户展现不同大小的图像，有效解决了 CLS 较差的问题，但是无形中增加了网站体积。哪怕是 Vercel 我都不敢用，Vercel 的 Usage Limit 比较宽松，但是现在看着爽了，以后图片多起来上传时间也得增加。所以比较强硬的方法就是照着我文章开头留的链接里的方法改一下了(优化累积布局偏移)。目前来说响应式图像我只应用到封面上了，体积不算大。至于说新建文章的问题，我改了改 CMD 脚本：

  • 自定义 URL 的文章新建方式
@echo off
set /p a=文章名？[空退出]:
if /i "%a%"=="" exit
hugo new --kind post /post/%a%/index.md
pause
  • 按照日期的文章新建方式
@echo off
hugo new --kind post /post/%date:~0,4%%date:~5,2%%date:~8,2%/index.md
pause