オフスクリーン画像の遅延読み込みとは？3つの改善方法を徹底紹介！

あなたは、「PageSpeed Insights」のオフスクリーン画像の遅延読み込みについて詳しく知っていますか？
「ここだけの話、オフスクリーン画像の遅延読み込みのことがよくわかっていない」
「オフスクリーン画像の遅延読み込みを改善する方法が知りたい！」
そのようなお悩みを持っているあなたに、今回はオフスクリーン画像の遅延読み込みの解説と改善方法について紹介していきます。

ユーザーがWebサイトを見る際の基準として、ページの読み込みスピードは非常に重要な要素の一つです。
この際に、ライバル企業のサイトに負けないように、読み込みスピードを早くする方法を学んでおきましょう。

そもそも「オフスクリーン画像の遅延読み込み」とは？

では、そもそも「オフスクリーン画像」とは、「画像の遅延読み込み」とは、どのようなものなのでしょうか？
いきなり上記の文言だけを耳にしても、まったくわからない人も多いでしょう。
項目に分けて、説明していきます。

オフスクリーン画像とは？

「オフスクリーン画像」とは、名称の通り「スクリーン」が「オフ」の状態のときに表示がされている「画像」ということです。
たとえば、あなたがスマートフォンでWebサイトページを開いたとしましょう。
そのときに、スマートフォンの画面に表示されている画像のほかに、上下にも画像があると思います。
スクロールしていかないと見ることができない画像のことです。
よほど短いWebサイトページでない限り、スマートフォンに1画面のみで完結するページはなかなかないと思います。
よって、オフスクリーン画像はほとんどのWebサイトページに存在することになります。
また、例外として、画像がまったくないWebサイトページというのもあります。
いわゆるテキストだけの説明文のような、論文のようなページです。
その場合、もちろんオフスクリーン画像が存在しないWebサイトページということになるのです。
よって、オフスクリーン画像の遅延読み込みの処理などの方法を実施する必要はないです。
しかし、たいていのWebサイトページには何枚か画像が存在し、スクロールしないと読み進めることができないため、オフスクリーン画像があるということになるでしょう。

「画像の遅延読み込み」とは

「画像の遅延読み込み」とは、「画像」を「遅延」させてでも「読み込み」を行うということです。
しかし、遅延させて画像を読み込みした場合、現在スマートフォンの画面上に表示されていない画像も読み込みをしてしまうことになる。
そうなると、現在スマートフォンの画面上に表示されている画像の読み込みも遅くなってしまうのです。
よって、通常スクロールしていかないとページを読むことができないWebサイトページに対しては、オフスクリーン画像の遅延読み込みの改善方法を実行することが効果的であると言えるでしょう。

．

「オフスクリーン画像の遅延読み込み」の意味

ここまで、「オフスクリーン画像」と「遅延読み込み」の意味を解説していきました。
では、上記2つを合わせた「オフスクリーン画像の遅延読み込み」は何かと言うと、「画面上に表示されていない画像を、先に読み込みをさせないようにする」ということです。

実は、「オフスクリーン画像の遅延読み込み」とは「PageSpeed Insights」というツールで表示される項目の一つなのです。
「PageSpeed Insights」とは何かと言うと、無料で使用できるGoogleのサイトスピードを計測するツールのことです。
あなたはコンピュータやスマートフォンでWebサイトを開くとき、ページの読み込みが遅いとイライラしませんか？
せっかちな人だと、Webサイトページの動作が遅く、読み込みが遅いだけで離脱してしまうこともあるでしょう。
私自身も、読みたいページの更新が遅いとイライラして、何度も更新を押すことが多いです。
サイトスピードとは、ユーザーが開いているスクリーンに表示されている画像のみを読み込む処理のことを言います。
「PageSpeed Insights」というツールを使用して、オフスクリーン画像の遅延読み込みの処理を行うのは、サイト全体の容量が大きいときです。
オフスクリーン画像の遅延読み込みの処理を行うことで、一番最初にサイトを開いて読み込む際のファイル容量が減るのです。
結果的にサイトの読み込みが早くなるということです。

オフスクリーン画像の遅延読み込みのデメリット

「PageSpeed Insights」というツールを使用して、オフスクリーン画像の遅延読み込みの処理を行うと、Webサイトページの読み込みが早くなることがわかりました。
そうであれば、ページの読み込みを早くするために、毎回オフスクリーン画像の遅延読み込みを行ったほうが良いと感じるでしょう。
しかし、オフスクリーン画像の遅延読み込みにもデメリットが存在します。
それは、何度もオフスクリーン画像の遅延読み込みの処理をすると、逆にサイトスピードが遅くなってしまうということです。
自分自身もサイトスピードが遅くないかと不安を感じて、必要以上にオフスクリーン画像の遅延読み込みをしてしまっていたのですが、逆効果になるという事実を知ってショックでした。
無理やりオフスクリーン画像の遅延読み込み処理をするのではなく、必要な時にのみ行うことが大事だということです。

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

ここまで、オフスクリーン画像の遅延読み込みのデメリットを述べてきました。

それでは、どのような改善策があるのでしょうか？
ここでは、3つの改善方法を説明していきます。
どのような画像、動画を遅延読み込みしたいのかといった目的や、設定する際にどのくらい難しいのかといった難易度を考慮して、自分に合ったベストな方法を選択していきましょう。

①プラグインを使用する（ワードプレスで作成されたWebサイトページのみ有効）

