「表示速度」の計測方法とは？6つの改善方法についても解説

Google PageSpeed Insights

「Google PageSpeedInsights（グーグルページスピードインサイト）」は、Googleが提供するWebサイトの表示速度を計測するためのツールです。

検索窓に表示速度を調べたいWebサイトのURLを入力するだけで、パソコン表示・スマホ表示どちらの形式の表示速度も計測することができます。

計測結果は上記のように表示されます。

全体的な表示速度の基準は「パフォーマンス」の部分に表示されるので、こちらを確認しましょう。

スコアがどのくらいの表示速度の目安となっているかというと、

• 0～49：遅いため要改善
• 50～89：標準的
• 90～100：速い

上記のようになります。できれば、スコア90以上になるように表示速度を改善したいところです。

ちなみに、全体的なスコア以外にも、表示速度に関する細かなデータを見ることができます。

例えば、上記のような「改善できる項目」の部分では、速度が遅くなっている原因、改善した場合に表示速度をどれくらい速くできるかの目安を見ることができます。

このように簡単に使える計測ツールでありながら、表示速度を遅くしている原因や改善ポイントも知ることができるので、ぜひ活用してみてください。

※参考：Google「PageSpeed Insights について」

Googleアナリティクス

「Google　アナリティクス」もWebサイトの表示速度が計測できるツールです。アナリティクスでデータを確認する場合は事前にWebサイト登録を済ませましょう。

画面左のメニューから「行動＞サイトの速度＞概要」を選択すると、Webサイト全体の平均表示速度を確認することができます。

また「行動＞サイトの速度＞ページ速度」を選択すると、Webサイト内のページごとに表示速度を確認することも可能です。

Webサイト平均よりも速いなら緑色、遅いなら赤色でページごとの状態が表示されます。

1．画像の最適化

サイト内に貼り付けている画像を最適化することで、表示速度の改善が期待できます。

例えば高画質な画像を使っている場合、キレイではありますが画質に応じて画像データも重くなってしまいます。

仮に幅4000pxなどの画像を使っているなら、1000pxに落とすなどすることでデータサイズを大幅に削減することが可能です。

また画像ファイルの形式が推奨されるものでない場合は、jpg/png/gifなどの推奨形式にすることで表示速度が改善する可能性があります。

ちなみにWordPressサイトの場合、一括で画像圧縮ができるプラグインを導入することも有効な方法です。

主なプラグインとしては、

• Smush
• Imagify
• EWWW Image Optimizer（有料版あり）

などがあるので、使いやすいものを選んでみてください。

2．ソースコードの圧縮

HTMLやCSSなどのWebサイトを構成するソースコードを圧縮することで、表示速度を改善します。

ソースコードに不要なコードが入っていると、読み込み時に表示速度を遅くする原因になります。

例えば、HTMLで無駄な改行が多数入っている、構成に意味のない記述が多数含まれている、などの場合はソースコードを圧縮したほうがよいでしょう。

自分でソースコードの無駄な部分を改善していくのもアリですが、一括で圧縮ができるツールもあるのでそちらを利用したほうがお手軽です。

おすすめのツールとしては、下記があります。

• HTMLの圧縮・・・Compress HTML
• CSSの圧縮・・・CSS Minifier
• JavaScriptの圧縮・・・JS Minifier

ただし、圧縮することでWebサイトに不具合が出る可能性もあるので、圧縮前のソースコードは残しておくようにしてください。

ちなみにソースコードの圧縮については、ページ数にもよりますが、そこまで大きな表示速度の改善効果は期待できない可能性が高いです。

特にページ数が少ない場合、無理に圧縮しなければ…と考える必要はありません。

3．Wordpressの不要なプラグインを削除

WordPressサイトの場合、不要なプラグインを削除することで表示速度の改善が期待できます。

例えば、サイト作成初期に画像管理プラグインを導入したけど結局使っていない…などといった場合、すぐに削除するのをおすすめします。

不要なプラグインもサイト情報の読み込み時に読み込んでしまうので、使っていないのに残しているのは表示速度にとってマイナスでしかありません。

サイト運営を始めてからプラグインの見直しを全くしていないなどの場合は、不要なものはないかチェックしてみてください。

4．ブラウザキャッシュの設定

ブラウザキャッシュを設定することで、表示速度の高速化を目指します。

キャッシュとは一度表示したページデータを保管する機能のことで、Google Chromeなどのブラウザ側に訪問した際のデータが残ります。

再訪問時にこの保管されたページデータからページを表示するので、1からデータを読み込むよりも高速でページを表示することができるようになります。

ブラウザキャッシュを設定するには、Webサーバーの挙動を設定する「.htaccessファイル」でキャッシュするファイルや有効期限を設定する方法が一般的です。

しかしこの方法は難しい上に、サイト全体の挙動に関するファイルなので編集ミスをした場合は修正がかなり大変になります。

そこで現在では、借りているレンタルサーバーのコントロールパネル内でキャッシュの設定が可能な場合が多いので、そちらを利用したほうが無難です。

5．AMPの設定

AMPを設定することで、主にスマホやタブレットでの表示速度を改善します。

AMPとは「Accelerated Mobile Pages」を略したもので、HTMLの機能を表示速度が速くなるように一部制限して表示することを指します。

Google・Twitterなどの大手企業によって導入されているものなので、可能ならAMPに対応しておいたほうがいいでしょう。

AMPを導入するには、WordPressサイト以外では直接HTMLを編集する必要があります。

例としては、このようにHTMLを編集する必要があり、知識がない場合はハードルが高い方法ではあります。

WordPressサイトであれば導入は簡単で、そもそもAMPに最初から対応したテーマが有料・無料どちらもあるのでそちらを利用するのがおすすめです。

対応テーマの例としては、下記などがあるので、好みに応じて使ってみてください。

• DIVER（ダイバー）：有料
• Cocoon（コクーン）：無料
• Luxeritas（ルクセリタス）：無料

※AMPの編集についてはAMP公式サイトで確認できるので参考にしてみてください。

6．高性能なサーバーを利用

高性能なサーバーを利用することで、表示速度の改善が期待できます。

レンタルサーバーは月額などによってサーバー性能が大きく変わるので、シンプルに高性能なサーバーを契約すると手っ取り早く表示速度が速くなる可能性があります。

サーバーの性能については細かい部分まで見るとかなり複雑ですが、以下の4項目は各レンタルサーバーの公式HPなどでスペックが確認できるのでチェックしてみてください。

• 表示速度…サイトを画面に表示させる速度のこと。
• 転送量…受け入れられるアクセス量の数値。数字が大きいほど多くの訪問者のアクセスにも耐えられる。
• CPU…サーバーの頭脳の部分で、データの処理速度に関わります。
• メモリ…データを展開する作業スペースに当たる部分で、数字が大きいほど処理速度も速くなります。

これらのうち、特に「表示速度」と「転送量」の部分はWebサイトの表示速度に大きく関わる部分です。

表示速度は1Gbps（1,000Mbps）くらいあるとかなり快適になりますし、転送量は50GB/1日くらいあると数千～数万くらいのアクセスには十分に対応できます。

月額は数千円以上のものは当然サーバースペックも高いですが、個人サイトレベルであれば月額500～1,000円くらいでも十分な性能のサーバーを契約可能です。