エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


BJ Lazy LoadでWordPressを高速化!SEO効果絶大でPVもアップ!

      2017/03/11

WordPressのページ表示を高速化する方法・BJ Lazy Load

 

BJ Lazy Loadとは?

 
BJ Lazy Loadは、画像を読み込むタイミングを遅らせることでページ表示の体感スピードを高速化するプラグインです。
 
 
WordPressに限らず、Webサイトは HTMLファイルと画像ファイルの組み合わせで作られています。
このうち、画像ファイルはテキストファイルに比べると非常にファイルの容量が大きいものになっています。
そのため、この画像を画面に表示させる必要があるまで画像を読み込まないことでページ表示の体感スピードを向上させようという仕組みのプラグインです。
 
20150319_wp_01
 
上記の説明画像でイメージは伝わると思いますが、最初に画像を読み込む際には最初に表示される画面の画像の部分だけが読み込まれるために、ページ表示までが速いのです。
 
 
WordPressには「Lazy Load」という名前のプラグインもありましたが、最後のリリースから数年が経っていることもあり、その代わりのプラグインとしてこの「BJ Lazy Load」がよく使われるようになっています。
 
 

 

BJ Lazy Loadのインストール方法

 
WordPressのプラグインのインストール方法は、「WordPressプラグインの3つのインストール方法解説」に記事を書いていますので、そちらを参考にしてください。
 
 

BJ Lazy Loadの設定方法

 
左側のサイドナビの「設定」-「BJ Lazy Load」をクリックすると下記の設定画面が表示されます。
 
20150319_wp_02
 
基本的にはデフォルトの設定のままで問題ありません。
不具合が出た時や、チューニングをして少しでも早くしてみたいと思った時に設定を変更してみる、という感じでいいでしょう。
 

Apply to content

 
コンテンツ(本文)を適用範囲にするか否かの設定です。
もちろん本文に編集されている画像を対象にすべきなので「Yes」を選びます。
 
 

Apply to text widgets

 
ウィジェットに表示されている画像を適用範囲にするか否かの設定です。
ここももちろん「Yes」です。
 
 

Apply to post thumbnails

 
投稿のサムネイル画像を適用範囲にするか否かの設定です。
サムネイルはカテゴリ一覧ページや関連記事一覧などに表示されている画像ですね。
 
 

Apply to gravatars

 
コメントのところに表示されるアバターの画像(Gravatars)を適用範囲にするか否かの設定です。
 
 

Lazy load images

 
画像を適用範囲にするか否かの設定です。
この BJ Lazy Loadを利用する目的は、読み込みが遅い画像への対応ですので、「Yes」にしないと意味がないんじゃないかと思います。
 
 

Lazy load iframes

 
iframeタグで設定されている内容を適用範囲にするか否かの設定です。
iframeタグは、Facebook、Twitterなどの SNSの記事一覧やアフィリエイト広告など、外部のサービスの情報を読み込んで表示する場合に利用していまして、外部のサーバの遅延の影響を受けないようにするためにも「Yes」を選んでおく方がいいでしょう。
 
ただ、広告やランキングサイトの画像などが Lazy Loadの影響で画面が表示されるまで表示されなくなってしまうと、PVによる広告収入やランキング情報の取得・送信に影響を与えてしまう場合もあるますので、実装した後は一度確認をしておく必要があるでしょう。
 
 

Theme loader function

 
BJ Lazy Loadのスクリプトをどの部分に編集するかを設定します。
選択肢は、「wp_footer(フッター)」「wp_head(ヘッダー)」のどちらかです。
 
最近は Webサイトを表示スピードを高速化させる目的で、処理上後から実行しても問題ない JavaScriptはフッターの方に記述するべきとの考え方がありますので、基本的にはデフォルトの「wp_footer」で問題ありません。
 