まずは、ワードプレスのプラグインの中から遅延読み込みの処理を実行する方法を紹介します。
この方法のデメリットとしては、前述の通り、ワードプレスで制作されたWebサイトページでしか実行できないことです。
主要なプラグインには3つの種類があります。
①a3 Lazy Load
1つ目のa3 Lazy Loadというプラグインでは、動画をたびたび遅延読み込みで設定したいというときに使用します。
②Lazy Load
2つ目のLazy Loadというプラグインでは、オフスクリーン画像の遅延読み込みを急ぎで緊急で実行したい方向けのものです。
③EWWWW Image Optimizer
3つ目のプラグインはEWWWW Image Optimizerです。
こちらはオフスクリーン画像の遅延読み込みと同時に、画像の圧縮も実行したいというときに使用します。
つまり、動画を貼っているWebサイトページは①のa3 Lazy Loadを使用すべきです。
また、画像の容量が大きく、動作を軽くしたい方は③のEWWWW Image Optimizerがおすすめです。

プラグインをインストールする際の注意点としては、phpのバージョンを確認することです。
もし、あなたが10年ほど前にワードプレスで制作したWebサイトにプラグインをインストールする場合、phpのバージョンが合っていない恐れがあるからです。
万が一、phpのバージョンが古いまま、新しいプラグインをインストールすると、Webサイトが反映せずに表示がまったくされなくなるというリスクがあります。
プラグインをインストールするときは、必ずphpのバージョンが古いままになっていないかを確認してから実行するようにしましょう。

②jQueryライブラリを使用する

次は、jQueryのライブラリを使用するという方法です。
上記で紹介したプラグインをインストールする方法では、ワードプレスで作成されたWebサイトにしか適用できませんでした。
しかし、今回のjQueryのライブラリを使用する方法だと、ワードプレス以外で作成されたWebサイトや０から自分で作成したWebサイトにも適用されます。

手順としては下記のような流れになります。
①まず、はじめにjQuery.lazylpad.jsをダウンロードしてインストール

https://github.com/tuupola/lazyload

②続いて、bodyの終了タグ直前に、scriptタグを配置

$(function () {

  $(‘img.lazyload’).lazyload()

})

この作業の目的は、jQueryとlazyloadを読み込むことです。

③scriptタグを配置が完了したら、imgタグを書き換える

< img class=”lazyload” data-src=”img/○○.jpg” />
上記のように、細かいステップでタグを書き換えるという作業が発生します。
コードを普段から書き慣れていない人にとっては、意外と骨が折れる作業だと思います。
だからこそ、無理をせずに専門の技術者へ依頼するのも1つの方法かと思います。
注意点として、1つでも必要なタグが入っていなかったり、逆に絶対に必要なタグを1つでも削除してしまうと、まったく動かなくなっていまいます。
しかも、正常な状態に戻すこともひと苦労なのです。
こういった慣れない作業をする必要があるということが、注意点の1つ目としてあげられます。

また、注意点の2つ目としては、Webサイトページに画像を多く貼られていると、ライブラリを読み込むときに、関数を何回も呼び起こす必要が発生するので、結果的に表示スピードが遅くなってしまうことです。
どうせなら、改善方法を実行したら、きちんと表示スピードが早くなってほしいと思うでしょう。
よって、今回のjQueryライブラリを使用する方法は、Webサイトページに画像が比較的少ないときに実行するのがおすすめです。

実際は、そこまで考慮しすぎるほど重大な問題ではないのですが、もしうまくいかないことがあった場合に思い出していただければと思います。

③ jQueryに依存しないライブラリを使用する

続いては、jQueryに依存しないライブラリを使用する方法です。
これまで紹介した①「プラグインをインストールする方法（ワードプレスのみ）」と②「jQueryライブラリを使用する方法（ワードプレス以外）」の方法だけで十分ではないかと思うでしょう。
しかし、この3つ目の、jQueryに依存しないライブラリを使用する方法というのは、jQueryよりも軽やかにスピーディーに動作することができるものを使うという方法なのです。
下記、3つの項目に分けて説明していきましょう。

①lazysizes.js

このlazysizes.jsは、拡張機能が非常に多いことが特徴としてあげられます。
また、画像のほかにも、iframe、ウィジェットといったものに対しても遅延読み込み処理ができるというのも強みの1つでしょう。

②lozad.js

続いては、lozad.jsというものです。

こちらは、プログラミング言語が理解できていないような初心者でも非常に使いやすいものとなっています。
なぜなら、とても記述が少ないからです。
コードを書くのが苦手な方にはもってこいでしょう。

③echo.js

最後は、echo.jsというライブラリです。
こちらは、ファイル自体が非常に軽いという特徴があります。
よって、表示スピードを今以上にもっと早くしたい、という方におすすめのライブラリとなっています。

上記のように、jQuery以外にも多くのライブラリが存在します。
ぜひ、今まで知らなかったライブラリでも、自分に合ったお気に入りのものが見つかったら試してみるのも良いでしょう。

まとめ

いかがでしたか？

今回は、オフスクリーン画像の遅延読み込みについて、改善方法を含めて詳しく解説していきました。
あなたが、ユーザーとしてWebサイトページを訪れた際、サイトが早く表示されるかという観点は重視すると思います。
同様に、世間一般のユーザーも読みやすいサイト＝表示速度が早いサイトというイメージを抱いています。

今回紹介した改善方法を実行して、あなたのWebサイトページも読みやすい、表示スピードの速いページにしていきましょう。