「Webサイトの表示速度でどのような影響があるのか分からない。具体的な改善方法について知りたい」
このようにお悩みの方もいるのではないでしょうか。表示速度を改善することで、SEO対策によい影響をもたらします。
今回は表示速度の重要性や計測・改善方法について解説します。表示速度が遅いと悩んでいる方は、ぜひ参考にしてください。
＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
SEO対策で表示速度が重要な理由
SEO対策を講じるうえで、表示速度は重要な指標の一つです。主な理由は以下のとおりです。
- Googleが公式に推奨しているため
- ユーザーの利便性に影響するため
それぞれ詳しく解説します。
Googleが公式に推奨しているため
Googleは2018年に公式ブログで、表示速度をモバイル検索のランキング付けの要素として使用することをアナウンスしました。あきらかに表示速度の遅いページは、SEOに悪影響を及ぼす可能性があるため、改善が必要です。
ただし、上記の公式ブログで言及されているのは、ユーザーが遅いと感じるページのみ評価が下がるということです。たとえば読み込みに10秒以上かかるようなページは、改善が求められるでしょう。
また、Googleが行った以下3つのアップデートにより、ページの表示速度はSEOにより重要視されるようになりました。
- スピードアップデート
- モバイルファーストインデックス
- ページエクスペリエンスアップデート
それぞれ詳しく解説していきます。
スピードアップデート
2018年1月に実施されたスピードアップデートでは、モバイルの検索結果において表示速度が遅いWebサイトの順位が下がりました。
しかし、対象となったのは極端に遅いページだけです。また、当時はPCとモバイルで異なる検索結果が表示されていたため、PCサイトには関係のないアップデートです。
そのため、ランキング要因にページの表示速度が組み込まれたのは確かですが、影響は微々たるものといえます。
モバイルファーストインデックス
モバイルファーストインデックスは2018年3月にGoogleが展開を始めた仕様変更です。当時のGoogleは、PCとスマホで異なる検索結果を表示しており、それぞれ以下の基準でランキングを決めていました。
| PC版の検索結果 | PC向けにに作られたページの評価が対象 |
| スマホ版の検索結果 | モバイル端末向けに作られたページの評価が対象 |
しかし、モバイルファーストインデックスによって、SEO評価の基準がモバイル向けに作られたページに統一されました。
モバイルファーストインデックス自体は、ページの表示速度とは関係ありません。重要なのは直前にスピードアップデートが行われていることです。
本来、スピードアップデートはPC版のランキングには関係がありませんでした。しかし、モバイルファーストインデックスによって、PCとモバイルの検索結果が統合されたことにより、PC版のサイトにも影響を及ぼすようになったのです。
ページエクスペリエンスアップデート
ページエクスペリエンスアップデートは、2021年6月に行われたアップデートです。優れたユーザー体験を提供するコンテンツを検索上位に表示するために、以下のような変更が行われました。
- ランキング要因にCore Web Vitalsを追加
- AMPバッジの廃止
- トップストーリーの条件変更
中でもCore Web Vitalsの追加は、ページの表示速度とも大きく関係しています。Core Web Vitalsは、Webサイトのユーザーエクスペリエンスを数値化した指標で、以下3つの要素で構成されています。
| LCP (Largest Contentful Paint) | 読み込み時間 |
| FID (First Input Delay) | インタラクティブ性 |
| CLS (Cumulative Layout Shift) | 視覚的な安定性 |
LCPでは、ページの表示速度がユーザーに与える体験が可視化され、2.5秒以上で改善が必要、3秒以上で不良と判定されます。つまり、ページの表示速度が遅いとLCPが低下し、検索順位に直接悪影響を与えます。
Core Web VitalsはGoogleサーチコンソールやPageSpeedInsightsで確認できるため、定期的にチェックしましょう。
ユーザーの利便性に影響するため
ページの表示速度が遅いと、利便性に悪影響をもたらします。ユーザーは早くコンテンツを読みたいという心理がありますが、読み込みに時間がかかるとストレスを感じ、ページが表示される前に離脱します。
ページから離脱されるWebサイトは、SEOにおいてもマイナス評価になりやすいです。したがって、ユーザーが快適にページ移動できるように改善する必要があるのです。
さらに、ユーザーの利便性の低下はコンバージョンにも悪影響をもたらします。ユーザーの離脱率が上がり滞在時間が短くなると、コンバージョンエリアにたどり着く可能性が低くなるためです。
また、コンテンツを確認してもらえないため、サービス内容なども伝わりません。上位表示できているページでも、コンバージョンにならなければ意味がないため、表示速度を改善しましょう。
Webページの表示速度の目安は？
Webページの表示速度の目安は、3秒以内です。
Googleが2018年に発表した調査では、ページ表示速度が1秒の場合に比べ、3秒かかったときは直帰率が32％上昇するとの結果が発表されています。また、表示に3秒以上かかったモバイルページでは53％ものユーザーが離脱しているとのことです。
この結果を踏まえると、ユーザーに3秒以上待たせることなくページを表示できることが望ましいといえます。
表示速度を計測する方法
ページ表示速度は、以下3つの無料ツールで計測できます。
- GooglePageSpeedInsights
- Google Analytics
- Lighthouse
ここから、計測方法や特徴を解説します。用途に合わせて使い分けましょう。
GooglePageSpeedInsights
GooglePageSpeedInsightsは、Googleが提供するページスピード計測ツールです。
ツールは次の手順で利用できます。
- URLを入力
- 分析をクリック
携帯とデスクトップに切り替えることで、デバイスごとのパフォーマンスをチェックできます。
表示されているスコアが50点未満は対策が不十分、90点未満は要改善、90点以上は良いパフォーマンスと評価されます。
赤字で表示されている箇所は、表示速度に影響していると見られる部分です。
改善できる項目を参考にすることで、ページ表示速度を改善できるでしょう。
なおデスクトップよりもスマートフォンのスコアの方が、低くなりやすい傾向です。
GoogleはモバイルフレンドリーなWebサイトを評価するため、スマートフォンのスコアを重点的に改善することが求められます。
Google Analytics
Google Analytics（アナリティクス）でも、表示速度の計測が可能です。
次の手順で、Webサイト全体の平均読み込み時間が閲覧できます。
- 左メニューから「行動」をクリック
- 「サイトの速度」から「概要」を選択
ページごとの読み込み時間は、次の手順で確認しましょう。
- 左メニューから「行動」をクリック
- サイトの速度から「ページ速度」を選択
全体の平均より遅いページは赤で表示されます。
またGoogle Analytics上でも、改善の余地があるページに対して、修正箇所を提案してもらえます。
- 左メニューから「行動」をクリック
- 「サイトの速度」から「速度についての提案」
前述したGooglePageSpeedInsightsに基づいて表示されるため、Googleアナリティクスのアカウントがあればスムーズにチェックできます。
Google Analyticsの設置方法などについては以下の記事をご覧ください。
Googleアナリティクスとは？設定方法や導入手順・使い方を解説
Lighthouse
LighthouseはGoogleが提供する、ページを分析するためのGoogle Chromeの拡張機能です。Core Web Vitalsの指標が確認できるなど、PageSpeedInsightsと重複する部分もありますが、より多くの項目を分析できます。
Lighthouseは、以下の手順で利用できます。
- LighthouseをGoogle Chromeに追加
- ブラウザの右上に表示されている拡張機能のマークをクリックし、Lighthouseを有効化する
- 調査対象のページを開き、Lighthouseのアイコンをクリックし、「Generate report」をクリック
- 調査結果が表示される
Lighthouseは日本語に対応していないため、ブラウザの拡張の機能と合わせて使うのがおすすめです。
また、基本的な項目の見方はPageSpeedInsightsと変わりません。状況に合わせて使いやすい方を利用すると良いでしょう。
ページの読み込みスピードが遅くなる原因
Webページの読み込みスピードが遅くなる原因は、主に以下の3つです。
- サーバースペックが低い
- 画像や動画のデータ容量が大きい
- HTMLやCSSのソースコードが複雑
それぞれ解説しますので、原因を把握して改善につなげましょう。
サーバースペックが低い
採用しているCPUや回線速度、メモリ容量は、各サーバーによって異なります。Webサイトの規模に対してサーバースペックが低いと、ページの読み込みスピードが遅くなる可能性があります。
また、共有サーバーでは複数のWebサイトが回線を使用しているため、状況によっては表示速度の遅延につながる恐れも。この場合、現状より高スペックなサーバーに移行するのが手早い解決策です。
共有サーバーの場合は、同程度のスペックを要した専用サーバーに切り替えることで改善を図れるでしょう。
しかし、サーバーの移行には手間と費用がかかります。そのため、移行作業に手間や費用を割けない場合は、CDN（コンテンツ・デリバリー・ネットワーク）の導入を検討するのも一つの手段です。
CDNは、Webサイト内のコンテンツを迅速に効率よくユーザーへ届けるためのネットワークです。サーバーにかかる負荷を軽減し、Webページを素早く表示できます。サーバーの移行に比べて費用がかからないため、移行が難しい場合は検討するとよいでしょう。
画像や動画のデータ容量が大きい
Webページ内で使用する画像のデータ容量が大きいと、ページの読み込みスピードは遅くなります。さらに、自社サーバーに直接動画をアップしている場合は、より動作が悪くなる恐れも。
Webページ内でデータ容量の大きい画像を使用する際は、圧縮やリサイズを活用して軽量化を図りましょう。また、ファイルの種類を変更することでもページ速度の改善につながります。ページ内でPNGを使用している場合は、JPEGに変更することで容量を軽くできます。
なお、最も効果的な改善方法は、必要性の低い画像を可能な限り削除することです。画像はむやみに追加せず、ユーザーの利便性を損ねない程度に使用しましょう。
動画を使用する際は、YouTubeなどの外部サービスを経由して埋め込みタグを設置すれば、サーバーへの負荷を減らせます。その他、動画のビットレートを下げるのも効果的です。
HTMLやCSSのソースコードが複雑
WebサイトはHTMLやCSS、JavaScriptなどで構成されていますが、これらのソースコードが複雑だとページの読み込みに時間がかかります。この場合は、不要なHTMLコメントアウトや空白、改行を削除するのが効果的です。
コンバージョンタグを設置している場合は多用を控えたり、表示速度への影響が少ないツールを導入するとよいでしょう。
ページ表示速度の改善方法
ページ速度を改善するための具体策は、主に以下9つです。
- 画像のファイルサイズ最適化
- WebP形式の画像を使用
- 画像に遅延読み込みの設定をする
- Webフォントの削減
- ソースコードの軽量化
- ブラウザのキャッシュを活用
- AMPの実装
- サーバー応答時間の短縮
- HTML・CSS・JavaScriptの最適化
それぞれの内容を参考に、ページ速度の改善を図りましょう。
画像のファイルサイズ最適化
ページの読み込み時間が長くなる要因に、画像のファイルサイズが影響している可能性があります。改善できる項目に「画像の最適化」が挙がっている場合は、適切なフォーマットを選び圧縮することで解決できます。
フォーマットによって画質やデータサイズが異なるので、適した形式を選びましょう。画像のサイズを圧縮したり、画像遅延読み込みを改善するプラグインを導入したりなどの方法も有効です。
WebP形式の画像を使用
WebPとは、Googleが開発した次世代型のWebに最適化された画像フォーマットです。
WebPの魅力は、1677万色とJPGと同等の画質を誇りながら、圧縮してもほとんど劣化しない点です。また、背景透過やアニメーションの実装にも対応しているなど、PNGやGIFの特性も併せ持っています。
圧縮率が高いため、Webサイト上の画像をすべてWebPに置き換えるだけでも、表示速度の向上が見込めます。目的に合わせてフォーマットを使い分ける必要もなく、表示速度以外のメリットも大きいので積極的に利用しましょう。
画像に遅延読み込みの設定をする
画像の遅延読み込みとは、ページにアクセスと同時に画像をすべて読み込ませない設定です。
ユーザーのディスプレイに、画像部分が表示された際にはじめて画像を読み込むため、ページを表示する際のレンダリングの負担が少なくなります。Lazy LoadというJavaScriptのライブラリを使い、以下の手順で実装します。
- HTMLのheadまたはbodyの先頭に以下のscriptタグを設置
<script src=”https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js”></script> - 遅延読み込みさせたい画像のimgタグにclass=”lazyload”とdata-src属性を設置
<img class=”lazyload” width=”500″ height=”500″ data-src=”img/sample.png” alt=”サンプル画像” /> - bodyの最後にscriptタグを設置し、llazyload()関数を実行
<script> lazyload();</script>
画像を多用しているコンテンツの場合、とくに効果が表れやすいです。ただし、画像を使って動きのあるサイトデザインなどを実装している場合は、見た目が崩れるため注意が必要です。
使い所を見極めながら、適切に設定しましょう。
Webフォントの削減
Webフォントとは、ユーザーの閲覧環境に左右されずに表示できるフォントのことです。デザインの幅が広がるため、多くのWebサイトで利用されています。
しかし、JavaScriptを使って外部から読み込む必要があるため、多用すると表示速度の低下を招きます。また、Webアイコンフォントも同様です。
デバイスフォントで代用したり、自社で似たアイコンを作成したりなどの工夫を行い、可能な限り削減しましょう。
ソースコードの軽量化
Webサイトを構築するソースコードを軽量化することで、ページ読み込みの負担を軽減できます。余分な改行や不要なコードがないかを見直し、削除を行いましょう。
自力で軽量化するのが難しい場合は、ソースコードの圧縮ツールを使う方法もあります。
ブラウザのキャッシュを活用
ブラウザのキャッシュを活用することで、表示速度の改善につながります。キャッシュとは、表示したウェブページのデータをブラウザに一時保存する機能のことです。
HTML上でキャッシュの有効期日や最大経過時間を設定することで、アクセスしたデバイスのローカルディスクからリソースを読み込むようになります。不要な通信を削減することで、スムーズにページを閲覧できます。
AMPの実装
AMP（アンプ）とは、Accelerated Mobile Pagesの略でWebページを高速表示させる手法のことです。AMPに対応したページは、GoogleやTwitterのようなサービスがキャッシュしています。
そのため、GoogleやTwitterなどでWebページを表示する際に、通常よりも早く開けるようになります。AMPに対応すれば、保存されたキャッシュを利用して開くため、ネットワークを介さずに表示できるのです。
サーバー応答時間の短縮
サーバーの応答時間を短縮できれば、表示速度を高められます。利用しているサーバーの反応速度が遅いと、Webサイトの表示に時間がかかります。
サーバーが原因の場合、スペックを高めることで改善できる可能性があります。
HTML・CSS・JavaScriptの最適化
HTML・CSS・JavaScriptなどを最適化すれば、スムーズにページが表示されます。複雑化したコードは簡略化し、表示速度に影響しやすいタグやツールの多用を控えることで、ページ全体の負荷を軽減できます。
ただし、HTML・CSS、JavaScriptの修正は、専門的な知識とリソースが必要です。自社で対応が難しい場合は、Webページ改修の専門家に相談することも検討しましょう。
PHPのバージョンを更新
PHPで動作しているWebサイトの場合、バージョンが古いことが原因で表示速度が遅くなっている場合があります。
WordPressでサイトを構築している際に起こりやすいため、定期的にバージョンを見直しましょう。アップデートは、サーバーの管理画面から行えます。更新方法は利用しているサーバーによって異なるため、各社のサポートページを確認してみてください。
プラグインの削除
WordPressなどのCMSでサイトを構築している場合、プラグインが原因で表示速度が低下している可能性があります。不要なプラグインがないか確認し、無効化や削除すれば表示速度の改善が見込めます。
また、直接コードを書いて実装できるものがあれば、置き換えても良いでしょう。プラグインは便利ですが、表示速度を優先するならできるだけ使用しないことをおすすめします。
リンク先のリダイレクトを確認する
特定のページへ訪れたユーザーを別のページへ自動的に遷移させるリダイレクトも、ページスピードを落とす原因になります。
Webサイトのドメインを移管する際や、PCとモバイルで異なるURLを表示する際に用いられることが多いです。不要なリダイレクトはできる限りなくし、必要最低限の場面でのみ使用しましょう。
ページスピードに関する注意点
ここからは、ページスピードに関する5つの注意点を解説します。
- ページスピードはネットワーク環境によって異なる
- ユーザー環境の速度が表示されない場合も
- 測定スコアが低くても実は良好なケースもある
- 改善策をすべて実行する必要はない
- ページスピードを改善してもリアルタイムでは反映されない
PageSpeed Insightsにも関係する項目のため、頭に入れておきましょう。順番に解説します。
ページスピードはネットワーク環境によって異なる
ページスピードは、ユーザーのネットワーク環境によって左右されます。ユーザーが利用するインターネットで通信障害が発生したり、回線速度が不安定だったりすると、ページの読み込みスピードが低下します。
そのためページスピードは、複数回計測しましょう。ただし、何度も計測するとサーバーに負荷がかかる恐れがあるため、多くても3回程度に留めてください。
ユーザー環境の速度が表示されない場合も
ユーザー環境における表示速度は、ページエクスペリエンスレポートのデータをもとに計測されます。しかし、以下のようにアクセス数やデータ通信量が少ないページでは、ページスピードを計測するための十分なデータを取得できません。
- 開設したばかりのWebサイト
- コンテンツの質が低いWebサイト
アクセス数が増えて、ページエクスペリエンスレポートのデータが取得できれば、実際のユーザー環境における表示速度を計測できるでしょう。
測定スコアが低くても実は良好なケースもある
PageSpeed Insightsでは、試験環境下のデータをもとにページスピードを計測します。そのため、測定スコアが低くても、実際のユーザー環境で計測された数値が良好なら問題ないでしょう。
また前述のとおり、ページスピードはローカルネットワークやサーバーの状態など、各ユーザーの環境によっても変動します。低いスコアが出ても、計測時の環境が悪かっただけのケースも考えられるため、落ち込む必要はありません。
ただし、PageSpeed Insightsは、ページスピードを悪化する原因があることを示すツールです。実際のページ速度に問題がなくても、遅いと判断された場合は、一度状況を確認すると安心でしょう。
改善策をすべて実行する必要はない
PageSpeed Insightsなどで表示された改善策をすべて実行する必要はありません。すべて対応すると時間と手間がかかり、他の作業に手が回らなくなる恐れがあります。
そのため、重要な改善策のみに絞って対応しましょう。推奨する改善策は、以下の3つです。
- 画像のファイルサイズ最適化
- ソースコードの軽量化
- HTML・CSS・JavaScriptの最適化
優先的に対応することで、効率よくページスピードを改善できるでしょう。
ページスピードを改善してもリアルタイムでは反映されない
Webページを改善しても、実際のユーザー環境におけるページスピードが、リアルタイムで反映されるわけではありません。
過去30日間のページエクスペリエンスデータをもとに計測されるため、実際に更新されるまでには時間を要します。
Googleは、実際のユーザー環境のデータを毎週更新していると述べていますが、いつ反映されているかは明らかにされていません。そのため、ページを改善した際には、1週間程度置いてから反映されているか確認するとよいでしょう。
Webサイトのページスピードについてよくある質問
ここからは、Webサイトのページスピードについてよくある質問に回答します。
Webサイトにおけるページスピードとは？
ページスピードは、Webページが読み込まれるまでにかかる速度です。スピードが速いほどページを閲覧するまでの待機時間を減らせます。
ユーザーは2秒以内にページを閲覧したいと考えていて、表示に3秒以上かかると40%が離脱してしまいます。また、ページの応答が1秒遅れるとコンバージョン率が7%低下します。
Webサイトにおけるページスピードは、ユーザーの利便性はもちろん、コンバージョンにも影響を与える重要な要素です。
ページスピードの平均点はいくつ？
PageSpeed Insightsにおけるページスピードの評価基準は以下のとおりです。
| 点数 | 評価 |
| 0～49点 | 要改善 |
| 50～89点 | 標準値 |
| 90～100点 | 速い |
平均ラインは50〜89点です。そのため、最低でも50点以上を目指すようにしましょう。
SEO対策には、ページスピード以外にも改善すべき項目が多くあります。PageSpeed Insightsで100点を取ることに時間をかけるのではなく、ある程度優先順位を決めて改善をおこないましょう。
まとめ：表示速度を改善してSEO対策を図ろう
Webページの読み込みは、1秒の遅延がアクセス数に影響を及ぼします。表示速度を改善することで、ユーザビリティやSEO評価の向上も期待できます。
本記事で紹介した計測方法や改善方法をもとに、Webサイトの表示速度を最適化しましょう。
SEO対策を外注する際の注意点について知りたい方は、以下の記事をご覧ください。
SEO対策を外注する前に、注意すべきポイントや外注先の選び方について詳しく解説しています。
外注先を探している、既にSEO対策を外注しているが効果が出ないとお悩みの方必見です。
SEO対策を外注しようとお考えの方はこちら＞＞＞【失敗しない】SEO対策を外注へ依頼する前にぜひ知ってほしい内容を徹底解説
SEO対策を外注する場合の費用相場について知りたい方はこちら＞＞＞SEO対策を代行業者へ依頼する場合の料金の相場は？
弊社SEOサービスランクエストではどんなお客様に対しても、予算状況に応じてSEOサービスを提供ができるように、「オーダーメイド型プラン」もご用意しております。お客様の課題や状況に合わせた最適なプランをご提案いたしますので、今後SEO代行業者をお探しになられる方は、ぜひ弊社サービスの内容をご覧ください。
株式会社eclore SEOコンサルタントチーム 責任者
新卒で入社しSEOの営業を年間300社以上行う。4年目でSEOコンサルチームに異動し、個人として約10社以上のコンサルをしている。マネジメントもしており、チームでは合計100サイト以上のSEOに関与。オールジャンル対応できるが、特に得意なのは歯科業界。SEOの先にある売上向上に目を向けて施策を行っている。
