田中 雄太

ページ表示速度の仕組みと高速化・改善の方法について

高速化

ページ表示速度の仕組みと高速化・改善の方法についてのサムネイル

ページの表示が3秒以上かかるとユーザーの半分は離脱する、と言われていますが、それではSEOとの関連性はどのようになっているのでしょうか。

ページスピードと最新のSEO、また将来的な方向性や具体的な改善方法について、ユーザビリティの観点なども交えながら詳しく解説していきます。

目次 プラスマーク 表示 プラスマーク 閉じる

ページの表示速度が遅延することによる悪影響

ページの表示速度が遅延することによって、コンテンツの「直帰率が上がる」という悪影響は多くのWebサイトで確認されています。しかし、これらに加えて、下記2つのデメリットがあることも理解しておきましょう。

  • SEO検索順位の下落
  • コンバージョン率(CVR)の低下

それぞれの悪影響を順番に見ていきましょう。

SEO検索順位の下落

まず起こる悪影響が、SEO検索順位の下落です。検索エンジンで最大のシェアを占めているGoogleは、2010年の4月に、ランキングアルゴリズムに「表示速度」を導入することを発表し、こちらはスマートフォンなどのモバイルは対象外で、デスクトップ検索でのみ適用されたことが特徴です。

しかし、2018年7月には「スピードアップデート」と呼ばれるアルゴリズムアップデートが実装されました。

こちらのアップデートはデスクトップ・スマートフォンのどちらにも適用されるものであり、表示速度が極端に遅いページの検索順位を下落させるといったものです。つまり、スピードアップデートが実装されたことによって、表示速度の遅いページはSEO検索順位が下落してしまう危険性があることがわかります。

また、2020年、Googleは「コアウェブバイタル」と呼ばれるWebページUXの重要指標を発表しました。こちらのコアウェブバイタルでは、下記3つの指標を抑えておく必要があります。

参照:サイトの健全性を示す重要指標


  • LCP:動画の初期表示画像・背景画像のある要素・画像・テキストを含むブロックレベル要素などの「最大のコンテンツ」が表示されるまでの時間
  • FID:クリックやテキスト入力など、ユーザーがページ内でアクションを行った際にブラウザが反応されるまでの時間
  • CLS:ユーザーが意図せぬレイアウトのずれがどの程度発生しているか

上記から分かるとおり、コアウェブバイタルはUXの中でも「表示速度」に大きく関係している指標になります。同時に、これらの指標はSEOに大きく影響する指標であるため、スピードが遅いWebサイト=SEO検索順位が下落する悪影響があるということです。

コンバージョン率(CVR)の低下

表示速度が遅いことによる2つ目の悪影響は、コンバージョン率(CVR)の低下です。コンバージョンとは、コンテンツからのお問い合わせやサービスが決済されることを指します。

SEO対策や表示速度のデータによると、コンバージョン率を上げるための理想的な時間は「2.7秒以下」だとされており、これ以上遅くなってしまうと、最大でコンバージョン率が7%減少してしまうことがわかっています。

マーケティング施策がうまくはまり、せっかく見込み客をコンテンツに集めたのにも関わらず、本来獲得できたであろうコンバージョンを逃してしまうのは、大きな機会損失にほかなりません。

したがって、できるだけコンテンツが表示されるまでのスピードを高速にできるよう改善していくことが、SEO検索順位を安定させ、同時にコンバージョンさせるために重要だと言えるでしょう。

ページが表示される仕組みについて

ここまで、表示速度が遅いことによる悪影響を解説してきました。しかし、そもそもページが表示される仕組みや、読み込みされるまでの仕組みがわからないという方も多いのではないでしょうか。結論、Webサイトのページが表示される仕組みは下記3つの流れに分かれています。

  • IPアドレスにアクセスする
  • HTMLファイルを読み込む
  • その他のサイズの大きいファイルを読み込む

それぞれの流れを順番に見ていきましょう。

流れ①:IPアドレスにアクセスする

まず、ユーザーがページを閲覧するには、前提として「IPアドレス」が必要です。その流れとしては、ユーザーがブラウザを開き、閲覧したいページのURLを入力します。すると、「DNSリクエスト」が送信されます。

そして、DNSリクエストが「GoDaddy」などのドメインネームプロバイダーに通信し、IPアドレスにアクセスする仕組みとなっています。このIPアドレスにアクセスする一連の流れは、基本的にサーバーが自動で対応していることが特徴です。

流れ②:HTMLファイルを読み込む

