imgixで遅延ロードを実装してみる

最近 PageSpeed Insights を試したら、ものすごく低い点数が出て悲しかったのですが、その時に画像を遅延ロードさせるといいと出ていたのでやってみました。

自分が関わっているサービスは画像の表示にimgixを使っているので、まずはimgixが対応しているかの調査から行いました。

対応してそうです。
https://blog.imgix.com/2016/05/02/imgix-lazysizes

やったことは大きく分けて以下の二つになります。

• 遅延ロード用ライブラリの導入
• 遅延ロード用にタグを調整するヘルパーメソッドの作成

ちなみに、今回遅延ロードを導入したサービスはRailsで作られています。

遅延ロード用ライブラリの導入

ライブラリ自体はいろいろあるようですが、上の記事で lazysizes が紹介されていたのでそちらを使わせていただきました。
https://github.com/aFarkas/lazysizes

これを vendor/assets/javascripts/lazysizes.min.js に置いて、全てのページで呼ばれる共通ヘッダー内で読み込むようにしました。

app/views/application/_head.html.slim

= javascript_include_tag 'lazysizes.min.js'

遅延ロード用にタグを調整するヘルパーメソッドの作成

imgixで遅延ロードさせる時も lazyload クラスをあて、 data- 属性をつけてあげれば良いそうなので、その通りに実装していきます。

これを

<img
  srcset="https://assets.imgix.net/unsplash/jellyfish.jpg?w=480&h=240&fit=crop&crop=entropy 480w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy 640w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=1024&h=512&fit=crop&crop=entropy 1024w"
  src="https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy"
  sizes="(min-width: 640px) 50vw, 100vw"
>

こうする

<img
  data-srcset="https://assets.imgix.net/unsplash/jellyfish.jpg?w=480&h=240&fit=crop&crop=entropy 480w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy 640w,
          https://assets.imgix.net/unsplash/jellyfish.jpg?w=1024&h=512&fit=crop&crop=entropy 1024w"
  data-src="https://assets.imgix.net/unsplash/jellyfish.jpg?w=640&h=320&fit=crop&crop=entropy"
  data-sizes="(min-width: 640px) 50vw, 100vw"
  class="lazyload"
>

imgixでは通常 ix_image_tag というタグヘルパーを使うので、こいつを拡張させて遅延ロードに対応できるようにしました。オプションで渡して分岐させても良かったのですが、影響範囲を狭めて試したかったので、遅延ロード用に別メソッドを作成しました。

config/initializers/imgix.rb

def ix_lazy_image_tag(*args)
  return if args[0].blank?
  args[1] = {} if args[1].blank?
			
  if args[1][:tag_options] && args[1][:tag_options][:class]
    args[1][:tag_options][:class] = [args[1][:tag_options][:class], 'lazyload'].join(' ')
  elsif args[1][:tag_options]
    args[1][:tag_options][:class] = 'lazyload'
  else
    args[1][:tag_options] = { class: 'lazyload' }
  end
			
  output_tag = ix_image_tag(*args)
  output_tag.gsub(/srcset|src|sizes/) { |tag| "data-#{tag}" }
            .html_safe
end

あとは遅延ロードさせたい箇所で = ix_lazy_image_tag 'foo.png' などとすれば遅延ロード完了です。

簡単！