Help us understand the problem. What is going on with this article?

lazysizesでRails画像遅延読み込み

More than 1 year has passed since last update.

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

画像遅延読み込みとは

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

https://alaki.co.jp/blog/?p=2527

目的

lazysizesを使用し画像遅延読み込みさせることでWebサイトの表示速度向上を図ります
今回使用するのはlazysizesです。
スクリーンショット 2019-10-28 1.48.00.png

lazysizes

lazysizesの導入

読み込み

app/views/layouts/application.html.erb
<%= 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作成

app/helpers/application_helper.rb
    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は無視するが画像は例外的にインデックスする

takaHAL
新卒1年目
brides-a-tm
『一組でも多くのカップルに “理想の結婚式”のきっかけを』の使命の元、花嫁の理想(ユメ)を叶えるサービス「ハナユメ」「HIMARI」「ハナユメウエディングデスク」を運営しています。
http://brides.a-tm.co.jp/
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