EDIT

ネイティブ Lazyload を導入してみた

｜2023/09/18 ｜9
アイキャッチ

JavaScript 不要で手軽に画像遅延読み込みを実装できる「ネイティブ Lazyload」を導入してみました。

ネイティブ 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 導入前後のスコアを比較した結果がこちら。

PageSpeed Insights PC PageSpeed Insights mobile

スコアが大幅にアップしました！

また、下の方の「改善できる項目」から「オフスクリーン画像の遅延読み込み」がなくなっています。

当方は高速な光回線のPC環境しかないため、体感的な違いはイマイチ実感できないのですが、スマホや低速な環境だとだいぶ違うんでしょうね。

loading 属性の追加方法

冒頭で <img> タグに追記するだけで簡単に実装できると書きましたが、全ての画像タグに一個一個地道に追記してたら日が暮れてしまいます(笑)

ということで、テキストエディタの置換機能を使って、記事内の全ての <img> タグを一発で書き換えました。

私は Mery というアプリを愛用していますが、 Windows のメモ帳でも「置換」機能が使えます。

Mery置換

検索文字列に <img
置換後に <img loading="lazy"
と入力し、「すべて置換」すればOKです。

「写真」記事は42本ありますが、作業時間は30分も掛かりませんでした。

追記: Blogger の新編集UIに置換機能が付きました。

① HTML 編集モードにして アイコンをクリック。
Replace: に「<img」と入力し、Enter を押します。

置き換え機能

② With: に「<img loading="lazy"」と入力し、Enter を押す。

置き換え機能2

③  All  をクリックすると…

置き換え機能3

全て置き換わります。

置き換え機能4

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, &quot;2:1&quot;)'/>
↓↓
<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)' 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