ページ速度がSEOで重要な理由│表示速度の計測・改善方法を解説

SEOにおいてページ速度は重要です。なぜなら、Googleはユーザビリティの優れたWEBサイトを評価するため、ページ速度をランキング要因として使用しているためです。

特にスマートフォン用のクローラーによるクロールデータを優先的に使用して、インデックス登録と検索順位決定をおこなう「モバイルファーストインデックス」への移行が2019年の7月から開始されており、モバイルページの表示速度が検索ランキングに影響を与えるようになります。

また、ぺージ速度はランキングだけではなく離脱率やCVRにも影響を与えるため、SEOを行う目的であるWEBサイトの集客数の向上に大きく関係します。

そのため、ページ速度を改善することはSEO対策で取り組むべき重要な施策となります。では、実際にGoogleがページ速度についてどのように評価しているのかを具体的に解説していきます。

SEOにおいてページ速度が重視されているのは、2010年にGoogleが検索ランキングを決定するアルゴリズムにページ速度を追加したからです。

ここ Google では、製品 や ウェブ においてスピードにこだわっているということを聞いたことがあるかもしれません 。その取り組みの一環として、本日、検索ランキング アルゴリズムにサイト速度という新しいシグナルを追加しました。サイトの速度は、Web サイトが Web リクエストにどれだけ早く応答するかを反映します。
2010 年 4 月 9 日金曜日

ウェブ検索ランキングにおけるサイト速度の使用

また、2018年のスピードアップデートでパソコンページだけでなく、モバイルページの読み込み速度も検索順位にも影響するようになりました。

読み込み速度はこれまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
2018 年 1 月 17 日（水曜日）

ページの読み込み速度をモバイル検索のランキング要素に使用します

つまり、ページの読み込み速度が遅い場合は、WEBサイトが低評価となり検索順位が低下する恐れがある可能性があります。このように、検索順位を決定するGoogleのアルゴリズムにページの表示速度は組み込まれているため、SEOにおいてページ速度は重要となります。

ただし、Googleのマット・カッツ（Matt Cutts）氏は、ページ速度が検索順位に与える影響について以下のように述べています。

Look at your neighborhood of websites. Look at the sites that are returned along with you. And then, if you're the outlier, if you're at the very bottom end because your site is really, really slow, then, yes, it might be the case that your site will rank lower because of its page speed.

「あなたのサイトが属するウェブサイト群を見てみてください。あなたのサイトと同時に表示されるサイトたちを確認してみましょう。もしあなたのサイトが極端に遅くて最下位に位置しているのであれば、そのページの速度のせいでランキングが低くなる可能性があります。」

このニュアンスだと、少し遅いくらいではSEOに影響は無く、大幅に遅い場合は影響する可能性が高いと言えます。

SEOにおいてページ速度が重視されているのは、表示スピードが遅いとユーザーはストレスを感じて離脱に繋がるからです。

Googleの調査結果によれば、表示スピードが遅くなるにつれて離脱率も増加しています。

離脱率と同様に、直帰率やコンバージョン獲得にも大きく影響を与えるでしょう。

一方、離脱率や直帰率、CV数、CVRといったユーザーの行動が、検索順位やクリック率などのSEOに影響を与えているのかについては不明です。

GoogleのMatt Cutts氏は離脱率とランキングの関係を否定していますが、CWVが導入される前の話なので、影響を与えるように変化した可能性はあります。

「ページ速度」はサーバーからの応答時間や、コンテンツが完全に表示されるまでの時間など様々な算出方法があるため、ページ速度は複数の要因によって決定されます。

具体的にページ速度は以下のように分類されます。

▼ 例えば、WEBページは、以下のような流れでブラウザに表示されます。

1. ユーザーがブラウザにURLを入力する
2. ブラウザがWEBページのデータが保存されているサーバーへ必要なデータをリクエストする
3. サーバーがブラウザへデータを送信する
4. ブラウザが受け取ったデータを画面上に表示する

