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

2020/06/24 5

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

ネイティブ Lazyload とは

「ネイティブ Lazyload」は、HTML の <img> や <iframe> タグに loading 属性を追加するだけで簡単に遅延読み込みを実現できる手段で、実装することでページの読み込み速度の向上が期待できます。

現在はほとんどのブラウザで標準サポートされているようです。Safari はまだ正式サポートはされていませんが、「実験的な機能」で有効にすればテストは可能です。IE 等の非サポートブラウザでは loading 属性は無視されて、これまで通りに画像が描画されます。


参考記事:

海外SEO情報ブログimageGoogle、遅延読み込みの推奨方法にネイティブ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枚もある記事。

ふじろじっくimage花しょうぶの名前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分も掛かりませんでした。

lazy 以外の値

ちなみに "lazy" の代わりに "auto" にすると、遅延読み込みするかどうかをブラウザが判断するそうです。
auto はまだ試してないので、どういう条件で遅延読み込みがされなくなるのかは不明です。

参考記事:

海外SEO情報ブログimageChromeがネイティブ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' を追記します。

HTML <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)'/>
↓↓
HTML <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)' loading='lazy'/>

これでトップページの全てのサムネ画像に Lazyload が適用されます。


画像を多用する人におすすめ

今の所特に問題はなさそうですし、画像を多用してる人にはメリットの方が多いと思うので、試してみる価値はあると思います。




ARCHIVE

RECENT POSTS