画像を遅延ロードする

モバイル向けWebアプリではレスポンススピードがものすごく重要だ。なかなか開かないWebサイトってイライラするもんね・・・。
レスポンスが遅くなる要因は色々あるが、その中のひとつに画像関連がある。

• 画像サイズをキッチリ決め打つ
• 画像の最適化をする
• 画像を遅延ロードする

今回は画像の遅延ロードをやってみた。

遅延ロードってどういうことだっけ？

「初期表示で必要なところ以外はあとでロードする」
つまり、スクロールしないと見えない画像はその部分が表示されるタイミングで表示して、初期表示時に余計な読み込みをしないですばやく表示しようということ。

jQuery Lazyload

jQuery Lazyloadを使うとものすごく簡単にできる。

<img src="image1.png" alt="画像だよ" />

これを

<img class="lazy" src="dummy.gif" data-original="image1.png" alt="画像だよ" />

こうして

$("img.lazy").lazyload();

こうするだけで遅延ロードが実現できる。

Rails用ヘルパーを作る

Rails の場合

= image_tag 'image1.png', alt: '画像だよ'

こんな感じになっていると思う。
同じノリでヘルパーを作ってみる

def lazy_image_tag(source, options={})
  options['data-original'] = asset_path(source)
  if options[:class].blank?
    options[:class] = 'lazy'
  else
    options[:class] = "lazy #{options[:class]}"
  end

  image_tag('dummy.gif', options)
end

= lazy_image_tag 'image1.png', alt: '画像だよ'

という具合に同じノリで使える。

まとめ

• 遅延ロード簡単
• 調子に乗って全部の画像やると初期表示が死ぬほどダサくなったりする
• ダミー画像はものすごくサイズが小さい画像かくるくる画像が素敵