PageSpeed Insightsでサイトの速度をテスト！パフォーマンス改善方法も紹介

WEBツールズからのお知らせ

ウェブサイトの表示速度・読み込み速度が遅いことに悩んでるサイトオーナーは思いのほか多くいます。

体感的な速度に悩んでなくても直接的・間接的な一定のSEOへの影響はあると考えて間違いないでしょう。

Googleが提供するPageSpeed Insightsを使ってページ速度を計測する方法と、その結果のSEOへの良し悪しの目安、速度の改善方法を解説します。

サイトのSEO分析を行う際、僕も最近根拠の一つに取り入れるようにしてるので、PageSpeed Insightsの指標の重要性は日々増していってると考えています。

PageSpeed Insightsでテストする方法

やり方はPageSpeed Insightsにアクセスし、調べたいURLを入力するだけで、数秒で結果が得られます。

このようにPageSpeed Insightsの使い方に迷うことは無く、結果を得られると思います。

PageSpeed Insightsの結果の見方

重要なのはPageSpeed Insightsの結果の見方のほうです。

基本的にPageSpeed Insightsの結果は0-100点のスコア（高いほど良いパフォーマンス）と三段階の評価です。

以下のような測定結果画面が出ます。

モバイルとPCそれぞれ別の計測が行われますので、モバイルとPC両方のスコアが得られます。

Good（fast）

ページのスコアが80点以上と優秀であればfastと表示されます。
リファレンスにはGoodとの表記がありましたが、記事執筆時点では「fast」と表記されていました。

80点を超えているようなら問題はないと思われます。
SEOの面でも、ユーザーエクスペリエンスの面でも優れたサイトと言えるでしょう。

このスコアが出たからと言って安心しないください。

サイトのコンテンツが少ないだけでスコアが高くなっているだけで、運用をしていく中でスコアを落とす可能性があるからです。

Medium

ページのスコアが60～79点の範囲だと「Medium」になります。

即時大きな問題はないですが、改善の余地があるということを示しています。

SEOの面でもさらなる高みを目指したい人はこのスコアを80以上にするということも効果的と言えます。
一般的なサイトは「Medium」に評価される場合が多いようです。

Low

0～59の範囲だと改善すべき点が多くあると判断できます。
この場合は早急に改善をすべきです。

SEOやユーザーエクスペリエンスにも悪影響を及ぼす可能性がより高い状態です。

改善の方法は以下で解説していきます。

サイトの速度パフォーマンスを改善する方法

以下はPageSpeed Insightsのリファレンス内で推奨されている改善方法です。

リンク先ページでリダイレクトを使用しない

最終的なリンクの行き先ページでリダイレクトのレスポンスを検出すると、特にモバイルだとパフォーマンスを低下させる原因になるそうです。

モバイルの場合はリダイレクトは最小限にすることが速度アップのポイントです。

サーバーの応答時間

HTMLをサーバーから読み込む速度の改善が必要です。

しかし原因はさまざまで、設置しているアプリケーションやデータベースが原因であることあるのでデータの収集を行い、問題の切り分けを行っていってください。
これはある程度サーバーの知識が無いと難しい場合がありますね。

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

ネットワークを介した通信は時間がかかるのでブラウザのキャッシュ機能を活用します。

リソースを圧縮する

HTML・CSS・Javascriptを圧縮します。
圧縮はツールを利用することで可能です。

HTML の圧縮はHTMLMinifier、CSS の圧縮はCSSNano、csso、JavaScript の圧縮はUglifyJS等が有名です。

画像最適化

画像のトラフィックはインターネット全体で96％を占めているそうで、適切に圧縮化できればサイトのスピード改善にも役立ちます。

画像の品質を保ったまま手軽にサイズを落とすにはTiny Ping等がオススメです。
Tiny Pingは過去にこのブログでも取り上げています。

WEBツールズ

画像圧縮サービスなら「TinyPNG」が使いやすいからオススメ

https://tktools.net/340/

ブログやサイト制作で画像をアップロードする際、無駄な画像サイズを圧縮することはユーザーにとってもSEOにとっても無駄な施策ではありません。無料で簡単に見た目の品質を劣化させずに画像圧縮ができるツールの「TinyPNG」を解説します。会員登録も不要で大変使い...

CSS最適化

外部CSSのリソースが小さい場合はHTMLに直接記述するなどしてインライン化することが望ましいです。
CSSの読み込みが最適化されていないとレンダリングに悪影響を及ぼすことが分かっています。

スクロールせずに見える範囲のコンテンツを削減する

スクロールしても見えない部分などはHTMLやCSS、Javascriptをあと読み出来るようにすることで、見える部分のデータ量が減り読み込みが最適化されるので速度改善に役立ちます。

wordpressのリビジョンを削除する

wordpressのデフォルト状態だと記事の自動保存のような機能であるリビジョンが蓄積され、サイトが遅くなる原因になります。
プラグイン等で無効化するか、定期的に削除するなどしてサイトの読み込みに悪影響が出ないようにしてください。

サイトの速度がSEOに及ぼす影響

現時点では同じ評価のサイトが二つあったとしたらサイトのスピードが速いほうを上位表示する　くらいの影響しかないと思われますが、そのSEOに与える重要性は今後も増してくると予想されます。

間接的なSEOへの影響としてサイトの速度が遅いと直帰率は高くなってしまうという相関性があるので、長期的に見ると遅いサイトは読まれにくく、順位を落とす要因になっていきます。

サイトの速度改善はサーバーやプログラミングの知識が無いと対応できないこともありますが、出来る範囲だけでも確実に対応していくことが求められますので、まずは画像やCSSの圧縮などからでも着手するのはいかがでしょうか。