ただ、問題が出る場合は「wp_head」を試してみてください。
「wp_footer」で問題が出る場合は、その問題が起こっているスクリプトを調べるべきではありますが、たとえ原因が分かっても対処までできる自信は私はないので、「wp_head」にしても問題が出る場合は、違うプラグインを探すしかないんでしょうね。
 
 

Placeholder Image URL

 
代替画像を用意しておく場合は、URLを設定します。
ページが表示されるタイミングになって画像を読み込むため、場合によっては画像が読み込まれていない場合もありますが、その場合に表示する代替画像を用意しておく際に設定する項目ですが、デフォルトの通り特に設定しなくても問題ありません。
また、設定するとしても、ファイル容量が非常に小さい画像を設定しておかないと逆効果になりかねませんので注意が必要です。
 
 

Skip images with classes

 
スキップさせたい classがある場合に設定します。
BJ Lazy Loadを適用させる処理の中で、特定の class(CSSの class指定)の画像、iframeなどは適用外にしたい、という場合に設定する項目です。
一般的に使うことはないと思います。
 
 

Threshold

 
画像を読み込むしきい値を設定します。
ページをスクロールする際に、画像が表示される場所にどれくらい近づいてきたら画像を読み込み始めるか、そのしきい値を設定します。
 
デフォルトでは 200ピクセルとなっていますが、400ピクセルくらいがいいです、としているサイトが多いですね。
これについては、サイトの内容によって適切なところを見極めてください。
この技術ブログなどはしっかり読んでいくものなので、画面のスクロールはそれほど速くないため 200ピクセルでもいいかもしれませんが、写真メインの眺めていく感じのサイトなどでスクロールスピードが速いと感じられるサイトは 400などにするといいでしょう。
 
ちなみに、これを大きくしすぎると表示させないところの画像まで読み込むことになり、BJ Lazy Loadの良さが半減する場合もあるでしょう。
 
 

Infinite scroll

 
無限スクロールを実装している場合は「Yes」を選択します。
一般的な WordPressのテーマでは使われていない仕組みなので、デフォルトの「No」でいいでしょう。
「無限スクロール」は、ググってもらえると出てきますが、スクロールさせていくと次々と新しいページを表示させていくページの実装方法で、ここを「Yes」にする必要がある方は「無限スクロール」が分かって実装しているハズですので、必要があれば「Yes」にしてください。
 
 

Load hiDPI (retina) images

 
高解像度である Apple社の「Retinaディスプレイ」などに対応する画像を使用する場合は「Yes」を選択します。
iPhone、MacBookAirなどの高解像度ディスプレイに対応したい場合に利用します。
 
ですが、「コンテンツデリバリーネットワーク(CDN。画像のような容量が大きなファイルを別サーバから提供する仕組み。)を利用している場合は「Yes」にしないでください。」と書いてあります。
 
 

Load responsive images

 
レスポンシブデザインに対応したサイトを構築している場合で、スマホにはスマホ用の小さな画像を表示させる場合は「Yes」を選択します。
ただ、レスポンシブデザインを採用していても、スマホにはスマホ用の小さな画像を表示する仕組みではない場合やよく分からない場合は、デフォルトの「No」のままでいいでしょう。
 
こちらも同じく「CDNを利用している場合は「Yes」にしないでください。」と書いてあります。
 
 


 

BJ Lazy Loadの個別投稿での設定方法

 
BJ Lazy Loadでは、全体の設定のほか、投稿や固定ページ単位で Lazy Loadの実行を制限することができます。
 
20150319_wp_03
 
BJ Lazy Loadを設定すると、投稿と固定ページの編集画面の右側のナビゲーションに上記の入力フォームが追加されます。
チェックを入れるとそのページだけ Lazy Loadの実行が行われなくなります。
 
 
 

WordPressサイトのスピード測定

 
順番的には最初に対策前の状態を知るためにスピード測定をしておくべきですが、記事としては最後のまとめとしてスピード測定についての記事を書きます。
 
 
高速化すると言っても、まずは自分のサイトの表示スピードがどのような評価を受けているかを知らないと対策を行ってもどう変わったのかが分かりません。
 
