画像データも圧縮したし、キャッシュ系のプラグインも追加したけど、他にもやれることはあるのかな？
画像データの圧縮、キャッシュ機能の追加、不要なCSSの削除以外にも、Lazy Load（レイジーロード）というサイトスピードを改善する方法があります。
Lazyは英語で「動きがのろい」という意味なので、ウェブサイトの表示速度を上げる技術と関係ないように思えますが、有効な改善策のひとつです。
この記事では、Lazy Lordの概要と使い方について解説していきます。遅滞読込を活用してウェブサイトの表示速度を改善したい方の参考になれば幸いです。
なお、サイトスピードの重要性について詳しく知りたい方は、こちらの記事もご覧ください。
目 次
なぜ、Lazy Loadでサイトスピードが改善されるのか？
Lazy Lordとは、ユーザーがウェブサイトのコンテンツを利用する際に、それが必要になるまで、データの読み込みを遅らせる技術のことです。日本語では「遅滞読込」と訳されています。
例えば、スマートフォンから記事にアクセスしたとき、一番最初に見るページ以外の画像は急速に読み取る必要はありません。
むしろ、ページ全体の画像データを一度に表示させようとすれば、その瞬間にサイトスピードが遅くなってしまいます。
そこで、Lazy Loadをウェブサイトを実装すれば、ユーザーが最初に見るページを優先して読み込み、一定時間内の余分な転送量を節約できるので、表示速度を上げることができるのです。
次の画像はLazy Loadを使った場合とそうではない場合を比較したものです。参考までにご覧ください。
Lazy Loadの使い方
それでは、Lazy Loadを自分のウェブサイトに導入するには、具体的にどうすればよいのでしょうか？ ここでは、Lazy Loadの使い方を2種類に分けて説明していきます。
方法1 専用のプログラムをコーディングする
第一に、GitHubなどのオープンソースにアップロードされているLazy Load専用のプログラムをウェブサイトにコーディングする方法があります。
エンジニアのミカ・ツポラ氏が公開したLazy Loadのプログラムをダウンロードしたい方はこちらをクリックしてください。
ダウンロードした後は、ヘッダー或いはボディ内にプログラムを読み込み、Lazy Loadの要件を定める各コードを記述していきます。具体的には、以下の順序で設定することができます。
STEP1 scriptタグを設定する
ステップ１は、Lazy Loadのプログラムを読み込むためのscriptタグをウェブサイトのヘッダー内に設置します。記述する箇所は、head内が基本です。
<script src=”https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js”></script>
STEP2 imgタグを設定する
ステップ2は、imgタグを設定します。なお、Lazy Loadは遅滞読込の対象となる画像のURLがdata-src属性であることを前提としています。
もし、src属性を含んでいる場合は【src = ” img / example-thumb.jpg ” 】を追加してください。
<img class=”lazyload” data-src=”img/example.jpg” width=”765″ height=”574″ />
STEP3 scriptタグでLazy Loadの関数を設定する
STEP1とSTEP1が終わったら、最後にscriptタグでLazy Loadを適用する範囲を設定します。配置場所はbodyタグの末尾あたりでよいでしょう。
<script>lazyload();</script>
Lazy Loadを反映させる対象を限定する場合は、（）に指定のコードを追加します。詳細はGithubの説明を参照してください。
方法2 WordPressのプラグインを使う
とはいえ、プログラミングの素人からすれば、上記の手順は難しく感じると思います。
特に、コーディングはサイト全体の設計に関わる重要な役割を担っているので失敗すれば大きな損失が発生します。
そこで、もしWordPressでウェブサイトを作成しているのなら、Lazy Load専用のプラグイン「BJ Lazy Load」を使いましょう！
STEP1 BJ Lazy Loadをインストールする
まずは、プラグインの新規追加から「BJ Lazy Load」をインストールして「有効化」しましょう。
STEP2 適用範囲を設定する
プラグインを有効化したら、WordPressの管理画面にある設定から「BJ Lazy Load」の適用範囲を決定しましょう。次の表に項目ごとの特徴と注意点をまとめていますので、確認してみてください。
| 項 目 | 説 明 |
| Apply to content | Lazy Loadを 「ウェブサイトの画像」に適用することを指しています。ここの項目をYesにしないと、Lazy Loadが機能しないので注意しましょう。 |
| Apply to text widgets | Lazy Loadを 「テキストウィジェットの画像」に反映することを意味しています。サイドバーやフッターにテキストウィジェットで画像を挿入している方は「Yes」で設定しましょう。 |
| Apply to thumbnails | 「サムネイル画像」の読み込みを遅らせる設定です。例えば、アイキャッチ画像などが対象となります。 |
| Apply to gravatars | プロフィール画像などグラバターで設定した画像の適用に関する設定です。 |
| Apply to image | 記事内に挿入した画像の設定のことです。この項目をYesにしないと、 Lazy Loadが記事内にアップロードした写真データに反映されないので注意しましょう！ |
| Apply to iframes | SNSやアフィリエイトのURL（リンク先ページの内容）をインラインフレームで表示した内容にLazy Loadを反映する場合は「Yes」にしてください。 |
その他の項目に関してはデフォルトのままで問題ありません。たったこれだけでLazy Loadをウェブサイトに導入することができます。
SEOに悪影響があるって本当？
ただし、Lazy LoadはSEOに悪影響を及ぼすかもしれないといわれています。
具体的には、Google botがLazy Loadを適用した画像などのデータを正確に読み取れない場合があります。すなわち、コンテンツがインデックス化された際に、遅れて読み込まれるデータはないものとして扱われる可能性があるのです。
これは人の目でコンテンツを確認するだけでは気が付かない大きなリスクです。
Googleのジョン・ミューラー氏によれば、Lazy LoadのGoogle botに対する影響を防止ものとして、<noscript>タグに画像のコードを記述する方法を挙げています。
通常、Google botは隠しテキストなどのスパム防止のために<noscript>タグの情報は無視するのですが、<img>は例外とのことです。
なお、コーディングが苦手な方は <noscript>タグ に対応している「a3 Lazy Load」というプラグインを使うのをおすすめします。使用方法については、改めて記事を作成する予定です。
Lazy Loadでサイトスピードを最適化
ウェブサイトにアクセスする人たちにとって、サイトスピードは利便性に関わる重要な指標です。
今回の記事で紹介したLazy Loadを正しく導入すれば、表示速度が大幅に改善する可能性があります。
骨の折れる作業ですが、アクセス数やCVRを増やすためには地道な作業が不可欠です。自分が運営するHPの問題を少しずつ解決して、ユーザーの使いやすいサイトを作りましょう！
