Pinto!

企業のマーケティングを支援する「ピント!」

事例で見る|WEBサイトページ表示速度改善方法とその結果

Writerライター

塩飽 拓哉

株式会社PLAN-B R&D事業部 リーダー

2012年にPLAN-B第1期新卒として入社。SEO事業部内部コンサルタントとして従事。2017年よりR&D事業部沖縄ラボへ異動し、Googleアルゴリズムの研究開発に没頭。

目次
    1. 表示速度改善のメリット
    2. サイトの表示速度を知る方法
    3. 表示速度改善対応
      1. 画像を最適化する
      2. cssを縮小する
      3. ブラウザのキャッシュを活用する
      4. 全ての対応を反映させる
    4. まとめ

最近では、ページ表示速度が大事だと耳にする機会も増えてきましたが、実際の改善方法とその効果はどれくらいなのでしょうか?

今回の記事ではチェックツール、実際のサイトでの表示速度の改善対応、改善後の結果まで詳しく紹介していきます。


表示速度改善のメリット

まず表示速度を改善することで得られるメリットには下記があります。

  • Googleからの評価が上がり、検索順位が上がる。
  • ページの表示が早いため、ユーザーに与えるストレスが少なく、CS(顧客満足度)が上がる。
  • CV(コンバージョン/問い合わせや会員登録などの行動)が上がり、売上が上がる。(ECサイトなどが該当)
  • アクセス数(トラフィック)が上がる。

このようにさまざまなメリットがあります。また、大手通販サイトの調査では、読み込み時間が0.1秒速くなると、売上が1%増加するとのデータが出ているので、ECサイトなどのCS(顧客満足度)を重視しているサイトでは特に重要な要素になるでしょう。

また、コーポレートサイトやブログサイトでも読み込みが遅いサイトだと離脱率が上がってしまうので、全てのサイトで改善すべき要素だといえます。


サイトの表示速度を知る方法

Webサイトの表示速度を測るサービスで最も有名なサイトは、Googleが無料で提供している Google PageSpeed Insightsです。

Page Speed Insights

URLを入力するだけでGoogleの評価に沿って点数を付けてくれます。また、改善点のアドバイスをしてくれるので、アドバイスに沿ってサイトを改善していけば、表示速度が改善されるので、非常に使いやすいサイトとなっています。

今回はこのサイトを使って実際に表示速度を改善した実例を紹介していきます。

Googleが提供しているページ表示速度に関する他のツールとしては、Test my siteがあります。このツールでは、モバイルにおける表示速度と予想される離脱率を教えてくれます。

詳しい内容は「Googleのページ読み込み速度テストツールTest my siteの機能と使い方解説」をご覧ください。


表示速度改善対応

まず、Google PageSpeed Insightsの点数が下図になります。

PageSpeed Insights 点数

一般的にGoogle PageSpeed Insightsで85点以上取れば表示速度は問題ないサイトと言われています。今回通したサイトは100点満点中64点なので表示速度はよくありません。ですので、Google PageSpeed Insightsの提案に沿って改善を進めて行きたいと思います。


画像を最適化する

まず最初に表示されている「画像を最適化する」という項目を対応します。

画像を最適化

「画像を最適化する」というのは、簡単に言うと画像のファイルサイズを下げる対応で、画像のファイルサイズを下げる方法として有名なのがロスレス圧縮と呼ばれる方法です。

ロスレス圧縮では画像に含まれている不要なデータを圧縮することで画像などのファイルサイズを最小限に抑える事ができます。

近年ではレティーナディスプレイ対応のため、画像を通常表示されるサイズよりも2倍程度大きく用意するサイトが多くありますが、そうなると画像サイズが大きくなり、読み込みに時間がかかってしまうため、表示速度に影響してしまうのです。

その問題を解決するのがこのロスレス圧縮で、画像のサイズを小さくすることで表示速度を改善することができます。

画像のロスレス圧縮をする際は、下記のような無料で画像を圧縮してくれるサイトを使用するのがおすすめです。

画像の圧縮はPhotoshopなどの画像編集アプリを使用すると自分で圧縮することもできますが、1枚ずつ行うと時間がかかる、画質が荒れる、専用のソフトを用意しないといけないなど大変手間がかかるので、上記のような無料サイトを使用するのが一般的となっています。

では、実際にTinyPNGを使用して画像を圧縮してみましょう。

圧縮前

↑が画像圧縮前の容量です。全部で3.2MBとなっています。

圧縮後

