昨日、Blogger 設定ページで新機能が追加されているのに気づきました。
この「画像の遅延読み込み」機能を有効にすると、記事内の画像の<img>
タグに自動的にloading="lazy"
属性が追加されるようです。
ちなみに loading="lazy" (ネイティブ Lazyload) に関して、ここでは解説は省きますが、こちらの記事に関連情報を書いていますのでご参考にどうぞ。
ふじろじっくネイティブ Lazyload を導入してみた画像遅延読み込みでページの表示速度改善!https://fujilogic.blogspot.com/2020/06/Native-Lazyload.html
実際に試してみた
記事編集で今までと同様に画像を追加してみると、生成されたコードの img タグには loading="lazy" は挿入されていません。
記事編集時は loading="lazy" は挿入されていない |
そのままの状態で記事を公開後、HTML ソースコードを確認してみると、ちゃんと loading="lazy" が追加されていました。
HTMLソース |
仕様に関して
JavaScript で自動追加されるのかな?とも思いましたが、Blogger 標準 JS を無効 (b:js='false') にしても問題なく機能しました。
公開済みの過去記事内の全画像にも適用されるようです。
iframe 及び、記事・固定ページ以外の画像は対象外のようです。
一番上の(最初から表示すべき)画像にまで適用されてしまうのはあまりよろしくないので、その点がちょっと残念ではあります。
最後に
個人的には defer.js を導入していて、画像タグも defer 仕様になっているので今回の新機能の恩恵を受けることはなさそうですが、一般的な Blogger ユーザーにとっては良機能だと思いますので、是非有効にしてみて下さい。
2023/09/26 追記: さらに新機能が追加
「遅延読み込み」の下にまた新たなオプションが追加されました。
今度は画像パラメータに-rw
を自動で追加して、次世代フォーマットの一つである WebP 化してくれるというもの。loading="lazy" と同じく、Blogger JS がオフの状態でも機能してくれます。
適用されるのは src
属性の画像 URL のみで、data-src
には適用されないようです。
当ブログのトップページや人気の投稿等のサムネイル画像は JavaScript で WebP 化していますが、古い記事内の画像の多くは WebP 化対応していないので、今回の新オプションはありがたく使わせて頂きたいと思います!
2023/10/19 追記: 衝撃の事実が発覚
Bloggerに新規追加となった、画像の遅延読み込みとWebP画像の設定は使用するとページスピードのパフォーマンスが10ポイント程度悪化するようなので、使用を中止しました。
— あトん🤖Web CodingとAV好きなブログラマー (@HeavyPeat) October 16, 2023
面倒ですが手動でloading="lazy"と-rwを追加します。#Blogger #画像の遅延読み込み #WebP pic.twitter.com/X8FgHQOJtR
えー、マジですか!?
早速当ブログと F-light デモブログで検証してみた所、あㇳんさんのポスト通りの結果になりました…Blogger さん、これじゃ意味ないじゃん!
というわけで、今後この問題が改善されるかどうかはわかりませんけど、とりあえず私は今回紹介した新機能は使わずしばらくは様子見したいと思います。
コメントを投稿
別ページに移動します