上記の2と3が読み込み速度、4が表示速度で、1～4までの一連の操作を含めた速さが、「ページ速度」です。

ここで1つ注意点があります。例えば、「メインコンテンツの読み込み時間」が10秒かかるとします、この数値を見ると、ページ全体が表示されるのに10秒かかるため非常にぺージ速度が遅いと言えます。

一方で、上記のぺージは「最初にコンテンツ表示にかかるまでの時間」が1秒だとします。ユーザーがアクセスして1秒後にはファーストビューにコンテンツが表示されるため、そこでユーザーが目的を果たせるのであれば、ページ速度が早いと言えます。

つまり、何を基準にページ速度を測定するかによってページ速度が遅い、早いは変わると言う事です。そのため、SEOにおいてページ速度の改善をおこなう際は、Googleが提供しているツール上で算出される複数の指標全てのスコアを改善する必要があります。

ページ速度は、以下の2つツールで計測できます。

• PageSpeed Insights
• Chromeデベロッパーツール

それぞれのツールでページ速度を計測する手順を解説します。

「PageSpeed Insights」とは、Googleが提供している無料のツールで、モバイル環境とデスクトップ環境の両方でのWEBページの読み込み速度を分析することができます。

▼ PageSpeed Insightsでページ速度を計測する手順は以下の通りです。

1. PageSpeed Insightsのページにアクセスする
2. 計測したいページのURLを入力して「分析」ボタンをクリックする
3. 各指標の数値を確認する

評価は0～100までのスコアで表示され、高いスコアが優れたパフォーマンスを意味します。

どのように表示されるのか？またどのような問題がぺージの表示速度に悪影響を与えているのかを表示します。

問題箇所をクリックすると、問題に対しての改善策が表示されます。

「デスクトップ」を選択すると、CWVに関するパフォーマンスも確認することが出来ます。

このようにPageSpeed Insightsは単にスコアを提供するだけでなく、ページのパフォーマンスに影響を及ぼす要因を明確にし、改善のための具体的な提案も行います。例えば、画像の最適化、CSSやJavaScriptの圧縮、ブラウザキャッシングの利用などの一般的な最適化方法が含まれます。

「デベロッパーツール」とは、ブラウザのGoogle Chromeに搭載されている開発者用の検証ツールです。
無料で誰でも利用できます。

▼ デベロッパーツールでページ速度を計測する手順は以下の通りです。

1. ページ速度を計測するページをGoogle Chromeで開く
2. 画面右上に表示されている「︙」をクリックする
3. 「その他ツール」から「デベロッパーツール」を選択する
4. 画面上部に表示されている「Performance」タブをクリックする
5. 左上のスタートボタンをクリックする

下記項目でページ速度が表示されます。

• Loading
• Scripting
• Rendering
• Painting
• Other
• Idle
• Total

デベロッパーツールは、下記ショートカットキーから開くこともできます。

• Windows：「Ctrl」+「Shift」+「I」
• Mac：「command」+「option」+「i」

また、ブラウザのGoogle Chromeを利用している場合、拡張機能の「Lighthouse」をインストールすることで、ページ速度を計測できます。「Lighthouse」は、前述したPageSpeed Insightsと同様にGoogleが提供しているツールです。

【関連記事】

SEOにおけるページ速度の目安は、以下の通りです。
PageSpeed Insightsに表示される各指標の数値は、以下を目安にしてください。

上記の数値以下であれば問題ありませんが、数値を超えている場合は改善する必要があります。

特に、LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）は、2021年からGoogleの検索アルゴリズムに組み込まれており、SEOの観点からも重要な指標となっています。

▼ ページ速度を改善する方法は以下の6つです。

• 画像・動画の最適化をおこなう
• ソースコードを軽量化する
• AMPを実装する
• ブラウザキャッシュを活用する
• CDNを導入する
• サーバー性能を高める

それぞれの改善方法について具体的に解説します。

