EDIT

【Blogger】画像の遅延読み込みに関する新機能が追加されました

｜2023/10/19
アイキャッチ

昨日、Blogger 設定ページで新機能が追加されているのに気づきました。

設定ページ

この「画像の遅延読み込み」機能を有効にすると、記事内の画像の<img>タグに自動的にloading="lazy"属性が追加されるようです。

ちなみに loading="lazy" (ネイティブ Lazyload) に関して、ここでは解説は省きますが、こちらの記事に関連情報を書いていますのでご参考にどうぞ。

ファビコンふじろじっく
サムネイル
ネイティブ Lazyload を導入してみた
画像遅延読み込みでページの表示速度改善！
https://fujilogic.blogspot.com/2020/06/Native-Lazyload.html

実際に試してみた

記事編集で今までと同様に画像を追加してみると、生成されたコードの img タグには loading="lazy" は挿入されていません。

画像を追加した状態の記事編集画面(HTMLビュー)
記事編集時は loading="lazy" は挿入されていない

そのままの状態で記事を公開後、HTML ソースコードを確認してみると、ちゃんと loading="lazy" が追加されていました。

HTMLソースコード
HTMLソース

仕様に関して

JavaScript で自動追加されるのかな？とも思いましたが、Blogger 標準 JS を無効 (b:js='false') にしても問題なく機能しました。

公開済みの過去記事内の全画像にも適用されるようです。

iframe 及び、記事・固定ページ以外の画像は対象外のようです。

一番上の(最初から表示すべき)画像にまで適用されてしまうのはあまりよろしくないので、その点がちょっと残念ではあります。

最後に

個人的には defer.js を導入していて、画像タグも defer 仕様になっているので今回の新機能の恩恵を受けることはなさそうですが、一般的な Blogger ユーザーにとっては良機能だと思いますので、是非有効にしてみて下さい。

2023/09/26 追記: さらに新機能が追加

「遅延読み込み」の下にまた新たなオプションが追加されました。

今度は画像パラメータに-rwを自動で追加して、次世代フォーマットの一つである WebP 化してくれるというもの。loading="lazy" と同じく、Blogger JS がオフの状態でも機能してくれます。

画像Webp化オプション

適用されるのは src属性の画像 URL のみで、data-srcには適用されないようです。

当ブログのトップページや人気の投稿等のサムネイル画像は JavaScript で WebP 化していますが、古い記事内の画像の多くは WebP 化対応していないので、今回の新オプションはありがたく使わせて頂きたいと思います！

2023/10/19 追記: 衝撃の事実が発覚

えー、マジですか！？

早速当ブログと F-light デモブログで検証してみた所、あㇳんさんのポスト通りの結果になりました…Blogger さん、これじゃ意味ないじゃん！

というわけで、今後この問題が改善されるかどうかはわかりませんけど、とりあえず私は今回紹介した新機能は使わずしばらくは様子見したいと思います。