画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで

[coliss]

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した実装方法。

[fukken]

遅延読み込みはクライアントサイドのパフォーマンスやサーバー側の負荷の問題なので、大多数のクライアントがOKならばそれで良い=古いブラウザでは有効でなくても破綻さえしなければいい、のが導入しやすいところ。

[kijtra]

サーチコンソールのスコア取るんなら遅延もいいけどWebPにしないと点数上がらない。

[spark7]

変なポリフィルはしないが吉。

[radicode]

[]おはようございます😌 寒くなると動きが遅くなっちゃいます🐌 ウェブサイトの表示速度は速ければ速いほどいいですよね。 画像の遅延読込を最大限発揮するための方法の紹介です💪

[gabuchan]

やっていき

[maecchi]

画像の遅延読み込み方法も以前と比べるとだいぶ進化したなあ

[nakayuki805]

低速時のモバイル回線など通信速度が遅いとき、遅延読み込みでは間に合わずイライラすることあるから 低速時は早めに読み込みする賢い遅延読み込みがあるといいな

[tk_musik]

んー、画像は最初にロードしきって。ページ長くしないで(無限スクロールやめて)。遅いのは画像のせいでなく広告とトラッキングでしょ？そっちを遅延して。

[respectbookmark]

遅延読み込みは必ずしもユーザビリティの向上の寄与しない。なにをもってパフォーマンス向上とするか？のユーザー目線で決めることが重要。