lazyloadでWebサイトのパフォーマンスを上げる

lazyloadでWebサイトのパフォーマンスを上げる

  1. lazyloadとは何なのか?
  2. どういったメリットがあるのか?
  3. lazyloadの導入方法

lazyloadとは何なのか?

まず、lazyloadという言葉の意味を考えてみます。

lazyloadを単語別に分けてみると、lazy(ゆっくりな、動きの遅い)、load(読み込む)となります。

『ゆっくりと読み込む』

lazyloadの機能を理解するには、上記の理解でほぼ事足ります。

ですが、理解しただけではいつ、どのような状況で使う必要があるのか判断をすることが難しいので、以下で詳しく説明をします。

・ ・ ・ ・ ・ ・ ・ ・ ・ ・

lazyloadは、基本的にはWebサイト上の画像に対して効果を発揮します。
(※iframeにも効果はありますが、あまり使用頻度が高くないこと、説明が複雑になるのでこの記事では割愛します。)

ユーザーが、google検索などからあなたのWebサイトを発見し、アクセスをします。

アクセスされたあなたのWebサイトは、よほどシンプルなものでない限り、ある程度、縦に長さがあるでしょう。

その縦に長い内容は、ユーザーが使用しているスマートフォンやパソコンの画面内に収まるでしょうか?

当然ながら収まることは稀で、ユーザーは途中で見切れた内容を見るために、画面をスクロールして残りの情報を把握しようとします。

ユーザーがスクロールをしはじめる前、つまり、ユーザーが最初に見る画面(※以下、ファーストビュー)で表示される画像は、仮にページ全体に必要な画像が10個あったとすると、そのうち何個が表示されるでしょうか。

多くても、半分の5つ以内にほとんどが収まるではないでしょうか。

そうなると、残りの半分はファーストビューでは必要のない画像となります。

lazyloadは、ファーストビューでは不要な画像を読み込まずに、ユーザーがスクロールをして、いざ必要となったときに読み込みと表示をする機能です。

・ ・ ・ ・ ・ ・ ・ ・ ・ ・

lazyloadと一言で言っても、導入する方法は複数存在しています。

この記事では、導入が容易でかつ、デメリットの少ない方法をご紹介します。

どういったメリットがあるのか?

どういったメリットがあるのか?

一言で言うと、Webサイトの表示が早くなります。

表示速度はさまざまな理由で変動しますが、一般的なものでもっとも影響力があるのは、Webサイトのデータ量(重さ)です。

そして、そのデータ量の大半を占めるのがjpg、pngなどの画像であるケースが非常に多いです。

lazyloadは、ファーストビューで不必要な画像は読み込まずに、ユーザーのスクロールに合わせて必要となった時点ではじめて個別に読み込みと表示をさせる機能だと前述しました。

不必要な画像データの読み込みがなくなることによって、最初に読み込むWebサイトのデータ量は小さくなり、ファーストビューの表示速度が早くなるのです。

・ ・ ・ ・ ・ ・ ・ ・ ・ ・

普段、意識をしないとピンとこないかもしれないですが、表示速度は、Webサイトにとって非常に重要です。

そもそも、Webサイトが表示されない限りはその間、ユーザーは何も出来ないのです。

つい派手なアニメーションや華やかな動画に目が行きがちですが、ページが中々表示されずにブラウザの戻るボタンを押してしまったことはないでしょうか?

大概は無意識に押していますが、注意深く意識をしてみると、驚くほど戻るボタンを押す回数が多いことに気がつくと思います。

表示されることなくユーザーから離脱されたWebサイトは、何も伝えることができずに、「このサイトは遅い」という印象だけをユーザーへ残すのです。

lazyloadの導入方法

lazyloadの導入方法

ご紹介するlazyloadの導入方法は、非常にシンプルです。

以下に参考例を記します。

<img loading="lazy" src="demo_image.jpg" width="auto" height="auto" alt="デモ画像">

srcの前に、loading="lazy"とあります。

このように、imgタグの中にloading="lazy"を追加するだけで導入は完了です。

分かりやすくするために、srcの前にloading="lazy"を記載をしましたが、imgタグの中であれば、どの位置に追加してもOKです。

・ ・ ・ ・ ・ ・ ・ ・ ・ ・

注意点としては、loading="lazy"はファーストビューで不要な画像の読み込みをしないようにするためのものです。
よって、常にファーストビューで表示される画像などへ導入をしても逆効果となります。

また、対応している端末やブラウザに限りがあります。

ブラウザの対応状況を確認することができるCan I useによると、パソコンではGoogle Chrome、Opera。 モバイルでは、Androidに対応しています。(2020年1月時点)

以上の対応状況から、iPhoneのSafariなどでは導入したとしても動作しませんが、バグなどが起きるわけでなく(lazyloadは動きません)通常通りに動作しますので、対応したブラウザを使用しているユーザーの為に導入しておいて損はありません。
※2020年2月にlazyloadがHTML標準仕様になりました。これによって、Chrome以外でも導入される可能性がグッと高まり

・ ・ ・ ・ ・ ・ ・ ・ ・ ・

他に、JavaScriptのプラグインなどを使用したlazyloadの導入方法もあります。
(※前述した、imgタグに導入する方法のloading="lazy"と併用するとバグになる可能性が高いので、併用は避けてください。)

JavaScriptは、基本的にすべてのブラウザで動作しますが、プログラミングの苦手な方にとって導入の難易度は高く、管理もしづらいといったデメリットがあります。

また、動作が不安定な場合もあり、大概のプラグインが"表示"ではなく"スクロール"によって動作するため、ファーストビューでlazyloadに対応した画像があっても、スクロールするまで表示されないといったデメリットもあります。

・ ・ ・ ・ ・ ・ ・ ・ ・ ・

JavaScriptでのlazyloadと比較して、imgタグに記載するloading="lazy"の唯一のデメリットである、ブラウザの対応状況に関しては現在、全ブラウザに対応する"標準仕様"とするかどうかの議論が行われています。

個人的には、容易に導入できて、Webサイトにとって重要な表示速度に対しての大きな改善も期待できるこの仕様は、最終的には導入されるのではないかと考えています。

現時点でとくにデメリットもないため、ぜひ対応しておきたい施策です。