Lazy LoadでWordPressの高速化!SEO効果絶大!PVもアップ!
2016/04/02
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」くらいに変更するといいでしょう。
1 2 3 4 5 6 7 8 |
(function($) { lazy_load_init(); $( 'body' ).bind( 'post-load', lazy_load_init ); // Work with WP.com infinite scroll function lazy_load_init() { $( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() { lazy_load_image( this ); }); |
この部分は、どれくらいの場所に画面が来たら画像を読み込み始めるかを決める距離で、「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対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
Category OrderでWordPressのカテゴリを並替えよう
Category Orderは基本機能では並び替えができないカテゴリを並び替える機能を提供するプラグインです。ドラッグ&ドロップで並び替えができる簡単インターフェイスです。
-
WordPressのウィジェットでショートコードを使う方法add_filter
WordPressのウィジェットでショートコードを利用するには add_filter、do_shortcodeの関数を利用する必要があります。
-
FC2からWordPressに引越しの際のデータ加工方法の解説
FC2からWordPressに引越しの際にデータを加工する必要がありますが、その加工方法の詳細を解説。秀丸の正規表現による置換を使い作業時間も軽減する方法や加工のポイントも解説。
-
WordPress初心者向け フォルダ構成・データベース構成解説
BackWPupその11。バックアップを取るために必要なファイル、データベースの解説をします。
-
WordPressのメディア設定でアップロードするファイルの保存場所を変更する方法
メディアのアップロードするファイルの保存先を変更する方法の解説。現在はオプションとなっていますので、/wp-admin/options.phpから設定します。
-
WordPressに Favicon(ファビコン)を設定する(プラグイン必要なし)
WordPressに Favicon(ファビコン)をプラグインなしで設定する方法をサンプルソース付きで説明します。
-
P3(Plugin Performance Profiler)で負荷が高いプラグインを調査し表示スピードアップ!
まずは正確に現状把握を!P3(Plugin Performance Profiler)を使ってプラグインの処理時間を確認!簡単操作で対応すべきプラグインが一目瞭然になります!
-
WordPressのプラグイン WP-DBMANAGERを使って PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップ
WP-DBMANAGERを使って WordPress以外の PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップする方法を解説。
-
WordPressで特定のURL、ページ、ファイル単位でBasic認証を設定する方法
WordPressはURLはmod_rewriteにより疑似的に作られていますが、特定のページ、特定のURL、ファイル単位でBasic認証を設定する方法を解説します。ツールも紹介。
-
Custom Field Templateで簡単にカスタムフィールドをフル活用
カスタムフィールドを簡単に設定するプラグイン。簡単にカスタムフィールドが管理で来て作業効率が数倍にアップします!