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

どうもー・ω・ガッチ(@gatchsite)です。

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

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

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

記事の内容はこちら

pagespeed insightsってなに?

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

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

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

オフスクリーン画像とは

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

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

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

off=外
screen=画面

ってことですね。

画像の遅延読み込みとは

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

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

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

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

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

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

プラグインを使用する[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

[

](

)