自分のサイトのPageSpeed(ページスピード)が遅いな・・・って悩んでいませんか?

サイト表示速度が遅いと検索順位にも関わってきますので、ブログで稼いでいる全員にとって死活問題です。

今回の記事ではページスピードを上げるプラグイン【Lazy Load】をご紹介します。

そもそもWordPressサイトの読み込みを早くする方法は主に3つです。

WordPressのサイトを早くする方法

☑キャッシュを生成する。

☑Javascript・html・cssデータを圧縮する。

☑画像データを軽くする。読み込みを早くする

ほかにも方法はありますが、この3つが代表的なサイトスピードを上げる方法であり、一番簡単及び、サイトの読み込みが遅い原因は画像のデータ読み込みに時間がかかっている事です。

画像の読み込みが遅いって言われても、画像圧縮しているし、これ以上画像の読み込みを早くできれば苦労しないよ!って思うかもしれませんね。

ですが、画像の読み込み時間が遅いのであれば、手っ取り早く解決する方法が1つあります。

それが、【Lazy Load】を使った、画像の読み込みタイミングを遅くするプラグインを使うことです。

 

え!?

画像の読み込みを遅くするってどういうこと・・・って思うかもしれませんがご安心ください。

画像の読み込みを遅くするにはしっかりとした意味があります。

それではLazy Loadの説明を始め、Lazy Loadの効果的な設定方法について解説します。

 

なぜLazy Loadで画像の読み込みタイミングを遅くするとWordpressの表示速度が上がるの?居酒屋の例で解説。

Lazy Loadの画像の読み込みタイミングを遅くするというのは、一見サイト速度を遅くすることではないか?って思いますが、これは逆です。

画像の読み込みタイミングを遅くすることで、サイトの表示が早くなります。

これだけお伝えしてもよくわからないと思いますので、居酒屋の例でご紹介します。

 

例えば、文字をお酒だとして、画像を食べ物だとしますよね。

Lazy Loadを使わないサイトは、お酒(文字)と食べ物(画像)を同時に出そうとしている居酒屋です。

お酒を用意しながら、料理も同時に作るので当然時間がかかります。

ただ、お客さんからしてみれば、さっさと乾杯を済ませたいので、お酒だけでも出して欲しいって思いませんか?

 

ブログも同じです。画像よりも早く文字を読ませろ!=知りたい情報をくれってなっているはずです。

それなのに、文字と画像一緒に遅れて表示されたら、注文の途中でクレームを言う=サイトから離脱されやすくなるって事になってしまいます。

一方のLazy Loadを使ったサイト(居酒屋)は、文字というお酒をだして、読者に読んで貰いながら、適切な場所で画像を読み込みます。

 

Lazy Loadは、読み込み画像からある一定のスクロール距離まで近づいてきたら、画像の読み込みを開始します。

検索画面からクリックされた段階ではすべての画像を読み込まずに済むので、サイト表示が早くなるのです。

大月

Lazy Loadで画像の読み込みタイミング遅くしたらといって、画像の軽量化をサボってよいわけではありません。

ファーストインプレッションであるアイキャッチ画像は最初に読み込みしますので、アイキャッチ画像が重いとサイト表示速度も遅くなります。

画像圧縮をやると更に爆速になります。

ただLazy Loadを有効化しても使い物にならない?Lazy Loadの正しい設定方法

 

Lazy Loadを有効化すれば画像読み込みタイミングを遅くはできますが、画像を差し込む以上は、適切なタイミングで読み込みしてほしいですよね?

Lazy Loadの注意点なんですが、デフォルトでは画像から200px以内の範囲で読み込む設定になっていますが、画像からたった200pxしか離れていないとスクロール一回であっという間に越してしまいます。

その結果、画像の読み込みが遅くなり、画像が表示された時には、読者がその先を読んでいるってことになりかねません。

一生懸命入れた画像が見られないって悲しいですよね。

パワポなどで図解で解説している記事なら特にです。

そこで、Lazy Loadの読み込み範囲を200pxから→400pxと倍のゆとりをもって読み込みさせる設定に変更していきます。

まず【Lazy Load】のプラグインをインストールし、有効化します。

新規追加で【Lazy Load】と検索しても画面で出てこない場合がありますので、下までスクロールしてください。

【Lazy Load】が見つかればインストールします。有効化しましょう。

【Lazy Load】の設定は、画像を遅くするサイズを200⇒400に変更する設定のみになるのですが、プラグインの画面では【Lazy Load】の編集ボタンがありませんので、左側のプラグイン編集を利用して設定を変更していきます。

プラグイン編集画面で【Lazy Load】を選択し、Jsを選択します。

【Lazy Load】のJsを選択したら、青い四角のコードを200から400に変更してあげます。

200pxから400pxと距離を伸ばしてあげることで、今回の目的である「余裕を持たせて画像読み込み」をさせてあげる設定にします。

 

お疲れさまでした。これで【Lazy Load】の設定は完了です。

 

まとめ:Lazy Loadはお勧めだけど、WP Fastest Cacheのプレミアム版を買えばいらない。

 

Lazy LoadはWordpressのプラグインに1円も投資したくないって人には必須プラグインになりますが、もしプラグインに投資ができる人であればLazy Loadはいりません。

なぜならWP Fastest Cacheというキャッシュ生成&JS・HTML・CSSを圧縮してくれるプラグインの有料版にLazy Loadの機能が付いているからです。

私も3サイト有料版で買っておりますが本当にお勧めです。

よって、プログラミングができない初心者おすすめWordPressプラグイン10選+αを徹底解説のオススメ10選にはLazy Loadは入れておらず、α部分で紹介してます。

とはいえ、プラグインに1円もかけたくない人にはお勧めですので、ぜひ上記の設定をしてから使ってみて下さい。

今回は以上になります。

Twitterでフォローしよう

おすすめの記事