エス技研WordPress専科

WordPressの基本的な使い方から SEOの対応、プラグイン情報、カスタマイズ方法を解説します。


SEO効果絶大!PVもアップするWordPressの高速化プラグインUnveil Lazy Load

      2015/12/27

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

 

Unveil Lazy Loadとは?

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

 
 

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

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

Unveil Lazy Loadの設定方法

 
Unveil Lazy Loadは、インストールして有効にするとそれで設定は終了です。
個別に設定する箇所はありません。
 
それだけで、ページ表示の高速化が実現します。
 
 

Unveil Lazy Loadと BJ Lazy Loadの違い

 
最終的には、Unveil Lazy Loadを選ぶか、BJ Lazy Loadを選ぶか、については実際にスピードの測定をしてみてその上で選べばいいと思います。もしかしたら「Lazy Load」が速いかもしれませんし。
 
ですが、一つ知っておくべきことがあります。
 
「Unveil Lazy Load」は画像に特化して事後読み込みの処理を行っているという点です。 
「BJ Lazy Load」は設定画面があり、それぞれ設定に合わせて事後読み込みを行うパーツを指定できますので、何が対象になっているかを理解できると思いますが、「BJ Lazy Load」は画像だけではなく、iframeなど事後読み込みをしてもよさそうなものを含めて対策を行っています。
 
 

 
また「BJ Lazy Load」については「SEO効果絶大!PVもアップするWordPressの高速化プラグインBJ Lazy Load」に書いていますので、併せて読んでみてください。
 
 
何はともあれ、能書きよりも実際のスピードの結果がどうなったかのほうが大事だと思いますので、この後紹介するツールを使いつつ、得られた結果でどのプラグインを選ぶかを決めるといいでしょう。
サイトによって結果は違うと思いますし、どのプラグインもインストールするだけで結果が出るというお手軽なプラグインですからね。
 
 

WordPressサイトのスピード測定

 
「BJ Lazy Load」の記事にも書いていますが、画面表示のスピードアップの対策を行うにしても、まずは自分のサイトの表示スピードがどのような評価を受けているかを知らないと対策を行ってもどう変わったのかが分かりません。
 
そこで、まずは Webサイトのスピードを測定するサイトをご紹介しておきます。
 

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

 
 

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

 
このエス技研の技術ブログで実際に試してみた結果は以下の通りです。
 
20150320_wp_02
 
       元   適用後
  モバイル 36 →  47
  パソコン 43 →  61

 
 
このエス技研ブログでは「BJ Lazy Load」の方が結果は優秀でしたが、プラグインを入れて有効化するだけでこれだけのスピード改善ができるわけですので、使わない理由はないですよね。
 
 
また、これだけ値が上昇すれば、Google AdSenseでもいい影響が出るようですね。
 
20150319_wp_05
 
こんな感じで AdSenseにも対策をしたことの評価が表示されます。
 
 
最後になりましたが、WordPressの高速化施策として「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。

 - WordPressのプラグイン

GoogleAdwords

GoogleAdwords

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

Message

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

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

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

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

  関連記事

highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

Crayon Syntax Highlighterの代替案としてhighlight.jsを試してみた。highlight.jsは設置簡単で軽量なシンタックスハイライト。デザインもCSS変更だけの簡単変更。

WordPress・Contact Form7、MW WP Form共通 細かなデザイン調整方法

お問い合わせフォームプラグインの Contact Form7、MW WP Formにおけるラジオボタン、チェックボックスなどの見た目を調整する小技を紹介。

Rating-Widgetは超簡単設定のWordPress口コミサイト構築プラグイン

口コミの評価点を投稿する機能に特化したプラグインで、多様なイメージの投稿方法や一覧ページ、コメントなどにも投稿機能を追加することができます。

SEO効果絶大!PVもアップするWordPressの高速化プラグインBJ Lazy Load

Lazy Load系の処理を使い画像だけでなくiframe等表示スピードに影響があるものを総合的に対策。入れるだけで高速化するので使わない手はない!

Rich ReviewsでWordPressに口コミサイトを簡単に構築する方法

口コミサイトに必要なレビュー投稿機能を提供するプラグインです。独自のフォームをショートコードで編集する自由度が高い設計で、平均点の表示も用意されています。

DuplicatorでWordPressを簡単引越し!インストーラー付のバックアップにも

WordPressの引越しや開発環境から本番環境への移行など他の環境に移す作業を簡単にしてくれるプラグインの紹介。インストーラー付のバックアップツールとしても使る。

Google Code Prettifyの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

Google Code Prettifyでソースコードをきれいに編集する方法の解説。簡単設置とカスタマイズ設置の2つの方法を解説し、カスタマイズするポイントも解説。

Advanced Custom Fields(ACF)のアドオン・繰り返しフィールドの使い方解説

Advanced Custom Fieldsのアドオン・繰り返しフィールドについて解説。繰り返しフィールドは投稿者が入力フィールドを追加しながら情報を入力できるフィールドを提供。

WP-PostRatingsでWordPressに自由度が高い口コミサイトを構築

口コミの評価点を投稿する機能に特化したプラグインで、多様なイメージと投稿方法が用意されていてサイトにあったイメージを選択できます。

超簡単!Custom Field Templateでカスタムフィールドをフル活用

カスタムフィールドを簡単に設定するプラグイン。簡単にカスタムフィールドが管理で来て作業効率が数倍にアップします!