サイトスピード

a3 Lazy Loadの設定方法|遅滞読み込みでサイトを高速化

Google botは、Lazy Loadが適用されたデータを読み込むことができないといわれています。すなわち、SEOに悪影響があるかもしれないのです。

ライオン

え!?Lazy Load使っているんですけど……。

たしかに、BJ Lazy Loadなどのプラグインを有効化した状態で記事を投稿すると、コンテンツ内部の画像がインデックスされないことが圧倒的に多い印象があります。

一体、どうすればよいのでしょうか……。

この記事では、Lazy Loadの機能に加えて、遅滞読み込みされたデータのインデックス化を手助けしてくれるプラグイン「a3 Lazy Load」について徹底解説します。

なお、Lazy Loadについて詳しく知りたい方は、こちらの記事も参照してください。

Lazy Loadの使い方 アイキャッチ
Lazy Loadの使い方【WordPressの利用者必見】画像データの圧縮、キャッシュ機能の追加、不要なCSSの削除以外にも、Lazy Load(レイジーロード)というサイトスピードを改善する方法があります。Lazyは英語で「動きがのろい」という意味なので、ウェブサイトの表示速度を上げる技術と関係ないように思えますが、有効な改善策のひとつです。この記事では、Lazy Loadの概要と使い方について解説していきます。遅滞読込を活用してウェブサイトの表示速度を改善したい方の参考になれば幸いです。...

a3 Lazy Loadとは?

a3 Lazy Loadは、コンテンツ内にアップロードした画像や動画などの読み込みを遅らせるWordPressのプラグインです。

一般的に、ウェブサイトにLazy Loadを実装すると、サイトの表示速度が上がると考えられています。

次の画像に示されているように、ページの一部を優先的に読み込むことで一定時間内の転送量を節約することでサイトスピードが上がるという仕組みです。

Lazy Loadを導入した際にページがどのように読み込まれるのかを示した図

a3 Lazy Loadを使ったほうが良い理由

a3 Lazy Loadを使ったほうがよい理由は大きく2つあります。

  1. Lazy Loadを簡単に導入できる
  2. noscriptタグを自動的に入れ込むことでGoogle botのクローリングをサポートできる

a3 Lazy Loadの特徴は、BJ Lazy Loadなどのプラグインとは違って、noscriptタグ内にLazy Loadの対象となるデータを自動で設定できる点にあります。

あまり知られてはいませんが、Google botはユーザーのスクロールなどで後から読み込まれるコンテンツを認識できないといわれています。

すなわち、画像や動画がインデックス化されないおそれがあるのです。そのため、注意して使わないと、SEOに悪影響が出る可能性があります

この問題の解決方法として、Googleのジョン・ミューラー氏は、noscriptタグ内に画像や動画を入れることを推奨しています

noscriptタグとは、scriptタグを使って設定したスクリプトが機能しない環境に対して、その内容を代わりに指定してくれるタグのことです。

Lazy Loadで表示されない画像をnoscriptタグで表示させることで、Google botが読み取りやすくできます

とはいえ、コーディングが苦手な方からすれば、noscriptタグを埋め込むだけでも、大きな負担です……。

だからこそ、a3 Lazy Loadを使えば、自動でnoscriptタグを実装してくれるので不要な手間は一切かかりません

ライオン

これなら僕にもできそうだ!

a3 Lazy Loadの設定方法

それでは、a3 Lazy Loadの設定方法について3ステップに分けて解説していきます。

各項目が英語で書かれている部分を除いて難しいところはありませんので、下記のとおり設定を進めましょう!

STEP1 a3 Lazy Load をインストール

まずは、WordPressの管理画面からプラグインの新規追加にアクセスして、検索エンジン内に「a3 Lazy Load」と入力して検索しましょう。

すると、次の図にあるようにa3 Lazy Loadのプログラムが検出されるので、インストールして有効化してください

WordPressでa3 lazy loadを検索したときに表示されるプラグイン

なお、プラグインを作動させるには、以下の条件を満たしている必要があるので、事前に確認しておきましょう

  • WordPress 4.6 以上
  • PHP version 5.6.0 以上
  • MySQL version 5.6 以上 または MariaDB version 10.0 以上

STEP2 管理画面から各種設定を行う

有効化が完了したら、WordPressの管理画面に戻って、設定から「a3 Lazy Load」を選択しましょう

WordPressの管理画面からa3 lazy loadの設定にアクセスした画像

上記の設定画面はすべて英語で表記されています。 とにかく設定を早く終わらせたいという方は、次の項目をチェックしてください。

  1. Plugin Framework Global Settings はデフォルトのままでOK
  2. Lazy Load Activation はON
  3. Lazy Load Images は全ての項目をON
  4. Lazy Load Videos and iframes は全ての項目をON
  5. Exclude by URI’s and Page Types はLazy Loadを適用したくないものがあれば設定する
  6. Image Load Threshold は250~400の値を入力する

※その他の項目はデフォルトのままで問題ありません。

Noscript Supportがnoscriptタグの実装に関するものなので、設定をONにすることを忘れないようにしましょう!

なお、Googleアドセンス広告などのデジタル広告を導入している方は、Lazy Loadでデザインが崩れる場合があるので、該当する方は Lazy Load Videos and iframes はOFFに設定しておきましょう

STEP3 設定完了後はサイトスピードを計測する

上記の設定が完了したら、GoogleのPageSpeed Insightsなどのツールでウェブサイトのスピードを計測しましょう。実装前よりも表示速度が上がっていれば、Lazy Loadの効果があったと評価できます。

PageSpeed Insights 画像PageSpeed Insightsより引用(最終確認日:2020/4/4)

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

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

SEOに効果があるという話に注意!

Lazy Loadを導入すれば、サイトスピードが改善されるのでSEOで有利になるという記事を見かけますが、厳密にいえば「表示速度が極端に遅いもの」に限ってペナルティがあります

したがって、「サイトスピードが速い=SEOに有利」ではなく、あくまでも「不利にならない」というのが正確な情報です。こちらに関しては、Googleのスピードアップデートの趣旨をテーマとする下記の記事をご覧ください。

Google スピードアップデート
Googleのスピードアップデートとは?概要と影響を分かりやすく解説!Googleの検索エンジンは、ユーザーの利便性を高めるために、定期的にアップデートされています。そのなかでも、モバイル環境からウェブサイトにアクセスしたときの表示速度に関する更新を「スピードアップデート」といいます。この記事では、スピードアップデートの概要と影響について、Googleが公開する情報に基づき解説していきます。...

Lazy Loadは適切に使用しなければ、Google botのクローリングに悪影響を及ぼすので注意しましょう

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