IPアドレスにアクセスをしたら、次にHTMLファイルを読み込みます。このHTMLファイルを読み込み流れは、下記3つの流れに分かれています。

  • ブラウザは、サーバーからHTMLファイルを受け取る
  • ブラウザがHTMLファイルを読み込む
  • ブラウザがHTMLファイルをDOM(ドキュメントオブジェクトモデル)に変換する

なお、HTMLファイルをDOMに変換する際、ページ内にあるすべての情報を読み込めるケースは多くありません。そこで、次の「その他のサイズの大きいファイルを読み込む」という流れに繋がっていきます。

流れ③:その他のサイズの大きいファイルを読み込む

最後のその他のサイズの大きいファイルを読み込む流れですが、前提として、Webページをすべて表示するためには、追加のリクエストをサーバーに送る必要があります。たとえば、下記をWebページに表示させる場合です。

  • CSS:Webページのスタイルを指定するための言語(文字装飾など)
  • Java Script:Webページに動きを加える際などに使用する言語
  • 画像:アイキャッチや見出し直下の画像・イラスト
  • 動画:埋め込み動画など

なお、こういった追加のリクエストをサーバーに送るたびに、Webページの表示速度や読み込み速度が低下していく仕組みとなっています。また、これらの一連の流れを理解することで、表示速度低下の原因を突き止め、より高速なスピードへと改善していくことができるでしょう。

ページの表示速度が遅延するよくある原因と対策方法

ページの表示速度が遅延してしまうのは、必ず何かしらの原因があります。ここでは、ページの表示速度が遅延してしまう原因と、それぞれの対策方法についてご説明します。

  • 画像が最適化されていない
  • サードパーティーのスクリプトが多い
  • CSSやPHP、JavaScript等の情報読み込みファイルが多い
  • サーバーやCMSの容量(スペック)が足りない
  • PHPやWordPress、jQueryのバージョンが古い

考えられる原因は上記のとおりです。それぞれ順番に見ていきましょう。

原因①:画像が最適化されていない

まず、画像が最適化されていないことが原因として考えられます。たとえば、フリー画像素材サイトからインストールした画像をそのまま使用してしまうと、不要なデータも一緒に取り込んでいる可能性があるため、その分だけ画像の容量が重くなります。

結果的に、そういった画像が積み重なる分だけWebサイトの表示速度が遅延してしまいます。画像の最適化はすぐにでも取り込める対策方法の1つであるため、次でその方法について紹介します。

①の対策方法:画像を最適化する

画像を最適化する方法は、大きく分けて下記の3種類があります。

  • 容量を軽量化する(圧縮)
  • 次世代画像フォーマットにする(WebP等)
  • 画像の遅延読み込み

まず、最も容易に取り組める方法が「容量の軽量化」です。画像軽量化ツールはいくつか存在しますが、その中でもtiny pingが無料ツールの中で最も使いやすく、なおかつ軽量化の機能も優れています。

次に、次世代画像フォーマットに変更する方法も挙げられます。従来の画像の拡張子が「JPEG」や「PNG」であることに対して、次世代画像フォーマットは「WebP(ウェッピー)」や「JPEG XR」などの拡張子に変わります。

こちらの拡張子は、後述するコンテンツの表示速度を計測する「Page Speed Insights」で、表示速度の最適化に繋がるとして推奨されています。

画像最適化の最後の方法が、「画像の遅延読み込み」を実装することです。こちらを実装することで、画像が表示されるエリアにユーザーが入るまで、ダミー画像を表示するか、もしくは画像を非表示にしておくことができます。

表示エリアに入るまで画像が表示されないため、表示速度の向上に期待ができます。WordPressで運営されている場合は、画像の遅延読み込みをプラグイン1つで実装することが可能であるため、比較的容易に取り組める方法の1つだと言えるでしょう。

ここで紹介した3つの画像最適化方法は、どれか1つを取り組めば良いというわけではなく、より表示速度を速めるためにも、できる限りすべてに対応することが望ましいです。そのため、今すぐにでも取り組めるものから実践していくと良いでしょう。

原因②:サードパーティーのスクリプトが多い

Webサイトの表示速度が遅延する2つ目の原因が、サードパーティーのスクリプトが多いことです。サードパーティースクリプトとは、自社のWebサイト外のドメインから読み込むJava Scriptのことを指します。

代表的なサードパーティースクリプトは下記のとおりです。

  • WordPressプラグイン
  • YouTube
  • アドセンス広告
  • アプリ等

