株式会社ズコーデザイン
かとう
BLOG
pagespeedinsightsで『レンダリングを妨げるリソースの除外』する #3
画像を遅延ロードする
これまでの『CSSを遅延ロードする』や『JavaScript(JS)を遅延ロードする』のような、『レンダリングを妨げるリソースの除外』ではありませんが、loadin="lazy" を使用し、画像が多いページの表示速度を改善する方法を紹介します。
今回使用する loadin="lazy" はSafariの場合、設定を変更しないと機能しない(2021年1月現在)ため、動作を確認する時はChromeまたはFirefoxを使用してください。
また、最新の対応状況は『can i use』から確認してください。
デフォルト
デフォルトの状態では、スクロールしないと見れない位置にある画像でも、関係なく読み込みを開始してしまいます。
なので、ギャラリーのような画像が多いページでは、ページ全体の読み込みに時間がかかってしまいます。
loading="lazy"
loading属性に『lazy』を指定することで、スクロールしないと見れない位置にある画像の読み込みを遅延できます。
ただ、必ず遅延されるわけではなく、少しスクロールすれば見れる位置にある画像などは、これまでどおり読み込まれます。
その他
loading="lazy" は<img>以外にも<iframe>に使用できます。
しかし、<iframe>はFirefoxで機能しないため、引き続きJavaScript(JS)を使用する方法がメインになっています。
次回『YOUTUBEの埋め込みコードを遅延ロードする』でサンプルコードを挙げているので、良ければ参考にしてください。