サイトスピード

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

ライオンくん

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

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

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

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

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

サイトスピード 画像
サイトスピードを改善すべき3つの理由と4つの方法を紹介! ウェブサイトを利用する際に、読み込み時間が長いとイライラしますよね……。インターネットが当たり前になった現代では、通信速度が遅いだけで...

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

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

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

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

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

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

通常とLazy Loadを比較した図

Lazy Loadの使い方

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

方法1 専用のプログラムをコーディングする

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

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

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

STEP1 scriptタグを設定する

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

Scriptタグの例

<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タグの例

<img class=”lazyload” data-src=”img/example.jpg” width=”765″ height=”574″ />

STEP3 scriptタグでLazy Loadの関数を設定する

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

Scriptタグの例

<script>lazyload();</script>

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

方法2 WordPressのプラグインを使う

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

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

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

STEP1 BJ Lazy Loadをインストールする

BJ Lazy Load プラグイン

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

STEP2 適用範囲を設定する

BJ  Lazy Loadの設定画面

プラグインを有効化したら、WordPressの管理画面にある設定から「BJ Lazy Load」の適用範囲を決定しましょう。次の表に項目ごとの特徴と注意点をまとめていますので、確認してみてください。

項     目      説     明
Apply to contentLazy Loadを 「ウェブサイトの画像」に適用することを指しています。ここの項目をYesにしないと、Lazy Loadが機能しないので注意しましょう
Apply to text widgetsLazy Loadを 「テキストウィジェットの画像」に反映することを意味しています。サイドバーやフッターにテキストウィジェットで画像を挿入している方は「Yes」で設定しましょう
Apply to thumbnails「サムネイル画像」の読み込みを遅らせる設定です。例えば、アイキャッチ画像などが対象となります。
Apply to gravatarsプロフィール画像などグラバターで設定した画像の適用に関する設定です。
Apply to image記事内に挿入した画像の設定のことです。この項目をYesにしないと、 Lazy Loadが記事内にアップロードした写真データに反映されないので注意しましょう
Apply to iframesSNSやアフィリエイトの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の問題を少しずつ解決して、ユーザーの使いやすいサイトを作りましょう

ABOUT ME
PENDELION編集部
PENDELION編集部はライター・構成担当・編集担当・グロースハッカーから成り立っています。専属のライターさんが執筆した記事に関しては、希望がある場合にのみプロフィールを掲載します。