こんにちは、SEO分析ツール「アナトミー」開発チームの江頭です。
サイトの表示速度をPageSpeed Insightsで調べてみたら、点数がとても低かったということはありませんか？
表示速度は検索順位に影響するので、SEO対策としてページを高速化したくなりますよね。
頑張れば、PageSpeed Insightsの点数を上げることはできるでしょう。
では何点まで上げたら、SEO上、合格点と言えるのでしょうか？
この記事では、SEO効果と改修コストとのバランスを考慮し、改修による影響が少なく、かつ実際に点数が改善した効果的な施策を6つ紹介します。
SEOの基本知識についてはオンラインセミナーでも解説しています。セミナーではGoogle公式のSEOガイドであるGoogle検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かり易く解説します。これからSEOを始めようと考えている方は是非ご参加ください。
PageSpeed Insightsとは？
PageSpeed Insightsは、モバイル、PCそれぞれのページ表示速度やパフォーマンスに関するスコアリングと、改善方法を確認できるツールです。
参照：(https://developers.google.com/speed/docs/insights/v5/about)
ページ表示速度はランキング要素の一つ
検索順位は、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
ページ表示速度は、これら３大要素以外の１項目に過ぎません。
PageSpeed Insightsで高得点を狙う前に、頭に入れておきましょう。
点数と検索順位との関係
ページの表示速度はランキング要因の１つに過ぎないので、PageSpeed Insightsの点数が仮に100点でも、1位になるとは限りません。
そこで、実際に「自転車保険」というキーワードでモバイル検索し、上位10件のPageSpeed Insightsの点数を比べてみました。
また、スマホ実機でサイトにアクセスし、応答速度も体感で計測してみました。
| 順位 | サイト種別 | 点数 （モバイル） | 応答速度 （モバイル） |
|---|---|---|---|
| 1 | 損保会社 | 12 | 7秒 |
| 2 | 比較サイト | 41 | 5秒 |
| 3 | 比較サイト | 40 | 2秒 |
| 4 | ブログ | 24 | 3秒 |
| 5 | 保険代理店 | 15 | 5秒 |
| 6 | メディア | 17 | 4秒 |
| 7 | 保険代理店 | 81 | 2秒 |
| 8 | 損保会社 | 56 | 2秒 |
| 9 | 比較サイト | 72 | 2秒 |
| 10 | 損保会社 | 4 | 5秒 |
検索結果の第1位は、PageSpeed Insightsの点数が12点（10サイト中9位）、実機での体感速度も最も遅い7秒でした。
点数が81点と最もよく、体感速度も2秒と非常に速いサイトは第7位。
この結果から、少なくとも現時点では、ページ表示速度は検索順位に大きな影響を与えるということではなさそうです。
50点未満は改善した方が良い
PageSpeed Insightsの点数は、ランキングに強い影響を与えていませんでしたが、2021年5月からはGoogleのSEO評価項目の一つにCore Web Vitals（ページの表示速度を表す指標）が追加されるようになります。
点数とSEOとの関係についてGoogleは明言していませんが、PageSpeed Insightsの点数が低い場合に、マイナス評価になるといわれているので、50点未満の場合は何らかの対策をした方が良いでしょう。
また、表示速度が遅いサイトについては、ユーザーの離脱防止といった理由からも改善が必要です。
実際、上記の10サイトにスマホからアクセスした感想ですが、応答時間が3秒以上かかったサイトは「遅い」、5秒以上かかったサイトは「非常に遅い」でした。
人間がページが表示されたと感じる時間はPageSpeed Insightsで言えば「First Contentful Paint」や「First Meaningful Paint」なので、3秒を超えていたら対策をとる、という判断でいいでしょう。
もしくは、どうしても点数で判断したいなら、以下を目安としてみてください。
- 50点以上：応答時間が2～3秒くらい。感覚的にストレスがない。
- 50点未満：応答時間が4～7秒くらい。ファーストビューが表示されるまで待たされた。
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 On
ExpiresByType image/gif image/png image/jpeg image/svg+xml A86400なお、キャッシュ期間を長くしすぎると、サイトを更新したときにブラウザの画面に反映されるまでに時間がかかることがあるので、注意が必要です。
開発環境でPageSpeed Insightsを使う方法
開発環境がBasic認証やIPアドレスでアクセス制御されていたり、ローカル環境の場合はそのままではPageSpeed Insightsが使えず、不便ですよね。
プロキシサービス「ngrok」を使うか、ローカルアプリケーション「lighthouse」を使うと、開発段階のトライ＆エラーがやりやすくなります。
方法① ngrokでローカル環境を一時的に公開する
ngrokはプロキシサービスで、ローカル環境にインストールして使うと、ローカルWebサーバーをインターネット上に公開できます。
１．ngrokクライアントをダウンロードします。
２．zipファイルを解凍します。
３．認証トークンを取得し、ngrokクライアントに設定します。
$ ngrok authtoken 123456789abcdefghijklmnopqrstuvwxyz４．ngrokコマンドで公開します。
$ ngrok http 80５．公開されたURL http://xxxxxxxx.ngrok.io に対し、PageSpeed Insightsでテストを実行します。
方法② lighthouseでテストする
lighthouseはローカル環境で動作するPageSpeed Insightsです。
１．Node.jsをインストールします。
２．lighthouseをグローバルモジュールとしてインストールします。
$ npm install -g lighthouse３．パフォーマンス測定を実行します。
$ lighthouse http://172.16.xxx.xxx --view４．ブラウザが開き、測定結果が表示されます。
まとめ
以上、PageSpeed Insightsの点数を改善する手法を説明しました。
表示速度は検索ランキングに影響する指標ですが、点数にこだわりすぎず、費用対効果を考えて対策しましょう。
検索順位を改善するには、パフォーマンスアップ以外にも適切な内部対策も必要です。適切な内部対策の方法については無料のSEOセミナーで解説しています。セミナーでは、Google公式のSEOガイドであるGoogle検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かり易く解説します。これからSEOを始めようと考えている方は是非ご参加ください。
弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。
