Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@yuzoiwasaki

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' などとすれば遅延ロード完了です。

簡単!

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What is going on with this article?