KAKI blog Written by KAKI

【3秒以上はダメ!】ブログページの表示速度を改善する4つの方法!【数値で解説】

ブログ運用

3秒以上、ブログページの表示にかかると、約半数が直帰(ページから離れる)してしまう、と言われています。

と言われても、、、基準がよくわからないし、みんながオススメするプラグインなどを導入して、、、本当に表示速度が上がっているのかもよく分からない、、、ですよね。導入しても、実感としては、ちょっと早くなったかな!?っていう程度です。

・ページ表示速度の改善方法が数値で分かる!

今回は「GoogleのPagespeed Insights」というツールを使って、多くのブロガーさんが紹介しているプラグインや、サーバーの設定、画像軽量化をすることで、表示速度がどのように変化するのかを、実際に計測してみました。

実際に改善方法を試し、数値が改善されるのを目の当たりにすると、ブログ運営にとても自信を持つことができます。

数値で理解しておくのと、みんなが言うから導入しました、では全然違います。ぜひこの記事を参考に、あなたもブログページ表示速度を改善してみて下さい^ ^

スポンサードサーチ

ブログページ表示速度を改善する4つの方法

多くのブロガーさんが紹介しているプラグインや、サーバーの設定、画像軽量化の方法を紹介します。
様々な方法が紹介されていますが、僕は次の4つを推奨しています。

1、プラグイン「a3 Lazy Load」の導入(画像の遅延読み込み)
2、プラグイン「WP FASTEST Cache」導入(キャッシュ)
3、サーバーの設定(エックスサーバー)
4、画像軽量化(PNG形式→JPEG形式に変換+ImageOptim)
結論

この記事の通りに実践すれば、確実に表示速度が改善します!

初期設定として、ぜひ導入しましょう!

検証

それぞれ個別に検証し、組み合わせた場合の数値も紹介します。

■検証サイト:【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!
■使用するツール:PageSpeed Insights

GoogleのPagespeed Insightsについて

「GoogleのPagespeed Insights」というツール、このスコアは海外から測定されるため、そもそも日本のウェブサイトのスコアは低くなりやすいと言われています。コンテンツ量の多いサイトの場合、モバイル版であれば、40点を取れれば良い方とも言われています。

モバイルサイトの分析では、現在4G通信を前提にしているため、パソコンサイトの表示スコアより低くなりやすく、大手Webサイトであっても20~30点台となることも珍しくありません。

昨今はモバイルで検索されることが主流ですよね。なので、パソコンのスピードも大事ですが、モバイルの平均値を高めておくことが大事です。なるべく「40点台」を一つの目標とするのが良いです。

❶デフォルト(画像軽量化済み。他の設定なし)

・モバイル:48
・パソコン:67

❷プラグイン「a3 Lazy Load」の導入(画像の遅延読み込み)

・モバイル:33
・パソコン:;93

❸プラグイン「WP FASTEST Cache」導入(キャッシュ)

・モバイル:49
・パソコン:77

※注意点:キャッシュを利用すると、記事を修正しても反映されないことがあります。修正前のキャッシュファイルを読み込んでしまっているからなのですが、反映されない時は、「WP FASTEST Cacheの管理画面でキャッシュを削除」をすることで反映されます。

❹エックスサーバーの設定

・モバイル:51
・パソコン:91
エックスサーバー設定方法

①Xアクセラレータver.2:ON
1、サーバーパネル
2、Xアクセラレータ
3、ブログのドメインを選択
4、Xアクセラレータver.2:ON

②サーバーキャッシュ:ON(サーバー側のキャッシュも使える)
1、サーバーパネル
2、サーバーキャッシュ設定
3、ブログのドメインを選択
4、サーバーキャッシュ:ON

❺ ❷プラグイン「a3 Lazy Load」+❸プラグイン「WP FASTEST Cache」+❹エックスサーバー設定

・モバイル:52
・パソコン:94

❻画像軽量化(PNG→JPEG、ImageOptim)

画像軽量化は、「画像だけ」の表示速度を測定しました。

スクリーンショットしたこの画像のサイズは「4M(PNG形式)」です。
これを「PNG形式→JPEG形式」、「ImaggeOptim(画像圧縮ツール)」を使って軽量化します。

   

軽量化(PNG→JPEG+ImageOptim』=「266KB(JPEG形式)
(一見、軽量化しても、ほとんど分からないと思います。)

それぞれのページ表示速度を測定します。

「4M」
・モバイル:30
・パソコン:80
「266K B」
・モバイル:48
・パソコン:88

「PNG形式→JPEG形式」、「ImaggeOptim(画像圧縮ツール)」のやり方は、別記事にて参照して下さい。

スポンサードサーチ

まとめ

表に今までのデータをまとめました!

サイト 【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること! モバイル パソコン
デフォルト(画像軽量化済み) 48 67
プラグイン「a3 Lazy Load」の導入(画像の遅延読み込み) 33 93
❸ プラグイン「WP FASTEST Cache」導入(キャッシュ) 49 77
サーバーの設定(エックスサーバー) 51 91
❷+❸+❹ 52 94

負荷なし(画像も文字も何もない空サイト) 51 95
画像軽量化前「4M」 30 80
画像軽量化(PNG→JPEG、ImageOptim)「266K B」 48 88

この表から言えることは、

❷プラグイン「a3 Lazy Load」を導入することで、モバイルは遅くなり、パソコンは早くなる。
❸プラグイン「WP FASTEST Cache」を導入することで、モバイルは同等、パソコンは早くなる。
❹サーバーの設定をすることで、モバイルもパソコンも早くなる。
❻画像軽量化は、モバイルもパソコンも早くなる。

※プラグイン「a3 Lazy Load」は、モバイルが遅くなりますが、機能として必要性があるので導入しています。

僕自身、色々なツールを試した結果、モバイルもパソコンも表示速度を改善できるこの組み合わせに落ち着きました。

感覚的にも、数値的にも、表示速度が改善できていることが実感できると、精神的に不安なくブログ運営ができます。ぜひあなたのサイトも同じ手順であなたのサイトを試してみることをオススメします。

まずはやってみましょう!

【3秒以上はダメ!】ブログページの表示速度を改善する4つの方法!【数値で解説】
ということでお伝えしてきましたが、いかがでしょうか?できましたか?

これを読んで少しでも理解できたなら、あとは実践あるのみです。
サイト設計は80点が取れれば十分です。内容が一番重要です!
やりながら、自分のやり方を作っていけば大丈夫ですので、少しずつそして一歩ずつ前進していきましょう!

参考記事
PageSpeed Insights
【2021年最新】WP Fastest Cacheの使い方・設定方法(不具合対処も紹介)
画像を遅延読み込みできるa3 Lazy Loadの設定と使い方
Google PageSpeed Insights(ページスピードインサイト)の使い方!Webサイトの表示速度のスコアを知り、改善しよう!
【2021年最新】WP Fastest Cacheの使い方・設定方法(不具合対処も紹介)

それでは快適なブログライフを一緒に歩んでいきましょう♪
次の記事でお待ちしています!

人気記事【資産運用】インデックス投資家が老後も失敗しない5つの理由を解説!

人気記事【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!