imgやiframeのlazy loading設定で画像や動画、SNSの埋め込みを遅延ロード

レンダリング処理でサーバとのデータのやり取りが行われる中で、Webブラウザに表示されるまでの時間をなるべく速くすることで、ユーザー体験としてもSEOとしても最適なWebページと言えるでしょう。

読み込みが多く必要な文書構造である場合、特に大きな画像や動画、SNS等の埋め込みがたくさんあるWebページですと、どうしても表示速度が遅くなってしまいます。

表示速度を速くする方法としてはいくつかありますが、ここではimgやiframe要素にloading属性を設定して、読み込みをコントロールしていく方法をご紹介します。

loading属性では、オフスクリーン（見えない領域）のimgやiframe要素のダウンロードをコントロールし、遅延ロードしてWebページのレンダリング処理を高速化させることができます。

気になるWebブラウザの対応ですが、
2022年3月現在では、Google ChromeやMicrosoft Edge、Firefox、Safariといった主要ブラウザでサポートされています。

Can I use（lazy loading）
https://caniuse.com/#search=loading

Firefoxはimg要素のみサポートしています。

loading属性では、3つの値を設定するこができます。

loading=”lazy”: 読み込みの遅延をさせる
loading=”eager”: すぐにコンテンツを読み込む
loading=”auto”: ブラウザが遅延読み込みさせるかを判断する

今回は読み込みを遅延させますので、「lazy」を設定します。

大量の画像の読み込みや埋め込みコンテンツが必要なサイトでは、Webページのレンダリングをコントロールすることで、表示速度の向上につなげることができます。

それでは見ていきましょう。

loading属性で遅延ロード

loading属性の利用はとても簡単で、imgやiframe要素にloading属性を設定するだけになります。

iframe要素

imgの遅延読み込み

昨今の画像の読み込み方法として、
Webブラウザに対応しているフォーマットの画像の読み込みや、レスポンシブWebデザイン対応での、PCやタブレット端末、スマートフォンのデバイス幅での画像切り替えで利用する、picture要素を活用した例で見ていきます。

以下、サンプルコードです。

HTML

<picture>
  <source media="(max-width: 767px)" srcset="images/sample_sp.webp" type="image/webp">
  <source media="(max-width: 767px)" srcset="images/sample_sp.jpg" type="image/jpeg">
  <source srcset="images/sample.webp" type="image/webp">
  <img src="images/sample.jpg" alt="サンプル画像" loading="lazy">
</picture>

ちなみに、img要素に「loading=”lazy”」が設定されていれば、Webブラウザが対応しているとして読み込まれる、source要素のWebP画像も遅延読み込みが有効になります。
他、AVIFやJPEG XL等の画像フォーマットでも、同じようにsource要素で設定が適応されても、img要素のloading属性は有効となります。

レスポンシブWebデザイン対応での画像の切り替えや、いろんな画像フォーマットの設定については、以下の記事等でご紹介しています。

HTMLのpicture要素、source要素でPCとスマホの画像を切り替える

WebP（ウェッピー）を利用して画像を軽量化する

劣化が少なく画像を軽量化できる画像フォーマット「AVIF」の利用

HTMLのpicture要素で最新の画像フォーマット「JPEG XL（.jxl）」を扱う

HEIC形式の画像ファイルをWebページで扱う方法

iframeの遅延読み込み

YouTube動画の埋め込みを例に見ていきます。
YouTubeでは、iframeの埋め込みコードを取得してきて貼り付けます。

WordPressではURLを貼り付けるだけで表示される仕様になっていますが、loading属性を利用するのであればiframeの埋め込みに合わせていただくと良いかもしれません。プラグインなどを使ってもいいですが、プラグインの使いすぎもWebサイトのパフォーマンスに影響しますので。

サンプルでは、3つの動画のうち、2つ目の動画だけにloading属性を設定してみました。

HTML

<section>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/SO616IlW1Mg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
  <iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/0zYu5IA37pQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/eWBaa9eQc3Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

実際のロードがこちら。
サンプルでは、読み込む要素が少なく遅延ロードが分かりにくいので、スローモーションのgifアニメで確認してみます。