Hugoで画像のLazy-loadingを有効にする

Hugoにはv0.62からMarkdown Render Hooksという機能が備わっている。これはMarkdownで画像やリンクをレンダリングするときにどのようにレンダリングするかをテンプレートとして設定できる機能だ。やたら長くて重たい記事を書いてしまったので画像のlazy-loadingを有効にするため、imageのrender hookを作成する。

layouts/_default/_markup/render-image.htmlに以下のファイルをつくる。

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

これだけでMarkdownでつくった記事中に埋め込んだ画像の全てに loading="lazy" というAttributionがつく。基本的に記事全体で有効にしておいて問題が起こることもなく、対応していないブラウザであればただ無視される。lazy loadingを実現するJsのライブラリもあるが、こういうのはブラウザの機能で対応したい。

さっき言及した重い記事は全体で18MBあるが、画像を遅延させて読み込むことで最初のローディングで1.8MBしか読み込まれない。まぁ軽くはないのだが（画像の解像度が端末ごとに最適化されていない）だいぶマシである。しばらくはこれでいこう。