これらのスクリプトは、1つ1つが表示速度に与える影響はわずかです。しかし、コンテンツを増やしていくごとにこれらのスクリプトが積み重なるため、結果的に表示速度に与える影響は大きくなってしまうでしょう。

②の対策方法:サードパーティーのスクリプトを減らす・最適化する

サードパーティースクリプトの改善方法としては、スクリプト数を減らすこと、最適化することの2つの方法が挙げられます。たとえば、必要以上にアドセンス広告を貼りすぎていないか、不要なWordPressプラグインをインストールしていないかなどを確認してみましょう。

特に、WordPressプラグインは「テーマ」によって干渉してしまうことがあるため、事前にそれぞれの機能を細かく確認しておくことが重要です。

次に、サードパーティースクリプトの最適化ですが、代表的なものとして下記の方法が考えられます。

  • サードパーティスクリプトは、基本的に「async」もしくは「defer」で読み込む
  • preconnect/dns-prefetch等のresource hintsを活用する
  • 明確な価値や意図のないスクリプトを削除する

上記の中でも、たとえばクリックされないアドセンス広告などは、明確な価値や意図のないスクリプトに該当するでしょう。

なお、知見がない中でこれらを実装するのは大きなリスクです。そのため、表示速度改善に強みを持つエンジニアに依頼するのが最適だと言えるでしょう。

原因③:CSSやPHP、JavaScript等の読み込みファイルが多い

表示速度が遅延する3つの原因は、CSSやPHP、JavaScript等の読み込みファイルが多いことです。上述したように、ブラウザは一度にすべてのファイルを読み込むことはできず、HTML以外のファイルは細かく読み込む仕組みとなっています。

そのため、これらの読み込みファイルが多いほど表示速度の遅延に繋がりますので、できる限り不要なファイルを削除する必要があります。

③の対策方法:ファイルの中身を整理する(サイトをリニューアルする)

対策方法としては、ファイルの中身を整理することが挙げられます。Webサイトは、読み込むファイルが多くなるほど、上述した「DOM」のサイズが大きくなる仕組みとなっています。そもそもDOMとは、HTMLの階層の深さを表す指標だと思っておけばわかりやすいでしょう。

そのため、ファイルの中身を整理する方法としては、HTMLの階層を浅くするという考え方で問題ありません。具体的には、サイドバーやフッター・カテゴリー・アーカイブなどの「子要素」を削除し、状況に応じて「小カテゴリー」を作ってみましょう。

また、使用するWordPressテーマによってもDOMの大きさに違いがあるので、できる限りDOMが小さいテーマを使用するのがおすすめです。

原因④:サーバーやCMSの容量(スペック)が足りない

表示速度が遅延する4つ目の原因は、サーバーやCMSの容量(スペック)が足りないことです。サーバーとは、ブラウザからのリクエストに応えるソフトウェアのことで、CMSとは、WordPressなどのコンテンツ管理システムのことです。

これらの容量が足りないと表示速度が遅延する原因となります。

対策方法④:高速サーバーに移管する

サーバーやCMSの容量が足りない場合の解決策は、高速サーバーへの移転が最も容易だと言えるでしょう。高速サーバーの代表例は、エックスサーバーです。エックスサーバーは「https://」にURLを変更でき、常時SSL可にも無料で対応しているため、汎用性の高いサーバーだと言えます。

また、Amazon Web Servicesの略語である「AWS」を利用するのも1つの手です。AWSとは、Amazonが提供している100以上のクラウドコンピューティングサービスの総称で、サーバーや大容量のストレージ・高速なデータベースなどを必要な分だけ利用できることが特徴です。

WordPressなどのCMSに関しては、「KUSANAGI」と呼ばれるシステムの導入をおすすめします。KUSANAGIとは、WordPressで構築されたWebサイトの高速化を図れるシステムで、2021年時点で多くの企業に採用されています。

エックスサーバーへの移転やKUSANAGIの導入はエンジニアリングの知識がなくともできるため、今すぐに自社で対応をしてみても良いでしょう。

原因⑤:PHPやWordPress、jQueryのバージョンが古い

表示速度の遅延となる最後の原因が、PHPやWordPress、jQueryのバージョンが古いことです。特に、WordPressなどは1年に数回バージョンのアップデートが行われます。これらの更新を見逃してしまうと表示速度の遅延に繋がってしまいます。

⑤の対策方法:最新版にバージョンアップする

対策方法としては、それぞれを最新版にバージョンアップすることが挙げられます。しかし、最新版にバージョンアップする際、セキュリティの脆弱性にも注意が必要です。

