Railsを使った画像遅延読み込み

画像遅延読み込みとは

遅延読み込みという技術は、Webサイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込むというものです。不必要な画像の読み込みを後回しにして、画像以外のCSSやJSファイルの読み込みが先に行われます。そうすることで、表示速度を速くすることができます。

目的

lazysizesを使用し画像遅延読み込みさせることでWebサイトの表示速度向上を図ります
今回使用するのはlazysizesです。

lazysizes

lazysizesの導入

読み込み

<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js' %>

使い方

下記のように遅延させたいimgタグにclasslazyloadをつけると画像を遅延読み込みし、読み込むとclassがlazyloadからlazyloadedに変わります

data-srcは遅延読み込みさせたい画像パスを入れます

<img data-src="画像パス" class="lazyload">

ここでrailsで image_tagのように使えるようにするためにhelperを作成します

helper作成

    def lazysizes_image_tag(source, options={})
      options['data-src'] = source
      if options[:class].blank?
        options[:class] = "lazyload"
      else
        options[:class] = "lazyload #{options[:class]}"
      end
       image_tag("画像を読み込んでない時の軽い画像", options) + ("<noscript>#{image_tag(source, options)}</noscript>").html_safe
    end

SEO対策

<noscript>を付け足している理由としてはクローラはスクロールしない＝画像が読み込まれないので対象画像がインデックスされません。
そこで<noscript>の中に <img>を入れることでインデックス対象にしています。

呼び出し

<%= lazysizes_image_tag '画像パス' %>

これで画像の遅延読み込みが可能になりました。

　参考記事

jQuery Lazyloadプラグインで遅延読み込み
lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本
noscript内のコンテンツをGoogleは無視するが画像は例外的にインデックスする