ということでタイトルのとおり Hexo の画像遅延ロードについて書いてみようと思います。

遅延読み込みとは

遅延読み込み (Lazy loading) とは、リソースをノンブロッキング（クリティカルでない）ものとして識別し、必要なときだけこれらを読み込む戦略のことです。クリティカルレンダリングパス (en-US)の長さを短縮する方法であり、ページのロード時間の短縮につながります。

画像は非同期で読み込めばその分だけページが出る速度が上がるよね、って話です。

方法

昔は JavaScript で画像を後から突っ込んでいく手法が多かった印象ですが、今は img タグに loading 属性を追加するだけで対応できるらしいです。すばら。

loading 属性 loading 属性を <img> 要素に（または loading 属性を <iframe> 要素に）設定することで、ユーザーが近くにスクロールするまで、画面に表示されている画像や iframe の読み込みを延期するように、ブラウザーに指示することができます。

<img src="image.jpg" alt="..." loading="lazy" /> <iframe src="video-player.html" title="..." loading="lazy"></iframe>

というわけでこちらを使って実現していきます。

対応

既にこの方法で遅延ロードを実現している方がいらっしゃいました。圧倒的感謝。ここは素直に先人の知恵を借りることにします。
Hexoで画像にloading="lazy"を自動で追加して画像を遅延読み込みする - Pixelog

内容を確認したところHexoのフィルター機能を使ってhtmlタグを置換して実現しているようです。ウチもHexo環境なので、基本これと全く同じ方法でいけそうかと思ったんですが、どういうわけかトップページだけはタグの置換が行われていませんでした。

ということで、ウチでは after_post_render ではなく、after_render:html フィルターで一括対応しました。function内でやってることは一緒です。

themes/apollo/scripts/lazy.js を作成し、中身を以下のようにしました。

hexo.extend.filter.register('after_render:html', (str, data) => {
    return str.replace(/<img src=/g, '<img loading="lazy" src=');
});

after_render Filters についてはこちら
Rendering#after-render-Filters | Hexo

after_post_render だと名前のとおり記事ページに限定されるんですかね？hexojsのソースコードを読んでみればわかるかもしれませんが、今回はいったん飛ばします。
Filter#after-post-render | Hexo

効果

正直、体感ベースではよくわかりませんでした＼(^o^)／
まあ邪魔ではないので Google 先生のツールなどから修正提案が出ない限りはしばらくこのままにしようと思います。