「Webサイトの表示速度でどのような影響があるのか分からない。具体的な改善方法について知りたい」
このようにお悩みの方もいるのではないでしょうか。表示速度を改善することで、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と変わりません。状況に合わせて使いやすい方を利用すると良いでしょう。
ページ表示速度の改善方法
ページ速度を改善するための具体策は、主に以下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でサイトを構築している場合、プラグインが原因で表示速度が低下している可能性があります。不要なプラグインがないか確認し、無効化や削除すれば表示速度の改善が見込めます。
また、直接コードを書いて実装できるものがあれば、置き換えても良いでしょう。プラグインは便利ですが、表示速度を優先するならできるだけ使用しないことをおすすめします。
まとめ：表示速度を改善して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の先にある売上向上に目を向けて施策を行っている。
