解决 hugo 博客累计布局偏移(CLS)问题的一种思路

什么是累计布局偏移(CLS)？

CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。

每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移。（有关单次布局偏移分数计算方式的详细信息，请参阅下文。）

一连串的布局偏移，也叫会话窗口，是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1 秒，且整个窗口的最大持续时长为 5 秒。

最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口。

摘自https://web.dev/cls/

因为我的博客已经修复了问题，这里以 dvel 大佬的博客为例。

刷新后，等图片加载完后，出现了页面抖动，也就是累计布局偏移。

这里使用了pagerMod主题，图片 markdown 语法解析模板，代码如下：

<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />

很明显可以看到，这里图片没有设置宽高参数，所以导致页面渲染的时候出现了累计布局偏移问题。

问题的解决也很简单，需要在生成 html 代码时，加上图片宽高即可，但是 markdown 图片语法是不支持宽高参数的。

经过几天的思考验证，通过将图片存到腾讯云对象存储上，利用图片处理接口实现了一套自动生成图片宽高的方案。

这里以pagerMod主题为例，具体实现如下：

新增css配置

新增如下配置，否则会导致图片变形。

img {
    width:100%;
    height:auto;
}

figure {
    background-color: var(--code-bg);
}

添加render-image.html文件

代码如下：

{{- $item := getJSON .Destination "?imageInfo&t=" now.Unix -}}
{{/* 通过对象存储接口获取图片宽高，因为我使用了 cdn ，所以增加随机数保证拿到最新的图片宽高参数 */}}

{{- $Destination := .Destination -}}
{{- $Text := .Text -}}
{{- $Title := .Title -}}

{{- with $item }}
<picture>
    <source type="image/webp" srcset="{{ $Destination | safeURL }}/webp" width="{{ .width }}" height="{{ .height }}">
    {{/* 利用图片处理生成 webp 格式图片 */}}
    <img loading="lazy" src="{{ $Destination | safeURL }}" alt="{{ $Text }}" {{ with $Title}} title="{{ . }}" {{ end }} width="{{ .width }}" height="{{ .height }}" />
</picture>
{{- end -}}

使用方式和原来不变，插入markdown语法的图片代码即可。

![picgo config]( https://static.liudon.com/picgo-config.png)

思路历程：

优化博客的累计布局偏移(CLS)问题

累计布局偏移修复方案改进 —— 自动生成图片宽高