サイトの表示速度を上げる-Lazy Loadの設定方法

スポンサーリンク

さて、今回はLazy Loadの設定方法と使い方を紹介したいと思います。
どうしても、ページの表示速度のスコアを上げたいという方は是非このプラグインを使ってみて下さい。

画像表示を遅延読み込みさせる

これはwebページを開く(ページロード)する際に、大量の画像を一緒に読み込まずページを開いてから画像を読み込ませるプラグインです。
なので、後ろの画像を読み込まずスクロールと同時に読みこみ、ページの表示速度を上げる事が可能です。

一度は見た事あるかもしれませんが、ページを開いてから画像が遅れて上からグラデーションの様に表示される事がありますよね?
まさにそれです。
自分のサイトの表示速度スコアを知らない方は、コチラをクリックして測定して見て下さい。

Lazy Loadのダウンロードや設定の前に説明

これから、設定方法を説明する前に先に私から説明させて下さい。
このページに辿りついた人は、一回目の表示でこのサイトに辿りついている人はいないでしょう。
Googleで色んなサイトを見てここまで来たと思いますが、その色んなサイトには、ソースコードをいじるやり方がご紹介されいていたと思います。
2016/5/16現時点で下の画像に表示されてるサイトは全てソースコードをいじるやり方が掲載されています。

lazy load google

今から説明する内容は、検索上位表示されている内容と異なるやり方ですが、非常に簡単で私でも当たり前のようにできたので、そちらをご紹介いたします。
ではいきます。

Lazy Loadのダウンロード

まずはコチラをクリックしてプラグインをダウンロードします。
下の画像が表示されたら、ダウンロード(赤枠)をクリックして下さい。

lazy load 設定1

自分のダウンロードフォルダにzip形式でファイルがダウンロードされいます。

lazy load 設定2

このファイルをプラグインの新規追加クリックして、右上の「プラグインをアップロード」をクリックして下さい。

lazy load 追加

次の画面が表示されたら、「ファイルを選択」をクリックして先程ダウンロードしたファイルを選択します。

lazy load 追加2

プラグインの中に「Lazy Load」が追加されたと思うので、有効化をクリックして下さい。
ダウンロードはこれで終わりです。

Lazy Loadの設定方法と使い方

ダウンロードして有効化すれば、設定も何もこれで終了です。
先程説明した通り凄い簡単だったと思います。
検索上位表示されている設定方法とは異なる為

・大丈夫か?

・本当にこれだけ?

と思う方もいるとは思いますが、このダウンロードページのレビューでは下の様なコメントもきています。(日本語に翻訳しております)

lazy load レビュー2

私のサイトもエラー表示などされていませんし、普通に運営できています。
ですが、サイト運営に良くない噂もあります。

ブログ作成日:2016/5/16 追記:2016/5/17
上の方法でもダウンロードできますが、普通にプラグインの新規追加で名前を検索すればでてきます。すいません。

SEOには不向き?Google botに検出されない

これはどういう事かと言うと、画像遅延をさせるわけですから、インパクトのあるアイキャッチ画像を作って設定しても、表示が遅れたり、時には更新しないと表示されず空白のページになったりする可能性もあり
それだけならまだしも、Google botに検出されない可能性もあるそうです。

Google bot

Googlebot とは、Google のウェブクロール用の bot です(「スパイダー」と呼ばれる場合もあります)。クロールは、Googlebot が Google のインデックスに追加する、新しいページや更新されたページを検出するプロセスです。

Google では、大規模なコンピュータ群を使用して、ウェブ上の数十億のページを取得(クロール)します。Googlebot はアルゴリズムによるプロセスを使用します。クロールするサイト、クロールの頻度、各サイトから取得するページ数はコンピュータ プログラムによって決定されます。

Googlebot でクロールを開始する際は、前回のクロールで生成され、ウェブマスターから提供されたサイトマップ データで補強された、ウェブページの URL リストを使用します。Googlebot はリストにあるウェブサイトすべてにアクセスし、各ページのリンク(SRC と HREF)を検出して、クロール対象のページリストに追加します。また、新しいサイト、既存のサイトへの変更、無効なリンクを検出し、Google インデックスの更新情報として使用します。

SEOに不向きの一番の原因はこれですね。
私もブログの一つをFetch as Googleにかけてレンタリングしてみましたが、結果はこれです。

lazy load bot1

左側はGoogleが認識したページですが、空白になっていますよね。
つまり遅延読み込みした画像は検出されないというわけです。

検索順位(SEO)に悪影響は?

これは皆さんが一番心配している事だと思いますが、Google曰く

検索順位に影響はありません。
あるとすれば、画像検索をした際に表示されないという事です。

つまり独自で画像を作成して、画像検索から集客を狙っている人、それを売りにしているサイトは有効化すべきでは無いという事ですね。
なら、画像を売りにしてる人間は諦めるしかないのか?

ちょっと待った!

あなたのプラグイン諦めないで!

BJ Lazy Load

ここから先はLazy Loadの記事ですが、このBJ Lazy Loadも一緒に紹介していきたいと思います。

この優れたプラグインはGoogle botに認識させ、さらにiframeまでLazy Load化してくれる優れものがあります。
iframeは外部リンクをブログカードで表示するやつもiframeで出力されますし、youtube等の動画共有サイトの動画を貼り付ける場合もiframeで出力されるので、大幅にページの表示速度を改善してくれるというわけです。

BJ Lazy Loadの設定方法

これは先ほどと違い、プラグインの新規追加でBJ Lazy Loadで検索し下の画像のプラグインを追加。

BJ lazy load

追加したら、有効化する前にプラグインの編集をします。
少しの編集ですが、編集する前に必ずバックアップを取って下さい。
プラグインの編集で
wp-content/plugins/bj-lazy-load/inc/class-bjll.php
を開いて下さい。

BJ lazy load 設定01

開いたら文字検索(Ctrl+F)で「We do not touch the feeds」と検索して下さい。
検索前の文章は

/* We do not touch the feeds */
if ( is_feed() ) {
return;
}

こうなっていますが、これを

/* We do not touch the feeds */
if ( is_feed() || stripos($_SERVER[‘HTTP_USER_AGENT’], ‘Googlebot’) ) {
return;
}

これで修正完了です。

Google botで検証

プラグイン編集を行った所で、もう一度Google botで検証してみました。
その結果がこちらです。

変更前

lazy load bot1

変更後

BJ lazy load 設定2

左側がGoogleが認識したページですが、バッチリ認識されています。
右側は空白ですが、当たり前で訪問者には遅延させて表示させているので
ページを開いた瞬間は空白で当然です。
どのプラグインを使用するかはご自分の判断で構いませんが、私は画像検索を狙っているわけではありませんのでLazy Loadを使用しています。
以上。

スポンサーリンク

シェアする

フォローする