サイトは何もしなくていいの？
やってみようかな？
頭に入れておけば将来役に立つかもね
【10/11追記】
WordPress5.5以降では対策せずともNative lazyloadに対応しています。
従って本記事は無用の長物となりました。
Google ChromeがLazyloadに対応
Pagespeed Insightsで五月蠅く指摘される「オフスクリーン画像の遅延読み込み」。
これはLazyloadのことなのですが。
サイトに強制するだけでなく、遂にGoogle自らChromeに実装してしまいました。
まさかブラウザレベルでLazyloadに対応しちゃうなんて……
しかもWordPressプラグインまで出しちゃいました。
というGoogle様の声が聞こえてくるようです。
Chrome標準機能のLazyloadを実装する方法
imgタグに次の属性を付加するだけです
loading＝"lazy"
画像まとめて付加する方法は後述。
Chrome標準機能のLazyloadの利点
LazyloadによるSEO上のマイナス効果がない
LazyloadはSEO上のマイナス効果があるとされています。
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」プラグインの意味
プラグインには他のブラウザからアクセスあった場合のスクリプトまで入ってるわけ
つまり、まともに使いたいなら、先述のコードだけでは意味がありません。
ただPSIで怒られなくなるというだけ。
jsの干渉などでLazyloadがうまく動かない環境にはいいのかも……ですね。
ChromeのLazyloadを試してみた感想
バタバタして見えるから逆に体感遅く感じちゃう……
Lazyloadを使う場合って、大抵はフェード効果をつけると思います。
実速度はともかくとして、その方が自然に間を埋めてくれる分だけ体感速く思えます。
正直、現状では使う気になれませんでした。
使い始めました。
本格的に使ってみたい方は、こちらの記事もあわせてどうぞ。
おまけ おすすめLazyloadライブラリ
先述したLazyloadのSEO対策として、Googleは「Intersection Observer API」の使用を推奨しています。
つまり、Intersection Observer API対応のLazyloadライブラリを使えばいいわけです。
おすすめなのがLozad.js。
私の使っているWordPressテーマLuxeritasでも採用されています。
詳しい使い方はこちらの記事をどうぞ。
Google謹製プラグインのようにブラウザで使い分ければいいのでしょうが。
私は当面、lozad.jsで統一しつつ様子を見ます。
まとめ
他のブラウザも対応してくれば実装する意味も出てくるでしょう
その日はきっと遠くないはずです
コメント