PageSpeed Insightsの点数の上げ方

サイトの表示速度をPageSpeed Insightsで調べてみたら、点数がとても低かったということはありませんか?

表示速度は検索順位に影響するので、SEO対策としてページを高速化したくなりますよね。

頑張れば、PageSpeed Insightsの点数を上げることはできるでしょう。

では何点まで上げたら、SEO上、合格点と言えるのでしょうか?

この記事では、SEO効果と改修コストとのバランスを考慮し、改修による影響が少なく、かつ実際に点数が改善した効果的な施策を6つ紹介します。

ページ表示速度はランキング要素の一つ

検索順位は、Googleが200以上の指標で評価した総合力で決まります。何か一つの施策を行えば、すぐ上位表示されるというほど単純な話ではありません。

検索順位を決める主要3大要素は、「リンク」「コンテンツ」「RankBrain」です。

Google’s Andrey Lipattsev reveals links, content and RankBrain are the top three ranking signals in Google’s search algorithm.

https://searchengineland.com/now-know-googles-top-three-search-ranking-factors-245882

ページ表示速度は、これら3大要素以外の1項目に過ぎません。

PageSpeed Insightsで高得点を狙う前に、頭に入れておきましょう。

点数と検索順位との関係

ページの表示速度はランキング要因の1つに過ぎないので、PageSpeed Insightsの点数が仮に100点でも、1位になるとは限りません。

そこで、実際に「自転車保険」というキーワードでモバイル検索し、上位10件のPageSpeed Insightsの点数を比べてみました。

また、スマホ実機でサイトにアクセスし、応答速度も体感で計測してみました。

順位サイト種別点数
(モバイル)
応答速度
(モバイル)
1損保会社127秒
2比較サイト415秒
3比較サイト402秒
4ブログ243秒
5保険代理店155秒
6メディア174秒
7保険代理店812秒
8損保会社562秒
9比較サイト722秒
10損保会社45秒

検索結果の第1位は、PageSpeed Insightsの点数が12点(10サイト中9位)、実機での体感速度も最も遅い7秒でした。

点数が81点と最もよく、体感速度も2秒と非常に速いサイトは第7位。

この結果から、少なくとも現時点では、ページ表示速度は検索順位に大きな影響を与えるということではなさそうです。

50点未満は改善した方が良い

PageSpeed Insightsの点数は、ランキングに強い影響を与えていません。

ですが、表示速度が遅いサイトについては、ユーザーの離脱防止といった観点での改善が必要でしょう。

実際、上記の10サイトにスマホからアクセスした感想ですが、応答時間が3秒以上かかったサイトは「遅い」、5秒以上かかったサイトは「非常に遅い」でした。

人間がページが表示されたと感じる時間はPageSpeed Insightsで言えば「First Contentful Paint」や「First Meaningful Paint」なので、3秒を超えていたら対策をとる、という判断でいいでしょう。

もしくは、どうしても点数で判断したいなら、以下を目安としてみてください。

  • 50点以上:応答時間が2~3秒くらい。感覚的にストレスがない。
  • 50点未満:応答時間が4~7秒くらい。ファーストビューが表示されるまで待たされた。

応答時間を3秒以内に抑えるのを目標にしましょう。

PageSpeed Insightsの点数は測定のたびに変動する

PageSpeed Insightsに限りませんが、パフォーマンス測定ツールは、ネットワークやサーバー・クライアントの負荷に応じて、テストの度に結果が変動します。

実行するたびにパフォーマンス スコアが変わるのはなぜですか?ページは何も変更していません。

パフォーマンス測定の変動は、複数のチャネルでのさまざまな影響の度合いによって発生します。指標の変動の一般的な原因としては、ローカル ネットワークの利用状況、クライアント ハードウェアの利用状況、クライアント リソースの競合状態があります。

https://developers.google.com/speed/docs/insights/v5/about

1回の計測だけでは誤差が大きいため、その点数だけでパフォーマンスを評価してはいけません。

正しく結果を評価するには、何回か計測を行い、その中で最良の点数を使います。PageSpeed Insightsはサーバーに負荷をかけるので、計測回数は2~3回で良いでしょう。

どの指摘項目を直すか?

PageSpeed Insights で計測を行うと、改善できる項目がリストアップされます。

たくさんリストアップされると、どれから手を付けたらいいのか悩みますが、次のような方針で進めるのが良いでしょう。

  • 取り掛かりやすいものから始める
  • 対応に時間がかかりそうなら直さない、もしくは後回し
  • サイト運用に支障が出るなら直さない

表示速度を改善しても、Webページの見た目や動作は直す前と同じです。しかし、改善の過程で表示崩れが起きたりフォーム動作に支障が出たりすると、元も子もありません。全ての画像をWebP形式で用意する、という変更も、サイトの運用に支障がありそうです。

無理に直そうとせず、万が一、間違えた場合にも簡単に元に戻せるような施策から行うのが良いでしょう。

コンテンツ側の改善 6項目

比較的取り組みやすいコンテンツ側の改善項目をピックアップしてみました。できるところまでやってみてください。

改善① 画像を圧縮する

最初に取り組むのが、容量の大きい画像ファイル(JPEG/PNG/GIF)の圧縮です。

画像ファイルの圧縮するには、「圧縮率を上げてファイルサイズを削減する」方法と「画像の縦・横の大きさを小さくする」方法があります。

PageSpeed Insightsの「改善できる項目」を見れば、どちらなのか分かります。

改善できる項目対処
次世代フォーマットでの画像の配信高圧縮率で保存して、ファイルサイズを削減する。
https://compressor.io
適切なサイズの画像縦幅・横幅を小さくして、ファイルサイズを削減する。
https://www.reduceimages.com/