たとえば、PHPを最新版にバージョンアップする際、脆弱性があるとWebサイトのデータが消えてしまう危険性があります。WordPressの場合は、最悪の場合Webサイト自体が表示されなくなってしまうことがあります。

これらの脆弱性を回避するためには、事前にバックアップを取っておくこと・SNS等で周りの声を拾うことが重要です。データのバックアップができるプラグインがありますので、WordPressの場合はそれらを導入してから最新版にバージョンアップするようにしましょう。

また、特にWordPressのバージョンアップの場合は、使用しているテーマによって脆弱性が異なります。そのため、同じWordPressテーマを使用しているSNSユーザーの声を拾い、安全性を確認できた後にバージョンアップすることを推奨します。

その他の高速化の方法

ここまで、表示速度が遅延する原因やそれぞれの対策方法について解説をしてきました。これまでの方法以外にも、下記2つの高速化を実現する方法もあります。

  • AMPを実装する
  • PWAを実装する

それぞれの高速化の方法を順番に見ていきましょう。

AMP

AMPとは「Accelerated Mobile Pages」の略語で、モバイルページを高速に表示させる手法のことを指します。2016年10月にAMPが初めて実装され、以降は多くのWebサイトがAMPに対応し、Webサイトの高速表示に成功しています。AMPを実装すると、SERPs(検索結果)に「カミナリマーク(⚡)」が表示されます。

また、なぜAMPが高速化に繋がるかというと、すべてのコンテンツのリソースサイズを静的に規定しているためです。加えて、非同期のJava Scriptのみを許容し、不要な読み込みや描画の負荷を減らしているため、必要な情報のみが高速で表示されるということです。

さらに、AMPが実装されたページは、「AMP Cache」と呼ばれる、AMPページのみを表示するためのコンテンツ配信ネットワーク(CDN)によってキャッシュされます。つまり、AMPに保存されたキャッシュからコンテンツを返す仕組みとなっているため、従来のようにWebサイトへアクセスする手間を削減することができ、ページの高速表示を可能にしています。

なお、AMPの実装はHTMLコードやmeta要素の指定などが必要になるため、こちらも専門知識を持つエンジニアに実装を依頼するのが望ましいでしょう。

PWA

PWAとは「Progressive Web Apps」の略語で、モバイルサイト上で、アプリのようなユーザー体験を実現するための技術のことです。PWAはアプリのようにインストールの必要がないのにも関わらず、プッシュ通知やホーム画面へのアイコン追加が可能です。そのため、マーケティング施策の一環として取り入れてみるのもありでしょう。

また、オフラインでの閲覧や、表示速度の高速化も実現できます。AMPには「リキャッシュ」が実装されているため、ユーザーが特定のページを読み込んでいる間に、次のページのデータを読み込める仕組みとなっていることが特徴です。

なお、AMPと同様にPWAの実装も専門知識が必要になりますので、エンジニアなどに依頼をしてみることを推奨します。

表示速度の体感とスコアは別で考える

先ほど、表示速度が遅延する原因と改善方法を解説してきました。ただし、表示速度の体感とスコアは別物であることを理解する必要があります。

というのも、先ほど挙げたすべての方法を実践し、実際に表示速度が改善されたとします。しかし、ユーザーが4G・5Gなどの異なる通信環境でブラウザを利用していた場合、当然ながらそれぞれのユーザーによって表示の体感速度は異なります。

つまり、スコアを完璧にしたとしても利用するユーザーの通信環境によって表示速度は異なるため、すべてのユーザーに対して同じ表示速度は提供できないということを理解しておきましょう。

表示速度に関するツール

ここからは、表示速度やその改善方法などを教えてくれるツールを6つ紹介します。

  • Page Speed Insights(Lighthouse)
  • Test My Site
  • Search Console
  • Web Vitals
  • Chrome UX Report
  • Chrome デベロッパーツール

それぞれのツールの特徴を順番に見ていきましょう。

Page Speed Insights(Lighthouse)

「Page Speed Insights」は、Googleが提供している表示速度を計測できるツールです。また、Page Speed Insightsは「Lighthouse」と呼ばれるGoogle Chromeの拡張機能の中の1つであり、上述したPWAに必要な項目を満たしているかどうかなどを調べられます。使用方法は非常にシンプルで、検索窓に調査したいWebサイトのURLを入力するのみです。

こちらのPage Speed Insightsでは、下記のような項目でWebサイトの表示速度を分析できます。

  • 次世代フォーマットでの画像の配信
  • 効率的な画像フォーマット
  • 適切なサイズの画像
  • 使用していないJavaScriptの削除
  • 使用していない CSSの削除

