ページの表示速度の重要性とは？改善方法を徹底解説！

ページの表示速度、気にしていますか？

ページの表示速度は、Googleからの評価やユーザーの直帰率・コンバージョン率などにも影響する重要な要素です。

今回は、表示速度の重要性や確認方法、改善方法をご紹介します。
今まで表示速度を特に気にしてこなかったという方は、この記事を読んで学びましょう。

コンテンツ

1 ページの表示速度の重要性
2 サイトの表示速度の計測方法
3 サイトの表示速度の改善方法
4 まとめ

ページの表示速度の重要性

早速ですが、ページの表示速度がいかに重要かを説明するために、ページ速度が遅い場合のデメリットをご説明します。

Googleからの評価が下がる

2018年7月にスピードアップデートというアルゴリズムの変更が実施されました。
このアップデートにより、PC検索だけでなく、モバイル検索においてもページの表示速度は検索順位を決めるシグナルとして扱われるようになりました。
これは、表示速度がGoogleからの評価に影響するということです。

厳密には、極端に速度が遅いページのみが影響を受けるとされていますが、遅くならないように対策する必要はありそうですね。

ユーザーの直帰率が上がる

Googleの調査により、以下のことが分かっています。

ページが完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる
表示速度が1秒から7秒に落ちると、直帰率は113%上昇する

さらに、Googleが直帰率とコンバージョン率の関係についてディープラーニングを用いて予測した結果、以下のようなデータが出ています。
このディープラーニングのシステムによる予測は、90%の正確性を誇るとのこと。

・表示速度が1秒から5秒に落ちると、直帰率は90%上昇
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇

引用元：表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命

この結果から、表示速度と直帰率には大きな関連性があることが分かります。
直帰率を下げるためにも、ページ速度は重要ということです。

コンバージョン（会員登録や購入などの成果）率や顧客満足度が下がる

表示が1秒遅れるだけでも、以下のような影響があるとされています。

・ページビューが11％下がる
・カスタマー満足度が16％下がる
・コンバージョン率が7％下がる

引用元：Web表示速度を上げるとCV率が上がる？ー表示速度を上げる方法

また、以下のような報告データもあります。

Amazonの調査では、ページの表示速度が0.1秒遅くなると、売り上げが1%低下することが明らかになった。Googleからは、ページの反応が0.5秒遅くなるとアクセス数が20％低下すると発表されている。

引用元：Webサイトのレスポンス速度から見るインターネットユーザーの閲覧行動と企業の課題

このように、表示速度はコンバージョン率・アクセス数・カスタマー満足度の全てに影響します。
たったの1秒と思いがちですが、この1秒、ないしは0.1秒でさえも影響する可能性があるんです。

サイトの表示速度の計測方法

さて、それではサイトの表示速度はどこで測れば良いのでしょうか？
実際にアクセスして計測しても、通信環境などの要因で結果が変わってしまうので正確性に欠けますよね。

そんなときに便利なツールが「PageSpeed Insights」です。

URLを入力するだけでGoogleの評価に沿って点数を付けてくれるという、便利なサイトです。
改善点のアドバイスも記載されるので、このアドバイスに沿ってサイトを改善することもできます。

実際に当ブログのページ速度を測ってみます。
計測方法は、ページのURLを入力して「分析」ボタンを押下するだけです。

数秒経つと以下のように結果が表示されます。

また、以下の事項を確認することができます。

フィールドデータ：Chrome ユーザーエクスペリエンスのレポートが出せる
ラボデータ：Lighthouseで分析を行った結果
改善できる項目：ページ表示速度を改善するための項目
診断：アプリケーションのパフォーマンスに関する詳細
合格した監査：合格した項目

たとえば改善できる項目は以下のように表示されます。

この改善方法を元にサイトの表示速度の改善を図ることも可能です。
とはいえ、こちらの記載は簡易的なものになるので、より具体的な改善方法をご紹介していきます。

サイトの表示速度の改善方法

画像・動画のサイズを小さくする

画像・動画のサイズを最適化することで速度の改善を行うことができます。

画像のサイズを小さくする方法

画像のサイズを小さくするには、「TinyPNG」というサイトが便利です。

画像はサイズを小さくしすぎると画質が荒れてしまいがちですが、上記サイトを使えば綺麗な状態で画像の容量を小さくすることができます。

上記サイトを使ってもまだ大きいという場合は、画像の大きさを変更しましょう。
「画像を縮小する」サイトで簡単に希望の大きさにすることができます。

動画のサイズを小さくする方法

動画のサイズを小さくするには「VideoSmaller」というサイトが便利です。

動画ファイルを選択して、「動画をアップロード」ボタンをクリックするだけで動画のサイズを圧縮することができます。

外部ファイルを圧縮する

CSSやJavaScriptの容量は、記載されている内容（行数）で容量が変わってきます。
余分な余白、改行、インデント等を削除して、容量を減らすことができます。
具体的な方法を説明していきます。

CSSを縮小する方法

無料サイトを使用して自動で縮小する方法とテキストエディタの一斉置換で対応する方法が一般的です。
今回は簡単に自動で縮小ができるサイト「CSS Minifier」をご紹介します。

上記サイトを利用することで、改行がなくなりファイルが圧縮されます。

JavaScriptの圧縮方法

CSSと同様に、簡単に自動で縮小ができるサイトである、「JS Minifier」をご紹介します。

ただし、CSS・JavaScriptを縮小する場合はデメリットがあるので注意が必要です。
それは、縮小をするとソースの編集がしにくくなってしまうということです。
デメリットを理解した上で、対応するかしないかの判断をしてください。

使用しない外部ファイルは削除する

外部ファイルの数だけ通信をおこなうため、使わない外部ファイルは削除しましょう。
配信を停止している広告の計測タグや、画像など、定期的に見直しをして削除することをおすすめします。

キャッシュを利用する

キャッシュとは、ブラウザに一時的にウェブサイトのデータを保存しておく機能です。
次に同じウェブサイトを表示したときに保存されたデータを表示するため、初回よりも速くページを表示することができます。

サーバ上にある「.htaccess」ファイルに下記の記述を追加することで、特定の期間キャッシュを保存することができます。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 month”
ExpiresByType text/css “access plus 1 days”
ExpiresByType text/javascript “access plus 7 days”
ExpiresByType application/javascript “access plus 7 days”
ExpiresByType application/x-javascript “access plus 7 days”
</ifModule>

※キャッシュする日数は適宜変更してください。

この対応にはサーバーの知識が必要になるので、対応する場合はサイトに合わせた方法を調べて実施するようにしてください。