loading="lazy"で読み込み速度を向上させる

はじめに

学んだことを忘れないように備忘録として残しています

loading="lazyとは

loading="lazy" は、HTMLで画像やiframe要素に設定できる属性で、遅延読み込みを指定するためのものです。

遅延読み込みとは、ページ全体を一度に読み込むのではなく、ユーザーがで必要とするタイミングで画像やiframeなどを読み込む方法で、これによって初回ロード時の読み込み量が減り、ページ表示が速くなります。

メリットとデメリット

メリット

• ページの読み込み速度が向上
  遅延読み込みすることで、初回ロード時の読み込み量が減り、ページ表示が速くなります。特に画像が多いページで効果的です。

• SEOへの影響
  Googleの検索エンジンはloading=lazyを推奨しており、SEOに悪影響を与えません

デメリット

• 画像の遅延読み込みをすることに伴って、ページに含まれる要素がずれることもあり、これによって検索エンジンから低評価を受ける

• ファーストビューには適さない
  画面を開いた際に最初に見える画像はは早急に読み込むべきなので、遅延読み込みはしないほうが良いです。

コーディング例

【imgでの使用例】

<img src="" alt="サンプル" width="100" height="100" class="sample" loading="lazy">

【iframeでの使用例】
<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!..." 
    width="600" 
    height="450" 
    loading="lazy">
</iframe>

使用すべき箇所

• 画像が多いページ
  ページ下部やスクロールしないと見えない画像。

• iframe
  GoogleMapsやYouTube動画の埋め込み。

• ブログ記事内の画像
  記事が長い場合、下部の画像に設定すると効果的。

まとめ

loading="lazy" は、画像やiframeの遅延読み込みを実現する便利な属性で、ページの表示速度向上に役立ちます。
ただし、すべてのリソースに適用すればよいわけではなく、ファーストビューの重要な画像には適用せず、ページ下部やスクロールしないと見えない箇所に活用するのがポイントです。