#はじめに
「rails環境で作成したサイトが重すぎるからlazyloadを実装して軽くしたい！」
「でもSEO対策としてはlazyloadってダメなんでしょう？」
「どうにかならないの？」
「Lozad.js? .....めっちゃええやん！！」
という男の挑戦である。
##lazyloadとは
スクロールするときに画像を読み込む事で最初のページ表示を軽く早くしようというものだ。
画像を多用したサイトなどで読み込み速度が気になるときにはおすすめ。
しかし問題点もありSEO上あまりよろしくないのだ。
##Intersection Observerとは
これを使うとSEO対策バッチリになるらしい詳しくは自分で調べてね。
https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09
https://qiita.com/yukagil/items/369a9972fd45223677fd
https://qiita.com/yamanoku/items/027308e23cfc69845d7e
しかし問題点は対応していないブラウザもある事である。
しかしpolyfillを使い解決してしまうのだ。
##Lozad.jsとは？
Intersection Observerをベースにしたlazyloadの素晴らしいライブラリである。
このライブラリだ
github公式Lozad.jsページ
このページを読むとわかりやすい
https://qiita.com/yukagil/items/369a9972fd45223677fd
あくまでこの記事はrailsで使用するための補助である。
こちらを参考に進めていく。
まだまだ新しいため英語を解読する場面が多いけど一緒に頑張ろう。
##1、Lozad.jsを読み込む
headタグ内に読み込みを書くだけ
Lozad.jsとpolyfill
<head>
.
.
.
<!-- lazyload関連 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script src="https://polyfill.io/v2/polyfill.min.js? features=IntersectionObserver"></script>
.
.
.
</head>
これでおけ
公式ライブラリのreadmeに書いてあるよ
##2、rails対応する
railsの場合 <%= image_tag ほにゃらら %>的な感じに画像を呼び出すと思うのでこれをhelperでlazyloadな呼び出しに対応させる
具体的には適用したい箇所のhelperに
def lazy_image_tag(source, options={})
options['data-src'] = asset_path(source)
if options[:class].blank?
options[:class] = 'lozad'
else
options[:class] = "lozad #{options[:class]}"
end
image_tag('ダミー.gif', options)
end
こいつを付け足す。ダミー.gifのところは適当な軽い画像を貼っておこう。これがlazyloadで読み込まれる前の画像となる。つまり一瞬は見える。あまり変な画像にはしないように。
このhelperメソッドを使いこれからは画像を呼び出すのだ。
とはいえ今までの<%= image_tag ほにゃらら %>を<%= lazy_image_tag ほにゃらら %>にするだけで今回はおけである。でも構造は理解しておこう。
##3、jsで呼びだそう
めちゃくちゃ簡単である。Lozad.js万歳！！
const observer = lozad();
observer.observe();
これだけ、カスタマイズは自分で調べてね
あぁlazyloadになってるなぁ。。。感動
##4、まとめ
めちゃくちゃ簡単でSEO対策もバッチリ
まだまだ新しいライブラリだけど使いこなそう！！
あと宣伝ですけどよかったら僕の作ったサイトもみてください。
競馬ニュースのまとめサイトです。ウマgleって言います。
http://umagle.com
スマホ版の方がデザイン最近頑張ってます。
##参考記事
https://qiita.com/yukagil/items/369a9972fd45223677fd
https://qiita.com/yamanoku/items/027308e23cfc69845d7e
https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09
お三方ありがとうございます。
##公式githubライブラリ
https://github.com/ApoorvSaxena/lozad.js