neverfadeタイトル
サイト内検索:
bj Lazy Load

 

DigiPressのWordPress有料テーマ『el plano』を導入して約1ヶ月。

 

使い勝手が良いのと、デザインが気に入っていて、しばらく使い続ける事になりそうです。

 

そんな『el plano』ですが、導入してから一つだけ気になる点がありました。

 

それは、『ページ読み込み速度の低下』です。

 

サイト運営上、ページ読み込み速度というのは非常に大事な数値であり、この現状を放置する訳にはいかない!

 

ということで、約3時間の試行錯誤の末、ページ読み込み速度を劇的に改善しましたので、その方法をまとめます。

 

そもそもページ読み込み速度ってなぜ大事なの?

ページの読み込み速度遅いサイトって、見ていて「イラッ!」としますよね。

 

この「イラッと感」がユーザーの離脱率に繋がります。

 

ネットの世界では一般的に、

  • サイトに訪れたユーザーが、ページ表示に待てるのは2秒まで
  • サイトの表示に3秒以上かかると、40%以上のユーザーはページから離れる

と言われています。

 

つまり、サイトのページ読み込み、少なくともファーストビューの読み込み速度は早ければ早いにこした事は無いのです。

 

また、離脱率が高いサイトはSEO上マイナスであるので、ページ読み込み速度は『ユーザビリティの面』も『SEOの面』から見ても、重要な項目なのです。

 

では、本題へ!

 

読み込み速度は画像が原因

まずは、対処する前のページ読み込み速度をご覧下さい!

 

利用したサイトはGTmetrix

GTmetrix | Website Speed and Performance Optimization
他のページ読み込み速度チェックサイトでも試しましたが、こちらのサイトが一番顕著に現れたので紹介しますね。

 

GTmetrixにアクセスし、このブログのトップページの表示速度をチェック!

 

対処する前の数値はこちらです。

スクリーンショット 2014-07-06 0.39.53

初めての方に説明しますと、左側のランクがGoogle、右側がYahoo!です。

 

Aが最高ランクで、順に悪くなって行きます。

 

私のサイトは、Page Speed GradeがFランク。。。これって、かなりヤバいですね。。。

 

読み込み速度も6.06秒もかかっています。これじゃあ、せっかく来ていただいた方も、ページが表示される前に離脱しますね。

 

次に、読み込み速度を高速化させた後のチェック画面をご覧下さい!

スクリーンショット 2014-07-06 0.38.22

なんと劇的に数値が改善している!

 

驚きは読み込み速度

6.06秒⇒4.88秒に改善しているではないか!

 

これは劇的な改善と言って良いでしょう!

 

実は、今回行った対処は複雑な知識は一切不要!行った処理は『プラグインをインストールしただけ!

 

本題に入る前に『神プラグイン』の紹介

WordPressでサイトを運営している方ならご存知の方も多いでしょうが、ページの読み込みには画像の容量が一番のネックなのです。

 

テキストがどれほど多くても問題ないのですが、挿入写真が1枚入っただけで、そのページの容量が格段にアップし、読み込み速度が低下するのです。

 

画像の読み込みに関しては、画像圧縮プラグイン『EWWW Image Optimizer』が有名で、もはや『神プラグイン』と言っても良いでしょう!

 

新規で投稿するページはもちろんの事、既に投稿した後のページの画像も圧縮してくれる便利なプラグインは、導入している人も多いでしょう。

 

EWWW Image Optimizer

 

しかし、このプラグインを持ってしても、画像が多いサイトは読み込みに時間がかかります。

 

さらに、el planoに関してはサムネイル画像が非常に多いテーマ。

 

サムネイル画像はサイズが小さいとは言え、el planoにはアイキャッチ画像など、1ページ当たりに表示される画像の数が多いので、これだけで結構な容量。

 

そこで、もう一手間を加える必要があるのです。

 

ということで、前置きが長くなりましたが本題の『画像の読み込みを遅延させるプラグイン』の登場です。

 

画像読み込み遅延プラグインでファーストビューを高速化!

サイトの表示において、ページ全体の読み込み速度も重要なのですが、最も大事なのは『ファーストビューの表示速度』です。

 

ファーストビューが遅ければ、ユーザーは離脱するでしょうし、早ければ読み進めてもらえる可能性が飛躍的にアップします。

 

ファーストビューの表示を高速化する方法は、いくつかあるようですが、中でも最も簡単なのが『画像読み込み遅延プラグインの導入

 

重たい画像の読み込みを後回しにして、ファーストビューをスムーズに表示させ、ページをスクロールするに従って、画像を読み込んでいくプラグインです。

(詳しい説明は、『画像読み込み遅延プラグイン』でググってみてくださいね。)

 

このカテゴリーのプラグインで有名なのは『Lazy Load

 

ほぼインストールするだけで設定が出来てしまう簡単で使いやすいプラグインです。

 

私もStinger3を使っている事からお世話になっていたプラグインです。

 

しかし、残念な事に『el plano』には合わなかった。

 

サムネイルや画像が全然表示されないのです。

 

さあ、困った。。。

 

el planoに適した画像遅延プラグイン『BJ Lazy Load』

Lazy Loadは簡単に使える反面、細かな設定がしにくいプラグインです。

 

el planoの仕組み上、読み込み開始のトリガーを変える必要があるようですが、この設定が(簡単には)出来ません。

 

そこでこの問題を解決してくれるプラグインを探したところ、ピッタリのプラグインを見つけました。

 

BJ Lazy Load

 

このアプリが嬉しいのは、『Theme loader function』つまり「どのタイミングで読み込みを開始するか?」という指定が簡単に出来るという点です。

 

wp_footerかwp_headかを選択出来るのです。

 

el planoの場合、wp_footerでは正常に画像が表示されませんが、wp_headの場合はスムーズに画像が表示されます。

 

あとの設定はデフォルトでいいでしょう!

こんな感じ

BJ lazy Load

プラグインは簡単が一番ですね!

 

今日のまとめ

実は、Lazy LoadでもBJ Lazy Loadでも、GTmetrixで計測した数値に差はなかったのです。

 

だから、『数値上のページの読み込み速度を上げたい!』というニーズなら、どちらのプラグインを導入しても良いでしょう!

 

しかし、大切な事は『ユーザーがストレス無くブラウジング出来るかどうか』であり、その点を考慮に入れれば、選ぶべきプラグインが見えてきます。

 

プラグインと言う便利なツールを使って、共にユーザーに喜ばれるサイトを作りましょう!

 

el planoに関して、有益な情報があれば、随時ブログに更新しますのでお楽しみ!

Pocket

スポンサーリンク

コメント

この記事へのコメントはありません。

コメントする


※メールアドレスは公開されません。