Lazy Loadの使い方【WordPressの利用者必見】

ライオンくん

画像データも圧縮したし、キャッシュ系のプラグインも追加したけど、他にもやれることはあるのかな？

画像データの圧縮、キャッシュ機能の追加、不要なCSSの削除以外にも、Lazy Load（レイジーロード）というサイトスピードを改善する方法があります。

Lazyは英語で「動きがのろい」という意味なので、ウェブサイトの表示速度を上げる技術と関係ないように思えますが、有効な改善策のひとつです。

この記事では、Lazy Lordの概要と使い方について解説していきます。遅滞読込を活用してウェブサイトの表示速度を改善したい方の参考になれば幸いです。

なお、サイトスピードの重要性について詳しく知りたい方は、こちらの記事もご覧ください。

目　　　　次

なぜ、Lazy Loadでサイトスピードが改善されるのか？

Lazy Lordとは、ユーザーがウェブサイトのコンテンツを利用する際に、それが必要になるまで、データの読み込みを遅らせる技術のことです。日本語では「遅滞読込」と訳されています。

例えば、スマートフォンから記事にアクセスしたとき、一番最初に見るページ以外の画像は急速に読み取る必要はありません。

むしろ、ページ全体の画像データを一度に表示させようとすれば、その瞬間にサイトスピードが遅くなってしまいます。

そこで、Lazy Loadをウェブサイトを実装すれば、ユーザーが最初に見るページを優先して読み込み、一定時間内の余分な転送量を節約できるので、表示速度を上げることができるのです。

次の画像はLazy Loadを使った場合とそうではない場合を比較したものです。参考までにご覧ください。

それでは、Lazy Loadを自分のウェブサイトに導入するには、具体的にどうすればよいのでしょうか？ここでは、Lazy Loadの使い方を2種類に分けて説明していきます。

第一に、GitHubなどのオープンソースにアップロードされているLazy Load専用のプログラムをウェブサイトにコーディングする方法があります。

エンジニアのミカ・ツポラ氏が公開したLazy Loadのプログラムをダウンロードしたい方はこちらをクリックしてください。

ダウンロードした後は、ヘッダー或いはボディ内にプログラムを読み込み、Lazy Loadの要件を定める各コードを記述していきます。具体的には、以下の順序で設定することができます。

ステップ１は、Lazy Loadのプログラムを読み込むためのscriptタグをウェブサイトのヘッダー内に設置します。記述する箇所は、head内が基本です。

Scriptタグの例

ステップ2は、imgタグを設定します。なお、Lazy Loadは遅滞読込の対象となる画像のURLがdata-src属性であることを前提としています。

もし、src属性を含んでいる場合は【src = ” img / example-thumb.jpg ” 】を追加してください。

imgタグの例

STEP1とSTEP1が終わったら、最後にscriptタグでLazy Loadを適用する範囲を設定します。配置場所はbodyタグの末尾あたりでよいでしょう。

Scriptタグの例

Lazy Loadを反映させる対象を限定する場合は、（）に指定のコードを追加します。詳細はGithubの説明を参照してください。

とはいえ、プログラミングの素人からすれば、上記の手順は難しく感じると思います。

特に、コーディングはサイト全体の設計に関わる重要な役割を担っているので失敗すれば大きな損失が発生します。

そこで、もしWordPressでウェブサイトを作成しているのなら、Lazy Load専用のプラグイン「BJ Lazy Load」を使いましょう！

まずは、プラグインの新規追加から「BJ Lazy Load」をインストールして「有効化」しましょう。

プラグインを有効化したら、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」にしてください。