↑がTinyPNGを通した後。3.2MB→1.8MBに容量が下がり、1.4MB削減できています。

では、上記ファイルをサイトに反映させて表示速度点数を見たいと思います。

画像圧縮後のテスト結果

↑が圧縮した画像を反映して再度テストした結果です。64点から78点と点数が良くなっています。

今回1.4MBの削減と容量的には少なく見えますが、Google PageSpeed Insightsの評価では画像の容量がどれだけ削減できたかよりも、圧縮対応している画像が何枚あるかの方が重視される傾向が強いため、削減容量が少なくても点数が大幅にUPしている状態です。


cssを縮小する

次に対応した内容は「cssを縮小する」という項目です。

CSSの縮小

「cssを縮小する」と言うのは、簡単に言うとCSSファイル内にある余分な余白、改行、インデントを削除するという対応になります。この対応は無料サイトを使用して自動で縮小する方法とテキストエディタの一斉置換で対応する方法が一般的です。

他にもコマンドツールを使用する方法もありますが、かなりのスキルが必要になるので今回は割愛させていただきます。

実際に上記のサイトやテキストエディタを使用して圧縮したコードは以下のようなコードになります。

ご覧の通り、CSSファイルのファイル内にある余分な余白、改行、インデントが削除され、CSSが1行になっています。余白、改行、インデントは1つ1つの容量はかなり少ないですが、数が積み重なると容量を圧迫する可能性があるため、圧縮が推奨されているのです。

但し、この方法には大きなデメリットがあります。それは、サイトの更新を行う際にCSSの編集がしにくくなることです。個人で作成する分には問題ありませんが、大規模なサイトなど複数の人数で更新を行う場合、混乱が起きる可能性があるので、この方法で表示速度を上げることは非推奨とされています。

ですので、自分のサイトの今後の更新方法に合わせて、対応するしないの判断をするようにしましょう。

では、上記ファイルをサイトに反映させて表示速度点数を見たいと思います。前項で試した画像の圧縮は行わず、「cssを縮小する」のみを実施します。

CSS圧縮後のテスト結果

「cssを縮小する」対応では上記の結果(施策前64点→施策後64点)になっています。ご覧の通り点数に変化は見られない状態です。

今回は小規模サイトでの計測でしたが、大規模サイトで多くのCSSを使用する場合などには効果が出る可能性はあります。ただ、上に書いたとおりサイトの更新状況に合わせて対応するかどうかを決めたほうがいいでしょう。


ブラウザのキャッシュを活用する

ブラウザのキャッシュは.htaccessと呼ばれるファイルに下記コードを記入することで活用することができます。

但し、この対応はある程度サーバーサイドの知識が必要なので、対応する場合はサイトに合わせた方法を調べて実施するようにしましょう。

では、上記ファイルをサイトに反映させて表示速度点数を見たいと思います。今回も今まで説明してきた2つの改善方法はせず、「ブラウザのキャッシュを活用する」のみを実施します。

ブラウザのキャッシュを活用後のテスト結果

今回の「ブラウザのキャッシュを活用する」対応では64点から69点と点数が5点上がっています。微量な増加ですが、この小さい積み重ねが表示速度改善のための道になるので、できる部分はすべて試して行きましょう。


全ての対応を反映させる

今回行った対応は下記3点です。

  • 画像を最適化する
  • cssを縮小する
  • ブラウザのキャッシュを活用する

これら全ての対応を反映させると下記点数になります。

全ての対応を反映させたテスト結果

表示速度のスコアは対応前64点、対応後88点と24点増加しています。冒頭でも述べたように、一般的にスコアが85点以上だとGoogleからの評価が高く、UXも高くなると言われています。3つの速度改善対応で合格点以上に点数を伸ばすことができました。


まとめ

今回の対応では、Google PageSpeed Insightsからの3つの提案に対応してスコアを伸ばしています。しかし、サイトによっては同じ対応をしても点数が伸びない場合もあります。

表示速度を改善していく上で大切なのは、サイトに合った対応をする事です。例えば今回対応したサイトでは画像の枚数が多かったため、画像の圧縮を行うことで大きくスコアを伸ばす事ができましたが、画像が少ないサイトだとあまりスコアが伸びない可能性もあります。

サイトに合わせた対応をすることで表示速度は必ず改善することができるので、その時々に応じた対応を行い、表示速度を改善していきましょう。

SEOコンサルティングの最新事例 サービスページはこちら

関連する記事を読む