💯 HugoのCore Web Vitals対策で画像の縦横サイズが自動で入るようにした

2021-11-27 /Development #Hugo

ちょっと前にCore Web Vitalsが話題になっていたので自分のサイトを調べてみたら、CLS(Cumulative Layout Shift)が低かったので対応しておきました。

調べてみたらHugoでは .Page.Resources でページ内のリソースが参照できるようになっているみたいで、面倒な事をしなくても画像サイズが指定できるようになっているようです。便利ですね。

というわけで Markdown Render Hooksrender-image.html の記述をこんな感じにしておきました。

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ if $image }}
<figure>
  <span>
    <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" {{ with .PlainText }} title="{{ . }}" {{ end }}
      decoding="async" width="{{ $image.Width }}" height="{{ $image.Height }}" />
  </span>
  {{ with .PlainText }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>
{{ else }}
<figure>
  <span>
    <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" {{ with .PlainText }} title="{{ . }}" {{ end }}
      decoding="async" />
  </span>
  {{ with .PlainText }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>
{{ end }}
Profile

石原 悠 / Yu Ishihara

デザインとプログラミングとヨーグルト作りが好きです。 🐥 🐙