Page speed insightで要改善項目に上がる「オフスクリーン画像の遅延読み込み」について対応をどうしようか考えていたのですが、最近のChromeは読み込み遅延に対応していました…というお話。
今まではサイト側がJQuery等のプラグインを実装して遅延読込みに対応する事が多かったと思いますが、ブラウザ機能に合わせる事でそれらが不要になります。
loading属性には3つの値があります。
さらにloading属性が未定義の場合でもloading=autoを定義した場合と同じ扱いに。
つまり、HTML等はそのままでも画像やiframeの要素は読み込み遅延されます。
繰り返しになりますが、ユーザーがChromeにライトモードを設定している事が大前提です。
しかし実際に記事に貼った画像については、<img>タグに都度loading属性を追加する必要がありそうなので、簡単には実装出来ないと思います。
何れにしても将来的に<img>,<iframe>タグの遅延読込みは、ブラウザ側に委ねる事になりそうですし、今後はChrome以外でも対応するブラウザが増えて来るかも知れません。
以上
参照:
https://web.dev/native-lazy-loading/
https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html
Chromeによる遅延読込み（Lazy-Load）対応
2019年リリースのChrome76 から実装され、<img>や<iframe>の要素にloading属性が新たに追加され遅延読込みが可能となっている様です。今まではサイト側がJQuery等のプラグインを実装して遅延読込みに対応する事が多かったと思いますが、ブラウザ機能に合わせる事でそれらが不要になります。
PC版ChromeのLazy-Load
HTMLの<img>と<iframe>タグにloading=[値]を追加するだけ。loading属性には3つの値があります。
- lazy : 遅延ロードに適した値です。
- eager : 遅延ロードには適してません、すぐにロードする値です。
- auto : 遅延ロードするかどうかをブラウザに委ねます。通信速度に影響するような事も言われていますがよくわかりません。
Android版ChromeのLazy-load
PC版の更に進化版と言うか…<img>,<iframe>のloading属性がautoのページをライトモードを設定したAndroid版Chromeでブラウズすると自動で画像やiframeが読み込み遅延で処理されます。さらにloading属性が未定義の場合でもloading=autoを定義した場合と同じ扱いに。
つまり、HTML等はそのままでも画像やiframeの要素は読み込み遅延されます。
繰り返しになりますが、ユーザーがChromeにライトモードを設定している事が大前提です。
Bloggerは対応出来るか？
とりあえず出来ると思いますが、使っているテーマ（テンプレート）の<img>,<iframe>タグを探して、全てにloading='lazy'を追加すれば可能かと。しかし実際に記事に貼った画像については、<img>タグに都度loading属性を追加する必要がありそうなので、簡単には実装出来ないと思います。
何れにしても将来的に<img>,<iframe>タグの遅延読込みは、ブラウザ側に委ねる事になりそうですし、今後はChrome以外でも対応するブラウザが増えて来るかも知れません。
以上
参照:
https://web.dev/native-lazy-loading/
https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html
コメント