BJ Lazy Load導入で本当にページの読み込みスピードが変わるのか調べてみた

※もし気に入っていただければシェアしてくれれば嬉しいです!

GTmetrixでチェック

最近色々なサイトを見ていると、スクロールするときに、下から徐々に画像が表示される要なページを見た事はありませんか?半透明から徐々に画像が表示されるような感じです。

URLをクリックしたときに、表示されるページのファイルが全部読み込まれて、やっと表示されるのですが、この仕様だと画像を全て読み込まなくていいみたいなんです。目に入ったときに読み込んで表示させれば、「URLクリックしてもなかなかひょうじされねぇ、くそっ!」という気分が少しでも緩和しそうです。

という事で、表時速度を比較する前に、下準備をします。

スポンサーリンク

BJ Lazy Loadを導入する

BLOG-FRONTIERはWordPressで構成されております。WordPressにはプラグインというものがありまして、目的に応じたパーツを無料で導入する事が出来るのです。ただ、英語表記が多いので、日本LOVEの人には敬遠しがちかもしれませんが、安心してください。

先日、WordPressの創始者マット・マレンウェッグさんが来日されまして、「LanguagePack」という翻訳システムで近い将来すべて日本語対応にしてくれるとのことです。(Gigazine -WordPressの創始者マット・マレンウェッグが来日、WordPressとウェブの未来について語りました-より)

話が少しそれましたが、早速プラグインをWordPressにインストールします。

BJ Lazy Loadをインストール

BJ Lazy Loadインストール

WordPressの管理画面、プラグインから新規追加をクリックします。検索窓に「BJ Lazy Load」と入れて、検索します。

BJ Lazy Loadインストール

検索したら、すぐに出てくるので、「いますぐインストール」をクリックすると、インストールが開始され、3秒ぐらいで終わります。

BJ Lazy Loadインストール

インストールしたプラグインは有効化しないと動きません。有効化ボタンをおして詳細な設定をしましょう。

BJ Lazy Loadを設定する

BJ Lazy Loadインストール

プラグインを有効化しましたら、設定の項目に”BJ Lazy Load”が追加されているのが、確認できます。ここをクリックして、詳細な設定を行いましょう。

BJ Lazy Loadインストール BJ Lazy Loadインストール

これが設定画面になります。各項目英語になっておりますが、出来るだけ簡単に説明してみました。今回はこのプラグインを導入することで、ページの読み込みスピードがあがるかどうかを検証するだけなので、基本設定を変えず、そのままの状態で使います。

以上で、下準備は終わりです。さて、実際導入前と導入後で読み込みスピードはどれだけ変わるのでしょうか?

GTmetrixでサイトの読み込み時間を確認

今回はサイトの読み込みスピードを計測するツールとして、GTmetrixを利用しました。このサイトも全て英語なのですが、無料でTOPページの検索窓に調べたいURLを入力して、”GO!”をクリックするだけで調べる事ができます。

計測対象のページは、こちらにしました。メインコンテンツだけでも全部で14枚の画像があるページです。しっかり毎回キャッシュもクリアにし、行いました。

プラグイン導入前

GTmetrix結果

プラグイン導入前の数字は以下のように表示されました。ページを読み込むのに6秒弱かかってるんですね。

  • Page load time(ページ読み込み時間):5.63s
  • Total page size(ページの合計容量):4.63MB

プラグイン導入後

GTmetrix結果

プラグイン導入後の数字は以下になります。

  • Page load time(ページ読み込み時間):4.85s(0.78sの改善)
  • Total page size(ページの合計容量):1.63MB(3.00MBの削減)

実際導入してみたところ、約1秒間の改善ができました。たった1秒と思われるかもしれませんが、体感的にはそれなりに実感する事ができるものでした。もしかしたら、気のせいなのかもしれませんが、、、ただ、数字上は間違いなく改善されております。

最後に

ページの読み込みスピードはGoogleの検索(いわゆるSEO上)でも影響があると言われております。ただ、大事なのは検索上位を目指すためではなく、ユーザーの体験価値向上を目指した上での施策であることだと思います。ユーザー満足を目指した結果として、そこにビジネスが生まれ、成功できるようにこれからも修錬を積んでいきたいと思います。

注意点として、WordPressの場合はプラグインを導入しすぎると遅くなってしまいますので、バランスは注意しましょう。

【補足】

投稿に使っている画像にについてですが、png、jpg形式とルールを決めていたなかったのですが、最近になってプログレッシブjpgでの統一を社内でルール化しました。それは、「たった7つの施策でnanapiのPV単価が144%になった話」を参考にしたものです。今回のサイトの表示速度の改善もこちらの記事を読んでのことでした。nanapiさん、ありがとうございました。

スポンサーリンク

※もし気に入っていただければシェアしてくれれば嬉しいです!

※フォロー登録していただくと最新記事の見逃しがなくなります!

スポンサーリンク