This post is Private. Only a writer or those who know its URL can access this post.

lazyloadとは

https://oxynotes.com/?p=10810

  • webサイトに表示される画像を一度に読み込まず、必要な分だけ読み込む。
  • 不必要な画像の読み込みを後回しにして、画像以外のCSSやJSファイルを先に読み込むので、表示速度を速くすることができる。

    • layloadなし
      • 【※参考URLは長田に聞いてください】
      • 読み込み時間:3.341s
    • layloadあり
      • 【※参考URLは長田に聞いてください】
      • 読み込み時間:2.460s
  • ものによってはbotを判別してlazyloadしないようにしているからSEO上の問題はない。

  • chromeは標準機能として搭載予定(本当は現在のバージョンでサポートされるはずだった)

実装方法

ライブラリを使用
https://github.com/aFarkas/lazysizes

<img class="lazyload" data-src="/img/img_index_1.jpg" alt="">
  • 画像の描画が必要になったら、data-srcsrcに変更して画像を読み込む。

chrome標準仕様

<img loading="lazy" src="/img/img_index_1.jpg" alt="">
  • 初回描画時にすべての画像から2.0KBだけ読み込み、画像のサイズを取得する。
  • 取得したサイズのplaceholderを設置しておき、画像の描画が必要になったら置き換える。

懸念点

【※参考URLは長田に聞いてください】

  • 必用なタイミングで画像を読み込むため、3G回線とかだと表示されない時間が長くなる。
  • 回線が早くても、スクロールするそくどによってはちらつきが生まれる。
  • 2回目以降の描画でキャッシュが効いていても、ちらつく。

どの画像をLazyloadにするかは要相談

  • どの画像をlazyloadにするかは結構悩む。
  • 以下の様な分類?明確な基準があれば知りたい…。

すべき画像

  • ブログやニュースなど、読み物系のコンテンツ
  • 装飾的な画像

すべきでない画像

  • メインビジュアル
  • 画像ギャラリーなど主要コンテンツ
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.