1. TOP
  2. Lazy Loadを使ってワードプレスの表示速度を改善する方法

Lazy Loadを使ってワードプレスの表示速度を改善する方法

 2017/03/06 SEO Wordpressプラグイン  

ワードプレスでブログを始めるにあたって

どんなプラグインを入れたらいいんだろう?

このように思っていませんか?

ワードプレスにインストールしてほしい、オススメのプラグインに「Lazy Load」というものがあります。

このプラグインには、「画像の読み込みを遅らせる」という機能があります。

  • 「画像の読み込みを遅らせたら使いにくくならない?」
  • 「ブログ訪問者は記事を読みづらいんじゃない?」

と思うかもしれませんが、心配ありません。

この記事では、なぜ画像の読み込みを遅らせたほうがいいのか?

そして、プラグイン「Lazy Load」の設定方法についてお伝えしていきます。

なぜ「画像の読み込みを遅延」したほうがいいの?

「なぜ、画像の読み込みを遅らせたほうがいいのか?」

一見すると、ブログの使い勝手は悪くなるように思えます。

しかし、遅らせないほうがかえって使い勝手を悪くしてしまうのです。

一般的にページを開くと全ての画像が一気に表示される

実際にブログ訪問者があなたの記事を見たときに何が起こっているのかを説明しましょう。

一般的に誰かが記事を見るときに、そのページに含まれている画像が一気に表示されます。

もしも、そのページが

  • 縦にものすごく長いページ
  • 画像が多いページ

だった場合、読み込みにかなりの時間がかかってしまいます。

しかしながら、Googleでは少し前からこのように言われています。

Q: ページの表示速度は米Google (google.com)以外でも導入されているのか?
A: すでにインターナショナルで展開が完了している。

出典:ページの表示速度は日本でもランキング要因になっていた

簡単に言い直すと、「一つひとつのページの読む込みの速度が検索エンジンでの順位に影響している」ということなのです。

つまり、あなたのブログ記事がたまたま縦に長くなったり、画像の多いページだと、読み込みに時間がかかってしまうのであまり好ましくないということです。

そこで画像の読み込みを遅らせる

ここで現れるのが「画像の読み込みを遅らせる」という作業です。

この機能は単に、サイトの全ての画像の表示を遅らせるということではなく、

まだ画面上に表示されていない画像は表示させない。しかし、画面がスクロールされて、該当の画像に近づいたときに画像を表示させる。

という機能なのです。

この機能を追加しておくことで、ページを開いときの読み込み速度は改善されますし、スクロールしときにきちんと画像は表示されます。

今回ご紹介しているワードプレスプラグインの「Lazy Load」にはこの「画像の遅延読込」の機能があり、多くの方がワードプレスにインストールしています。

ワードプレスプラグイン「Lazy Load」をインストールしよう

まずは、あなたのワードプレスブログに「Lazy Load」をインストールしておきましょう。

Lazy Load

ワードプレスプラグインのインストール方法は以下の記事を参考にしてください。

ワードプレスプラグインをインストールする全手順

設定を施して変更してサイトの利便性を高める方法

「Lazy Load」はインストールして、有効化するだけでも、その効果は発揮されます。

しかし、よりブログ訪問者があなたの記事を読みやすいように工夫しておきましょう。

※ここからは少し難しい設定なので、どうしてもできない場合はしなくてもいいです。

まずはサイドメニューの「プラグイン編集」をクリックします。

lazyloadの編集画面への行き方

次に、画面の右上にある「編集するプラグインの選択」というメニューから「Lazy Load」選択し、「選択」をクリックします。

lazyloadの編集画面への行き方2

選択したら、右端にある「lazy-load/js/lazy-load.js」をクリックします。

lazyloadの編集画面への行き方3

「lazy-load/js/lazy-load.js」をクリックしたら、ファイルを少しだけいじっていきます。

以下の図の赤枠の部分、初期段階では「{distance:  200}」となっています。

lazyloadファイルの編集方法

この部分を「{distance: 400}」に変更しておきましょう。

400に変更した

編集できたら、「ファイルを更新」を押しましょう。

【200→400に変更した理由】
{distance:  200}というのは、「画像の200px上に来たら、画像を表示する」というルールを指定しています。しかし、200px上に来てから画像を表示されると、ギリギリすぎて画像が間に合わなかったり、一気にスクロールしたときに画像がちらついてしまいます。そこで、{distance: 400}にしておくことで「画像の400px上に来たら画像を表示する」ので、余裕をもって画像表示することができます。

まとめ

検索エンジンでの上位表示のために行う施作ではありますが、何よりも「ブログ訪問者の利便性を高めるため」という意識を持って、設定に取り組んでもらえたらなと思っています。


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする

関連記事

  • わかりやすっ!プロが優しく教えるワードプレスの投稿方法

  • TinyMCE Advancedの設定方法と使い方!ブログ記事を装飾しよう!

  • 知らないとだまされる!?SEO初心者のための「SEO基礎知識」

  • WordPress Popular Postsを活用してサイドバーに人気記事を表示させる方法

  • コンテンツSEO|結局どんなコンテンツを作れば上位表示されるんですか?

  • Akismetの設定方法!スパムコメントをブロックしよう!