改善② 動画を圧縮する

動画フォーマットは、IEを除くほとんどのブラウザがWebM形式に対応しています。

https://caniuse.com/#feat=webm

MP4形式の代わりに、WebM形式を使うとファイルサイズを削減できます。

WebM形式への変換は、Convertioが便利です。

https://convertio.co/ja/mp4-webm/

HTMLでは、sourceタグでWebM形式とMP4形式の2つの動画ファイルを指定します。

<video autoplay loop muted playsinline>
  <source src="movie.webm" type="video/webm">  
  <source src="movie.mp4" type="video/mp4">  
</video>

改善③ Webフォントのlinkタグを見直す

“Noto Sans JP”などのWebフォントを使っている場合、次のようにGoogleフォントのURLをlinkタグで指定します。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">

GoogleフォントのURL末尾に “&display=swap” を付けると、Webフォント読み込み中にもテキストがレンダリングされるようになり、ファーストビューの表示が早くなります。

font-weight値としてbold(700)しか使っていないなら、次のようにfamilyパラメータを変更すれば軽くなります。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

また、Webフォント(otfファイル)はダウンロードしてサーバーに配置するのではなく、上記のようにGoogleフォントのCDNを直接利用します。Googleフォントがブラウザのキャッシュにあれば、フォント読み込みをスキップできるので、素早くページが表示できるようになります。

WordPressではテーマをカスタマイズして、Webフォントのlinkタグを修正します。

改善④ 画像を遅延ロードする

画面の可視領域内にある画像だけ読み込む「遅延ロード」を行うと、ファーストビューの表示を速くできます。ページをスクロールして画像が可視領域に入ってくると、ネットワークからファイルを取得します。

「Lazy Load」など遅延読み込みを行うJavaScriptライブラリを利用するのが簡単です。

WordPressでは遅延ロードを行うプラグインを利用します。

改善⑤ ライブラリはminifyバージョンを使う

jQueryなどのライブラリは、通常ファイルサイズが最小化(minify)されたファイルを参照します。すべてのライブラリがminifyバージョンを使用しているかどうか、JavaScriptとCSSの両方を確認しておきましょう。

通常バージョンhttps://code.jquery.com/jquery-3.4.1.js
minifyバージョン https://code.jquery.com/jquery-3.4.1.min.js

改善⑥ scriptタグを後方移動

scriptタグをheadタグ内からbodyタグ内のできるだけ後ろの方に移動します。

ただし、scriptタグの移動により、これまで動いていたJavaScriptの処理が動作しなくなる可能性もあるので、注意が必要です。

よくわからない場合は、移動しないことをお勧めします。

サーバー設定の改善2項目

Webサーバーの設定変更で、パフォーマンスを改善できます。

設定変更も簡単で、影響も少ないのが「gzip圧縮」「Expiresヘッダ」です。

改善① gzip圧縮

HTTPレスポンスをgzip圧縮して送信することで、HTMLならネットワーク転送量を約10分の1くらいまで縮小できます。

Apacheの場合、mod_deflateモジュールを有効にしたうえで、次のように記述します。

例:HTML, CSS, JS, JSON, SVGを圧縮する場合

AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript  application/json image/svg+xml

改善② Expires/Cache-Controlヘッダ

HTTPレスポンスをブラウザにキャッシュさせると、次回アクセスしたときのネットワーク通信を削減できます。

Apacheの場合、mod_expiresモジュールを有効にしたうえで、次のように記述します。

例:アクセスした時刻から1日だけ、画像をブラウザにキャッシュされる場合

ExpiresActive OnExpiresByType image/gif image/png image/jpeg image/svg+xml A86400

なお、キャッシュ期間を長くしすぎると、サイトを更新したときにブラウザの画面に反映されるまでに時間がかかることがあるので、注意が必要です。

開発環境でPageSpeed Insightsを使う方法

開発環境がBasic認証やIPアドレスでアクセス制御されていたり、ローカル環境の場合はそのままではPageSpeed Insightsが使えず、不便ですよね。

プロキシサービス「ngrok」を使うか、ローカルアプリケーション「lighthouse」を使うと、開発段階のトライ&エラーがやりやすくなります。

方法① ngrokでローカル環境を一時的に公開する

ngrokはプロキシサービスで、ローカル環境にインストールして使うと、ローカルWebサーバーをインターネット上に公開できます。

1.ngrokクライアントをダウンロードします。

https://ngrok.com/download

2.zipファイルを解凍します。

3.認証トークンを取得し、ngrokクライアントに設定します。

ngrok authtoken 123456789abcdefghijklmnopqrstuvwxyz

4.ngrokコマンドで公開します。

ngrok http 80

5.公開されたURL http://xxxxxxxx.ngrok.io に対し、PageSpeed Insightsでテストを実行します。

方法② lighthouseでテストする

lighthouseはローカル環境で動作するPageSpeed Insightsです。

1.Node.jsをインストールします。

2.lighthouseをグローバルモジュールとしてインストールします。

npm install -g lighthouse

3.パフォーマンス測定を実行します。

lighthouse http://172.16.xxx.xxx --view

4.ブラウザが開き、測定結果が表示されます。

まとめ

以上、PageSpeed Insightsの点数を改善する手法を説明しました。

表示速度は検索ランキングに影響する指標ですが、点数にこだわりすぎず、費用対効果を考えて対策しましょう。

検索ランキングを改善にするには、パフォーマンスアップだけでは不十分です。SEO対策サービス「ClusterSEO」でサイト全体の内部対策を行ってみてはいかがでしょうか。