上記はあくまで一例ではありますが、これらを分析し、最終的に0点〜100点の間でWebサイトの表示速度をスコア化してくれます。さらに、モバイル版とPC版それぞれでスコア化してくれるため、SEO対策をするうえで重要な「モバイルファースト」になっているかを確認できます

Page Speed Insightsでは、それぞれの項目の改善提案も表示してくれる仕組みとなっているため、まず利用するべきページスピードチェックツールだと言えるでしょう。

Test My Site

「Test My Site」は、Googleが提供しているモバイルページの表示速度を確認できるツールです。こちらも使用方法は非常に簡単で、検索窓に調査したいWebサイトのURLを入力するのみです。Test My Siteでは、下記5つの項目を確認できます。

  • 読み込み速度
  • 訪問者の推定離脱率
  • 無料レポートを取得による、テスト結果の詳細情報
  • 同じ業種内の比較
  • サイトの速度を上げる

特に、上記の「同じ業種内の比較」では、同業種の競合サイトの表示速度を確認できるため、どの程度まで表示速度を速めれば良いのか参考にすることができます。

また、Test My Siteでは「HTMLのリソースを圧縮」など、モバイルページの表示速度を速める方法のレポートをダウンロードできますので、それらを参考に表示速度を速めることが可能です。

Search Console

Google Search Consoleでも、Webサイトのページごとに表示速度を調べられます。Search Consoleの左側のサイドバーにある「ウェブに関する主な指標」をクリックすると、モバイル・PCそれぞれの改善点を確認できます。

こちらでは、2021年5月から開始される「コアウェブバイタル」の要素である、「LCP/FID/CLS」を調べられます。

いずれも、ユーザー満足度に関わる指標としてGoogleが重要視していますので、この機会に一度確認してみることをおすすめします。

Web Vitals

「Web Vitals」は、上述した「コアウェブバイタル」の3要素である「LCP/FID/CLS」を調べられるツールです。この3要素に関して再度ご説明します。

  • LCP:画像・背景画像のある要素・テキストを含むブロックレベル要素などのメインコンテンツが表示されるまでの時間
  • FID:クリックやスクロールなど、ユーザーが最初に行ったアクションに対してブラウザが反応するまでの時間
  • CLS:ユーザーが意図せぬレイアウト崩れがどれだけ発生したか

これらはすべて「UX指標」であるため、ユーザーの満足度に直結する指標です。上述したように、2021年5月からはこれら3つの要素がより重要視されるようになるため、Web Vitalsを利用し、現時点でのそれらのスコアを確認しておくことが大切です。

Chrome UX Report

「Chrome UX Report」も、Webサイトの表示速度などを確認できるツールです。

「First Paint」と呼ばれるWebページの遷移時間や、「On Load」と呼ばれる外部リソースのロードにかかる時間などを調べられます。Page Speed Insights等と比較して若干専門用語が頻出するため、中上級者向けのツールであると言えるかもしれません。

また、Chrome UX Reportでは自社サイト以外のURLに関しても調べられるため、競合サービスや競合サイトの表示速度を確認してみると良いでしょう。

Chrome デベロッパーツール

「Chrome デベロッパーツール」とは、Google Chromeに標準で備わっている機能のことです。Webサイトの表示速度や通信環境・HTML構成などを調べられます。

何か別のツールをインストールしたり、エンジニアのように専門の知識を持ったりしなくても確認できるツールであるため、初心者の方でも利用しやすい機能だと言えるでしょう。

加えて、リンク切れやJavaScriptなどのプログラムエラーに関しても確認できるようになっているため、デベロッパーツールをSEO対策に活かすことも可能です。

まとめ

検索エンジンへの対策と言わざるを得ないSEO施策が多い中、ページスピードの高速化のSEOにおける意味というのは、ユーザビリティの向上という意味合いが非常に大きくなっています。 ユーザー体験重視の流れは今後のSEO業界の主流となっていく見通しのため、ユーザビリティを意識した施策はこれからさらに注目すべきポイントになってくるかもしれません。

弊社では、Webサイトの表示スピードの改善点を診断する「WEBサイト表示診断サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

【無料】資料請求&お申し込みはこちら

DOWNLOAD

資料ダウンロード

資料のイメージ画像

当社でご提供しているサービスの資料ダウンロードはこちらから。
SEOに課題を感じている方は、ぜひご覧になってください。

SEO診断の資料はこちら WEBサイト高速化の資料はこちら

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。