JavaScript 不要で手軽に画像遅延読み込みを実装できる「ネイティブ Lazyload」を導入してみました。
CONTENTS
ネイティブ Lazyload とは
「ネイティブ Lazyload」は、HTML の <img> や <iframe> タグに loading 属性を追加するだけで簡単に遅延読み込みを実現できる手段で、実装することでページの読み込み速度の向上が期待できます。
現在はほとんどのブラウザで標準サポートされているようです。Safari はまだ正式サポートはされていませんが、「実験的な機能」で有効にすればテストは可能です。IE 等の非サポートブラウザでは loading 属性は無視されて、これまで通りに画像が描画されます。
参考記事:
海外SEO情報ブログGoogle、遅延読み込みの推奨方法にネイティブLazy-loadを追加 | 海外SEO情報ブログ推奨する Lazy-load の実装手段として ネイティブ Lazy-load を検索ガイドの技術ドキュメントに Google は追加した。https://www.suzukikenichi.com/blog/google-added-native-lazy-loading-to-lists-of-recommended-lazy-loading/
写真記事に導入してみた結果…
当ブログではとりあえず、ページ読み込み速度の改善が最も期待される「写真」カテゴリの全記事に適用させてみることにしました。
例えばこの、写真が42枚もある記事。
ふじろじっく花しょうぶの名前37品種の花しょうぶと紫陽花https://fujilogic.blogspot.com/2018/06/name-of-iris.html
PageSpeed Insights で、ネイティブ Lazyload 導入前後のスコアを比較した結果がこちら。
スコアが大幅にアップしました!
また、下の方の「改善できる項目」から「オフスクリーン画像の遅延読み込み」がなくなっています。
当方は高速な光回線のPC環境しかないため、体感的な違いはイマイチ実感できないのですが、スマホや低速な環境だとだいぶ違うんでしょうね。
loading 属性の追加方法
冒頭で <img> タグに追記するだけで簡単に実装できると書きましたが、全ての画像タグに一個一個地道に追記してたら日が暮れてしまいます(笑)
ということで、テキストエディタの置換機能を使って、記事内の全ての <img> タグを一発で書き換えました。
私は Mery というアプリを愛用していますが、 Windows のメモ帳でも「置換」機能が使えます。
検索文字列に <img
置換後に <img loading="lazy"
と入力し、「すべて置換」すればOKです。
「写真」記事は42本ありますが、作業時間は30分も掛かりませんでした。
追記: Blogger の新編集UIに置換機能が付きました。
① HTML 編集モードにしてアイコンをクリック。
Replace: に「<img」と入力し、Enter を押します。
② With: に「<img loading="lazy"」と入力し、Enter を押す。
③ All をクリックすると…
全て置き換わります。
lazy 以外の値
ちなみに "lazy" の代わりに "auto" にすると、遅延読み込みするかどうかをブラウザが判断するそうです。
auto はまだ試してないので、どういう条件で遅延読み込みがされなくなるのかは不明です。
参考記事:
海外SEO情報ブログChromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に | 海外SEO情報ブログGoogle Chrome 76 がネイティブ lazy-loading をサポートするようになった。JavaScript のライブラリを利用することなく、ブラウザの標準機能として、画像の遅延読み込みが可能だ。https://www.suzukikenichi.com/blog/chrome-76-supports-native-native-loading/
トップページのサムネ画像にも適用
記事内の画像だけでなく、トップページの記事一覧のサムネ画像にも loading 属性を追記してみました。
HTML を編集しますので、必ずテーマのバックアップを取ってから行って下さい。
テーマの HTML 編集で以下の文字列を検索します。※QooQ テーマの例です。
<img class='list-item-img'
このタグに loading='lazy' を追記します。
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")'/><img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")' loading='lazy'/>
※リスト版 QooQ の場合はこのようになります。
<img class='list-item-img' expr:src='data:post.thumbnailUrl'/><img class='list-item-img' expr:src='data:post.thumbnailUrl' loading='lazy'/>
これでトップページの全てのサムネ画像に Lazyload が適用されます。
画像を多用する人におすすめ
今の所特に問題はなさそうですし、画像を多用してる人にはメリットの方が多いと思うので、試してみる価値はあると思います。
2023/09/18 追記: loading="lazy" が自動挿入される公式機能が追加されました。
ふじろじっく【Blogger】画像の遅延読み込みに関する新機能が追加されました画像タグに遅延読み込み属性を自動挿入する良機能が追加されました。https://fujilogic.blogspot.com/2023/09/Blogger-auto-insert-loading-lazy-attribute.html
コメントを投稿
別ページに移動します9 件のコメント (新着順)
ふじやん
HARUさん、こんばんは。
自動で付与できるなら便利そうですねえ。
お役に立てるならテストブログで試してみてもいいですよ。
HARU
imgタグに自動的に「loading="lazy"」を追記するScriptを作ってみたのですが、ふじやんさんの環境で検証して頂くことはできますでしょうか?
私も検証用のサイトでやってみたのですが、ふじやんさんのような劇的変化が見られず、本当にできているのか気になりまして…
今度、記事にしますので、よろしければ検証をお願いいたします。(無理であれば結構です!)
ふじやん
ひき太郎さん、コメントありがとうございます。
私も昨日気づいて、あわてて追記しました(^^;
Bloggerさんが自動で追記してくれたら…というのは私も全く同意見です。Google が推奨してるんですからねえ。
でもその前に、画像挿入の挙動や、サイズを変えたときのタグとか、まだ色々バグっぽいのがあるようなので、それらを直して欲しいもんです。
ひき太郎
こんにちはm(__)m
いつも為になる情報をありがとうございます。Bloggerで置換機能が使用できるなんて全く気づいていませんでした。さっそく使用してきます!
Lazyloadというものも書いておいて損はなさそうな感じなので書き換えてきます!いっそのこと画像挿入したときに自動で書き込んでくれてもいいくらいですね^^
ふじやん
実は…私も Tokyo でテストした時に、最初全然関係ないとこにタグ追記してて、あれ?反映されてない?ってちょっと焦ってましたw(~_~;)
のの
おぉ、ご親切にありがとうございます!
ハイ、しっかり(?)間違えて、「thumbnailUrl」ではなく「firstImageUrl」のところにタグを追加してしまいました。(^▽^;)
もう一度やってみますね。重ね重ねありがとうございます!
ふじやん
ののさん、一応確認ですけど、Tokyo の場合はトップページのサムネは以下のコード(2箇所の内の下の方)に追記するのですが、間違いはないですか?
<img expr:src='data:post.thumbnailUrl'/>
↓↓
<img expr:src='data:post.thumbnailUrl' loading='lazy'/>
ふじやん
ののさん、こんにちは。
おお、そちらでも改善されましたか!お役に立てて何よりです(^^)
ウチもトップページのスコアはほとんど変化なしです(笑)
リアクションに関しては(二重カウントとか)相変わらず不安定な状態が続いてますけど、Safariだとさらに厄介なことになってるんですね(^^;
埋め込みコメントも iOS からコメントできないという問題がありますけど、どちらも iframe で表示されてるので、りんごさんと iframe の相性が悪いのかもしれませんね。
のの
ふじやん。さん、こんにちは。
早速やってみました。タグを追加するだけ、というのが簡単でいいですね。
トップページに関してはそれほど変化はありませんでしたが、個別記事(特に画像の多い記事)ではかなりの改善がありました!
いつも、役立つ情報をありがとうございます。m(_ _)m
ところで、ぐうぐるさんとリンゴさんは密かにイヂワルし合っているので、何かと不具合がありますが...、リアクションボタンについても、Safariからだと反映されないことがあります。
もう少し仲よくしてほしい..と思います。。(^^;)