オフスクリーン画像の遅延読み込み対策でサイトを高速化する方法[lazysizes.js]

どうもー・ω・ガッチ（@gatchsite）です。

pagespeed insights を使ったサイトのパフォーマンスチェックは一般的になりました。

ただ、出された結果から具体的に何をやったりいのか？分からないない方も多いのではないかと思います。

今回は、その項目の１つである「オフスクリーン画像の遅延読み込み」について、まとめています。

記事の内容はこちら

pagespeed insights ってなに？

pagespeed insights は、google が提供してくれている無料のサイトチェックツールです。 特に速度について検証項目がはっきりしているため、結果から何が良く何が悪いか一目で分かるようになっています。

近年ではモバイルファーストな SEO 対策が有効であるとなっているため、「pagespeed insights」で高評価を得ているサイトは順位が上がる可能性が高いと言われています。

【pagespeed insights】

https://developers.google.com/speed/pagespeed/insights/

オフスクリーン画像とは

結果に示される項目は様々ですが、フロントエンド周り（JavasSript）が苦手なサイトである場合、改善できる項目の一番上に「オフスクリーン画像の遅延読み込み」が表示されることは多いのではないかと思います。

で、「オフスクリーン画像」ってなに？？となるかと思います。。。

簡単に言うと、画面外に表示されている画像のことです。ほとんどの WEB サイトのページは縦にスクロールして、画面よりも長いページです。 画面からはみ出た画像のことをオフスクリーン画像と呼ぶようです。

off=外 screen=画面

ってことですね。

画像の遅延読み込みとは

では、もう１つの「遅延読み込み」って？となるかと思います。 これは、画面外の画像は表示されないんだし、画像が画面の中に入った時に読み込めば良いんじゃない？ってことを言ってます。

要は、見える部分の画像だけ読み込んで、早くページを表示しよう。ってことです。

「遅延読み込み」を実施した場合、 画面内の画像のみ読み込んでくれば良いので、読み込む画像は少なくなります。これによってサイトを早く表示することができます。

画像を 100 枚表示するページがあるとして、100 枚読み込むのを待っているより、1 枚だけ読み込んだほうが早い感じしますよね？

オフスクリーン画像の遅延読み込みの対策方法

では、本題に入って、具体的な方法を３つほどまとめました。 考え方や、言葉がわかっても具体的なやり方が分からないと、結局サイトは早くならないですからね。

プラグインを使用する[wordpress]

wordpress を使用している場合は、プラグインがあるので、プラグインをインストールして有効化するだけで OK です。有名なプラグインなので、「wordpress 画像遅延読み込み」でググると出てくるのではないかと思います。

【wordpress plugin lazy load】

https://wordpress.org/plugins/lazy-load/

jquery.lazyload.js を使用する[jQuery プラグイン]

jQuery のプラグインである「jquery.lazyload.js」を使っているサイトは多いです。 スタンダード的なプラグインかもしれないですね。特に昔から運営されているサイトに多くみられます。

使い方も簡単で、jQuery とプラグインを読み込んで以下のコードを実行するだけです。

$(function () {
  $('img.lazyload').lazyload()
})

img タグの書き方が少し違うので、ここも忘れずにやってください。しなかった場合、遅延読み込みはされずに普通に表示されるだけになってしまいます。

<img class="lazyload" data-src="img/example.jpg" />

【jquery.lazyload.js】

https://github.com/tuupola/jquery_lazyload

lazysizes.js を使用する[軽量な js ライブラリ]

jQuery を必要としない軽量なライブラリ「lazysizes.js」を使用しても遅延読み込みを行えます。スライドショーショーやレスポンシブにも対応しているようで、高機能なのも良い点です。

僕もこのライブラリーを使って画像遅延読み込みを実現させました。

【lazysizes.js】

https://github.com/aFarkas/lazysizes

lazysizes.js の使い方

基本的な使い方は、jquery.lazyload.js と同じです。 プラグインを読み込み、img タグのクラスに「lazyload」を記載し、src を data-src に変更するだけです。

lazysizes.js のインストール

ここでは npm を使った方法をまとめています。

npm install lazysizes --save

lazysizes.js の読み込み

npm の場合は、webpack などのコンパイルを行うことが前提のため、読み混みは、import 文を使用しています。

import lazySizes from 'lazysizes';

lazysizes.js の実行

ここが書いていなかったので、読み込んだのに実行されない。。。と言う方は試してみてください。

lazySizes.init();

html で読み込む対応の lazysizes.js では読み込みと同時に実行してくれるんですが、npm の場合は実行してくれません。 init 関数を実行することで画像の遅延読み込みを行ってくれるます。

まとめ

オフスクリーン画像の遅延読み込みについて、言葉の意味や何をしたら良いのか？具体的な方法などをまとめましたが、どうだったでしょうか？ 他にも知りたいことやらからないことがあれば、Twitter まで連絡いただければと思います。

Twitter はこちら ⇒ @gatchsite

関連の記事を読んでみる

スクロール画面内に入ったらアニメーションさせる[たった13行で実装]

静的サイトは無料で爆速にできるらしい#Hugo[wordpress辞めよ]

cssでフェードインアニメーションの実装方法[コピペサンプルあり]

オフスクリーン画像の遅延読み込み対策でサイトを高速化する方法[lazysizes.js]

CSSだけでレスポンシブ対応したサイトを作る考え方とルール[flexboxを理解しよう]

WEB制作