画像・動画の最適化をおこない、データ容量を削減することで、ページ速度を改善できます。なぜなら、テキストやソースコードと比べると画像・動画は容量が大きく、容量が大きいとページの読み込みに時間がかかるからです。

▼ 以下の方法で画像・動画のデータ容量を削減できます。

• 画像の解像度を下げる
  解像度の高い画像は美しいですが、常に解像度の高い画像が必要ではありません。必要な解像度に合わせて画像をリサイズすることで、データ容量を大幅に削減できます。
  例：ホームページで使用されている1920x1080の画像を、表示サイズに合わせて800x450にリサイズする。
  
  
• 適切な画像形式を選択する
  例えば、写真はJPEGが適しており、イラストやアイコンはPNGやSVGが適しています。適切なフォーマットを選択することで、クオリティを維持しつつデータ容量を削減することができます。
  例：写真やグラデーションが多い画像はJPEGで、透明性が必要なイラストやアイコンはPNGやSVGで保存。
  
  
• 圧縮ツールを利用する
  オンラインやオフラインの画像圧縮ツールを使用して、画像の品質を維持しつつデータ容量を減少させることができます。
  例：「TinyPNG」や「JPEG Optimizer」を使用して、画像のファイルサイズを削減する。
  
  
• gzip圧縮を有効化する
  サーバー設定でgzip圧縮を有効にすることで、画像だけでなくCSSやJavaScriptのファイルサイズも削減できます。

画像は元々のデータ量が大きいため最適化を行うことで、ページの表示速度を大幅に改善することが可能です。

ソースコードを軽量化することで、ページ速度を改善できます。

ブラウザはWEBページを表示するためにソースコードを解析する必要があります。そのため、ソースコードの量が多いと、解析と表示に時間がかかってしまいます。

HTMLやCSS、JavaScriptに記述されたコードの中で必要のないコードを削除することで、軽量化できます。

• 不要な空白や改行の削除
  これにより、ファイルサイズが若干削減されます。
• コメントの削除
  開発中に有用なコメントも、公開時には不要となることが多いので削除します。
• 使用されていないコードの削除
  未使用のCSSセレクターやJavaScript関数は読み込みの負担となるため、削除します。
• コードの圧縮
  変数名の短縮や、関数のインライン化などを行い、ソースコードの総量を削減します。

また、以下のようなコード軽量化ツールを利用すれば、手動での編集なしにソースコードを圧縮することが出来ます。

ただし、圧縮後のコードは人間が読むのには適していないため、元のソースコードのバックアップを必ず取っておくことをおすすめします。

AMP（Accelerated Mobile Pages）を実装することで、特にモバイルページの表示速度を大幅に改善できます。

「AMP」とは、モバイルページを高速化するためのオープンソースの技術フレームワークです。AMPは、ページの読み込みを最適化するための特定のHTML、JavaScript、そしてキャッシュされたコンテンツの提供を目的としています。

サーバーから直接ページデータを取得するのではなく、Google AMP CacheなどのAMP対応のキャッシュサービスを使用することで、ユーザーに非常に高速にコンテンツを配信することが可能になります。

しかし、AMPを導入する際には、以下のようなデメリットや制約を理解しておくことが重要です。

1. CSSとJavaScriptには制限があり、AMPでの使用は特定の範囲や方法に限られます。
2. 一部の広告ネットワークやフォーマットはAMPと互換性がないため、広告の表示に影響が出る可能性があります。
3. AMPの内容を表示するためには、通常のウェブページとは別にAMP専用のページを作成する必要があります。
4. AMPは主にモバイルページの高速化を目的としているため、デスクトップブラウザでの表示速度には直接の影響を与えません。

【関連記事】

ブラウザキャッシュを活用することで、ページ速度を改善できます。

ブラウザキャッシュとは、ユーザーがページを表示した際に、そのブラウザがページのデータ（例えば、画像やスタイルシート）を一時的に保存する機能です。