そこで、まずは Webサイトのスピードを測定するサイトをご紹介しておきます。
 

 
 
「PageSpeed Insights」は、Googleの WebMasterToolsの中にありますので、ご存知の方は多いと思いますが、「GTmetrix」もメジャーな測定ツールですので併せて利用してみるのはいかがでしょうか。
 

 

BJ Lazy Loadを使ってのスピード評価の変化について

 
このエス技研の技術ブログで実際に試してみた結果は以下のように改善が見られました。
プラグインを入れるだけでこれだけの効果があるわけなので、使わない理由は見当たりませんね。
 
20150319_wp_04
 
       元   適用後
  モバイル 36 →  58
  パソコン 43 →  70

 
 
同種のプラグインとして「Lazy Load」「Unveil Lazy Load」というものもあり、下記に気にを書いています。
SEO効果絶大!PVもアップするWordPressの高速化プラグイン元祖Lazy Load
SEO効果絶大!PVもアップするWordPressの高速化プラグインUnveil Lazy Load
 
どのプラグインもインストールするだけで効果がすぐに分かりますので、全部試してみて結果が一番いいプラグインを選ぶといいでしょう。
 
 
また、これだけ値が上昇すれば、Google AdSenseでもいい影響が出るようですね。
 
20150319_wp_05
 
こんな感じで AdSenseにも対策をしたことの評価が表示されます。
 
 
最後になりましたが、WordPressの高速化施策として「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

ショートコードで簡単解決!カスタムフィールドでソート、抽出条件設定方法

ショートコードを使って固定ページや投稿に特定のカテゴリ一覧を編集する処理に、ソート条件、抽出条件も設定できる処理を作成。カスタムフィールドも条件に利用可。

WP Customer ReviewsでWordPressにオリジナルの口コミサイトを構築

口コミサイトを構築するためのプラグイン。独自フォームによるレビュー、評価点を投稿でき、入力項目の追加もできます。

カスタムフィールドの検索処理をget_posts()関数のmeta_queryで作成しそれを解説

カスタムフィールドを条件検索・抽出する機能開発の解説。サンプルソースをコピペすればOK。詳細解説もあるのでカスタマイズもできる!

WordPressの管理画面と公開画面を別のドメインに分離して運用する方法

管理画面と公開画面のURLを違うドメインで設定・運用する方法を解説。管理画面と公開画面の場所を分離することでセキュリティ面でのメリットが大きくなります。

WordPressの送信メールが協定世界時(UTC・グリニッジ標準時)の問題対応

WordPressから送信されてくるメールが9時間ずれている。その不具合の解消方法と根本原因の解説です。date_default_timezone_set();の設定を変更で対応できます。

BackWPupでバックアップ・Jobの設定・保存先の情報設定

BackWPupその3。Jobのバックアップファイルの保存先の設定についての解説。

BizVektor環境の引越しでメニュー、バナーが消える不具合の対応方法解説

BizVektor環境の引越し方法と不具合が発生しやすい箇所の解説です。引っ越し作業をする際にURLやファイルのパスを置換する際の手順解説と対応方法についての解説です。

WordPressの一般設定 投稿設定 表示設定 ディスカッション メディア

基本的な設定を行う「設定」の解説です。ブログサイトを構築する際に必要な設定内容を一般設定、投稿設定、表示設定などの各項目を説明しながら設定内容を提示しています。

自サイト内のリンクをショートコードで指定する・アンカーリンク対応版

自サイト内の記事にショートコードで自動リンクを設定する関数のソースコードを提供。Post ID、slugで指定でき、アンカーリンクを設定する場合も対応。

Advanced custom Fieldsのフィールドグループを簡単に複製する方法

Advanced custom Fieldsのフィールドグループの複製の方法の解説。XMLのExport、インポートする機能を利用して複製します。