Chrome 対応Native Lazyloadをコードだけでサイトの画像に一括実装する(コピペ一発、プラグイン不要)

この記事は約5分で読めます。

2020-02-24WordPressカスタマイズ

質問者の写真

Google Chromeが標準機能でLazyloadに対応したんだってねえ
サイトは何もしなくていいの?
 
解答者の写真
「Chromeだけ」と割り切るなら、簡単なコード書くだけで対応できるわよ
 

質問者の写真

そうなんだ!
やってみようかな?
 
解答者の写真
他のブラウザじゃ動かないから、今はPSIをクリアする目的以外に設置する意味があるかどうか
頭に入れておけば将来役に立つかもね
 

Google ChromeがLazyloadに対応

Pagespeed Insightsで五月蠅く指摘される「オフスクリーン画像の遅延読み込み」。
これはLazyloadのことなのですが。
サイトに強制するだけでなく、遂にGoogle自らChromeに実装してしまいました。

質問者の写真

なんとまあ……
まさかブラウザレベルでLazyloadに対応しちゃうなんて……
 

しかもWordPressプラグインまで出しちゃいました。

解答者の写真
絶対にLazyloadを実装しなさい
 

というGoogle様の声が聞こえてくるようです。

Chrome標準機能のLazyloadを実装する方法

imgタグに次の属性を付加するだけです

loading="lazy"

画像まとめて付加する方法は後述。

Chrome標準機能のLazyloadの利点

LazyloadによるSEO上のマイナス効果がない

LazyloadはSEO上のマイナス効果があるとされています。

解答者の写真
Lazyloadは画面スクロールで一定の位置に到達すると画像を読み込む仕組
botがスクロールしないなら画像を読み込まなくて当然だよね
 

 

しかしChromeのLazyloadはimgタグに属性を付加するだけですので、SEO上のマイナス効果はありません。

軽い

サーバーサイドは属性を付加するだけ。
処理はブラウザ任せになりますので。

画像まとめて一括でChrome標準機能のLazyloadに対応するためのコード

いくら属性を加えればいいとはいえ、1つ1つ手作業で加筆なんてやってられません。
imgタグの中にloading属性がないものを探し出して、自動的に付け加えるのがこのコード。
functions.phpに貼ってください。

function non_loading_fix($content){
$content = preg_replace('/<img((?![^>]*loading=)[^>]*)>/i', '<img loading="lazy"${1}>', $content);
return $content;
}
add_filter('the_content', 'non_loading_fix');

preg replaceの説明はこちら。

参考にしたのはこちら。

質問者の写真

まったく同じ要領なんだから、できるはずだ!
 

うん、できました。

Google製「Native Lazyload」プラグインの意味

質問者の写真

これだけでいいなら「Native Lazyload」プラグイン要らなくない?
 
解答者の写真
Chrome以外のブラウザでは動かないでしょ?
プラグインには他のブラウザからアクセスあった場合のスクリプトまで入ってるわけ
 

つまり、まともに使いたいなら、先述のコードだけでは意味がありません。
ただPSIで怒られなくなるというだけ。

jsの干渉などでLazyloadがうまく動かない環境にはいいのかも……ですね。

ChromeのLazyloadを試してみた感想

質問者の写真

本当に遅れて読み込まれるだけだ……
バタバタして見えるから逆に体感遅く感じちゃう……
 
解答者の写真
まだまだ発展途上なんだよ
 

 

Lazyloadを使う場合って、大抵はフェード効果をつけると思います。
実速度はともかくとして、その方が自然に間を埋めてくれる分だけ体感速く思えます。

正直、現状では使う気になれませんでした。

使い始めました。
本格的に使ってみたい方は、こちらの記事もあわせてどうぞ。

おまけ おすすめLazyloadライブラリ

先述したLazyloadのSEO対策として、Googleは「Intersection Observer API」の使用を推奨しています。

つまり、Intersection Observer API対応のLazyloadライブラリを使えばいいわけです。

おすすめなのがLozad.js。
私の使っているWordPressテーマLuxeritasでも採用されています。
詳しい使い方はこちらの記事をどうぞ。

Google謹製プラグインのようにブラウザで使い分ければいいのでしょうが。
私は当面、lozad.jsで統一しつつ様子を見ます。

まとめ

解答者の写真
現在はともかくとして
他のブラウザも対応してくれば実装する意味も出てくるでしょう
その日はきっと遠くないはずです
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