一度ページに訪問したユーザーが同じページを訪れる際、ブラウザは保存されたキャッシュデータを使用するため、サーバーから同じデータを再度ダウンロードする必要がなくなり、ページの読み込み速度が向上します。

.htaccessファイルでブラウザキャッシュの設定を行うことができます。具体的には、.htaccessファイルに以下のような設定を追加することで、画像やスタイルシート、スクリプトファイルのキャッシュ期間を30日間に設定することができます。

<IfModule mod_expires.c>
　ExpiresActive On
　ExpiresByType image/jpg "access plus 30 days"
　ExpiresByType image/jpeg "access plus 30 days"
　ExpiresByType image/gif "access plus 30 days"
　ExpiresByType image/png "access plus 30 days"
　ExpiresByType text/css "access plus 30 days"
　ExpiresByType application/javascript "access plus 30 days"
</IfModule>

ただし、.htaccessファイルの設定に間違いがあるとサイトが正常に動作しなくなることがあるため、変更を加える前には必ずバックアップを取っておくことをおすすめします。

CDNを導入することで、ページ速度を改善できます。「CDN」とは、Content Delivery Networkの略で、WEBコンテンツをユーザーへ高速に配信するためのサービスです。

通常、WEBサイトのデータは一つのサーバーから配信されるため、ユーザーが遠い場所にいる場合や多くのユーザーが同時にアクセスする場合には遅延が発生することがあります。

特に、画像や動画などデータ容量が大きいコンテンツを多用するWEBサイトや、キャンペーンやイベントなどで短期的にアクセスが集中する可能性があるWEBサイトでは、CDNの導入が非常に有効です。

CDNは、WEBサイトのデータを複数のキャッシュサーバーに分散保存します。ユーザーがページにアクセスすると、最も近いキャッシュサーバーからページデータが送信されるため、読み込み速度が向上します。

これにより、ユーザーの地理的な位置やアクセス状況に関係なく、一貫した高速なページ表示を実現できます。CDNの導入にはコストがかかりますが、自社サーバーに負荷をかけずにページ速度を改善することができます。

高性能なサーバーへの乗り換えは、ページ速度の改善に寄与する重要な要素の一つです。

サーバーの性能が低い場合、特にウェブアプリケーションが動的なコンテンツを生成する際やデータベースへのクエリが多い場合、ブラウザがページを表示するために必要なデータをサーバーから受け取るまでの時間が遅れる可能性があります。

サーバーの性能は、CPUの処理能力やコア数、メモリの容量と速度、ストレージの読み書き速度（特にSSDとHDDの違い）、そしてネットワークの転送速度や帯域幅などによって大きく影響を受けます。

サーバーの選択や乗り換えを検討する際には、現在のサーバーの負荷や利用状況を確認し、性能のボトルネックや改善点を特定することが重要です。モニタリングツールや性能テストツールを使用して、サーバーの現状を詳しく把握することが推奨されます。

また、サーバーレンタルを利用している場合、共用サーバー（シェアードホスティング）から専用サーバーやVPS（Virtual Private Server）への移行は、ページ速度を向上させるための一つの選択肢となります。

共用サーバーでは他のユーザーとリソースを共有するため、高トラフィックの状況下で性能が低下するリスクがありますが、専用サーバーやVPSではそのようなリスクが低減されます。

今回は、ページ速度の概要からSEOにおいて重要な理由、改善するメリット、計測方法、改善方法について解説しました。ページ速度は、ユーザビリティや検索順位に影響する要素です。

PageSpeed Insightsで自サイトのページ速度を測定することで、改善する必要があるのか、どうやって改善すれば良いかが分かります。

この記事で紹介した計測方法と改善方法を参考にし、ページ速度を改善しましょう。

尚、弊社ではページ速度の改善を含むページエクスペリエンスの改善代行サービスを行っています。
自社内で対応するリソースや、ノウハウが無い場合は気軽にご相談くださいませ。