エス技研WordPress専科

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


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

      2015/12/27

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

 

Lazy Loadとは?

 
Lazy Loadは、画像を読み込むタイミングを変えることで画面表示のスピードを速くするプラグインです。
 
 
WordPressに限らず、Webサイトのページは、HTMLファイルと画像ファイルで構成されています。
このうち、HTMLファイルなどのテキストに比べて、画像ファイルの容量は非常に大きいものですが、画像も含めてすべての情報が読み込み終わってから画面の表示が行われます。
 
そのため、画像が多いページは読み込みに多くの時間がかかってしまうのですが、プラグイン「Lazy Load」を導入することで、必要なときに必要な画像だけを読み込むことでスピードアップを図ることができます。
 
より具体的には、最初の画面表示の際は、最初の画面に表示される画面だけが読み込まれ、画面をスクロールしていく中で次の画像が表示されるエリアに差し掛かると、そこで次の画像が読みだされて画像が表示される、という仕組みです。
 
これを簡単に実現するプラグインが「Lazy Load」なのです。
 
 

Lazy Loadのインストール方法

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

Lazy Loadの設定方法

 
Lazy Loadの設定はありません。
 
Lazy Loadはインストールすると自動的に機能するように設定されていまして、何かを設定するための画面は用意されていません。
 
インストールするだけで画像を読み込むタイミングがコントロールされるようになります。
 
 
ただ、大きなサイズの画像を多用している場合などで画像を読み込むスピードが追い付かず、スクロールするたびに処理が重くなるような感じがする場合は、下記の場所の設定を変えてみてください。
 
変更するファイルは、以下のファイル
 /wp-content/plugins/lazy-load/js/lazy-load.js
 
変更する箇所は、下記 6行目の「200」の部分を「400」くらいに変更するといいでしょう。

 
 
この部分は、どれくらいの場所に画面が来たら画像を読み込み始めるかを決める距離で、「200」は 200pxのことです。
 
 
FTPで直接ファイルを更新するか、管理画面のプラグイン一覧画面から「Lazy Load」の「編集」をクリックし、「lazy-load/js/lazy-load.js」を選択してください。
 
 

WordPressの表示スピードを向上させる理由

 
WordPressの表示スピードを向上させる理由は、閲覧しに来てくれたユーザのストレスを軽減させるためと、Googleからの評価を向上させるためです。
 
閲覧しに来てくれたユーザのストレス軽減は分かりやすいと思いますが、Googleはユーザビリティが高いサイトを評価していまして、その評価の指標の一つとしてページの表示スピードも含まれています。
そのため、画面の表示スピードを向上させることはユーザのためもあり、Googleの検索エンジン対策にもなるのです。
 
具体的にどれくらいスピードが改善されたかを確認するには、Googleが提供している「PageSpeed Insights」を使うといいでしょう。
 
 PageSpeed Insights
 http://developers.google.com/speed/pagespeed/insights/
 
 
ちなみに、「Lazy Load」を使った場合の不具合として、スピードが遅くなる、画像が表示されずに欠ける、という場合もあるようです。
テーマや他のプラグインとの競合などによって影響を受けている可能性もあると思いますので、導入には十分なチェックをしてください。
 
 
また、画像ファイルを圧縮することで表示スピードを改善するためのプラグインとして「EWWW Image Optimizer」というものがあり、「EWWW Image Optimizer」については「EWWW Image Optimizerで画像の圧縮でWordPressを高速化」に記事を書いていますので、こちらも参考にしてください。
 
 

Lazy Loadをおススメする理由

 
「Lazy Load」とは、もともとは WordPresssのプラグインではなく、一般的な HTML制作にも利用する jQueryのプラグインとして開発されたものです。
それと同じ名前で WordPressにも同じ機能のプラグインが提供されているわけですが、制作者に関して関係があるかどうかは分かりません。
 
また、Lazy Loadの処理と同等の機能を提供するプラグインも多数提供されていますので、どれを利用してもいいと思います。
 
ですが、あえて「Lazy Load」をおススメする理由は、このプラグインが WordPress.comと TechCrunchと 10upのメンバーの混成チームによって作られたものである点です。
そのため、このプラグインは信頼感を持って使うことができるでしょう。
 
 
最後になりましたが、WordPressの高速化施策として「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。

 - WordPressのプラグイン

GoogleAdwords

GoogleAdwords

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

Message

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

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

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

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

  関連記事

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

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

WP Reviewを使ってWordPressのレビューサイトを構築

レビューサイトを構築するプラグインです。複数の評価者による評価点投稿やページごとに配色を変更する機能、機能満載なウィジェットなどレビューサイト構築に最適です。

WordPressで WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった

WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった。これは「wp_footer」の設定に問題があるからだった。

WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法

WordPressのカテゴリやタクソノミーに編集する項目を追加する方法の解説。Advanced Custom Fieldsを使うと簡単。テンプレートに記述する方法も解説。

WordPressにBasic認証を設定するプラグインのまとめWP Basic Authなど

WordPressにBasic認証を設定する方法のまとめ。プラグインを使う方法と.htaccessで設定する方法を紹介。公開側、ログインページをそれぞれ設定できます。

カスタムフィールド決定版!Advanced Custom Fields全項目完全解説・管理画面編

カスタムフィールドを設定する最高のプラグイン。設定できる項目を全て網羅して解説。投稿の項目だけではなく、カテゴリやユーザ情報の項目を増やすことにも使えます。

EWWW Image Optimizerで画像の圧縮でWordPressを高速化

ページ表示の高速化に使うEWWW Image Optimizerの紹介です。英語で書かれているために取っつきにくいですが設定は3カ所。画像の圧縮もワンクリック。超簡単!

評価点投票プラグイン10個を比較!WordPressで口コミサイトを構築

口コミサイトを作るために必要な評価点、レビューを投稿できるプラグインを探して評価。10プラグインをチェックし、8プラグインは詳細解説付き。

表示スピードアップに貢献!P3(Plugin Performance Profiler)で負荷が高いプラグインを調査

まずは正確に現状把握を!P3(Plugin Performance Profiler)を使ってプラグインの処理時間を確認!簡単操作で対応すべきプラグインが一目瞭然になります!

Autoptimizeで簡単設定!HTML、JS、cssを圧縮しWordPress高速化!

Autoptimizeを使って簡単にHTML、JavaScript、CSSを圧縮しサイトの表示を高速化しよう!基本設定、拡張設定とあり柔軟な設定で多彩な環境に対応出来ます。