Google Chromeが標準機能でLazyloadに対応したんだってねえ
サイトは何もしなくていいの？
「Chromeだけ」と割り切るなら、簡単なコード書くだけで対応できるわよ
そうなんだ！
やってみようかな？
他のブラウザじゃ動かないから、今はPSIをクリアする目的以外に設置する意味があるかどうか
頭に入れておけば将来役に立つかもね
【10/11追記】
WordPress5.5以降では対策せずともNative lazyloadに対応しています。
従って本記事は無用の長物となりました。
Google ChromeがLazyloadに対応
Pagespeed Insightsで五月蠅く指摘される「オフスクリーン画像の遅延読み込み」。
これはLazyloadのことなのですが。
サイトに強制するだけでなく、遂にGoogle自らChromeに実装してしまいました。
しかもWordPressプラグインまで出しちゃいました。
絶対にLazyloadを実装しなさい
というGoogle様の声が聞こえてくるようです。
Chrome標準機能のLazyloadを実装する方法
imgタグに次の属性を付加するだけです
loading＝"lazy"
画像まとめて付加する方法は後述。
Chrome標準機能のLazyloadの利点
LazyloadによるSEO上のマイナス効果がない
LazyloadはSEO上のマイナス効果があるとされています。
Lazyloadは画面スクロールで一定の位置に到達すると画像を読み込む仕組み
botがスクロールしないなら画像を読み込まなくて当然だよね
しかしChromeのLazyloadはimgタグに属性を付加するだけですので、SEO上のマイナス効果はありません。
軽い
サーバーサイドは属性を付加するだけ。
処理はブラウザ任せになりますので。
画像まとめて一括でChrome標準機能のLazyloadに対応するためのコード
いくら属性を加えればいいとはいえ、１つ１つ手作業で加筆なんてやってられません。
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で統一しつつ様子を見ます。
まとめ
現在はともかくとして
他のブラウザも対応してくれば実装する意味も出てくるでしょう
その日はきっと遠くないはずです
