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

WEBサイトのページが表示される仕組み

普段何気なくインターネットを利用していても、ページが表示される仕組みまでは知らないという方も多いでしょう。

WEBサイトのページが表示される仕組みは、大きく3つの流れに分かれています。

【ページが表示される流れ】

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

仕組みへの理解を深めれば、適切な対策の選択につながります。自社サイトの表示速度が気になっている方は、それぞれの流れを確認しておきましょう。

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

前提として、ユーザーがWEBサイトのページを閲覧するには、「IPアドレス」が必要です。

PCやスマートフォンのブラウザ上で閲覧したいページのURLを入力すると、ブラウザから「DNSリクエスト」が送信されます。DNSリクエストが「GoDaddy」などのドメインネームプロバイダーを経由して、IPアドレスにアクセスする仕組みです。

なお、ブラウザからIPアドレスにアクセスする一連の流れは、基本的にサーバーが自動で対応している特徴があります。

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

IPアドレスへのアクセス後、ブラウザは、HTMLファイルを読み込んでDOM（ドキュメントオブジェクトモデル）を生成します。

【ブラウザがDOMを生成するまでの流れ】

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

なお、HTMLファイルからDOMを生成する際、ページ内にあるすべての情報を読み込めるケースは稀です。そこで、次の「その他のサイズの大きいファイルを読み込む」という流れにつながります。

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

DOMを生成する時点で、ページ内にあるすべての情報を読み込めなかった場合には、最後にサイズの大きいファイルを読み込む工程があります。その際、Webページをすべて表示するためには、追加のリクエストをサーバーに送る必要があります。

【追加のリクエストによって読み込まれる情報の例】

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

なお、追加のリクエストをサーバーに送るたびに、Webページの表示速度や読み込み速度は低下します。

表示速度が低下する原因を突き止めて、適切な改善方法を選択するためにも、ページが表示されるまでの流れを覚えておいてください。

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

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

【表示速度の遅延による悪影響の例】

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

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

SEO検索順位の下落

はじめに起こる悪影響が、SEO検索順位の下落です。

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

2018年7月には「スピードアップデート」と呼ばれるアルゴリズムアップデートが実装されました。スピードアップデートは、表示速度が極端に遅いページの検索順位を下落させるといったもので、デスクトップだけでなくスマートフォンなどのモバイルも対象です。

スピードアップデートの実装によって、表示速度が遅いページは、SEO検索順位の下落というリスクを抱えることになりました。

また、2020年になってから、Googleは「コアウェブバイタル」と呼ばれるWebページUXの重要指標を発表しました。コアウェブバイタルにも、ページの表示速度に関連する指標が含まれています。

【コアウェブバイタルの3つの指標】

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

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

コアウェブバイタルの3つの指標のうち、少なくとも2つに、表示速度に関係する内容が含まれています。

Googleによれば、コアウェブバイタルはSEOに大きく影響する指標です。そのため、表示速度が遅いWebサイトは、SEO検索順位が下落するリスクを抱えています。

コンバージョン率（CVR）の低下

表示速度の遅延による2つ目の悪影響は、コンバージョン率（CVR）の低下です。コンバージョンとは、コンテンツからのお問い合わせやサービスの決済など、あらかじめ定めた目標の達成を意味します。

SEO対策や表示速度のデータから、コンバージョン率を上げるための理想的な時間は、「2.7秒以下」だと言われています。仮に、2.7秒を超えた場合には、コンバージョン率が最大7％減少してしまうと推測されています。

マーケティング施策が成功して見込み客をコンテンツに集めたとしても、本来獲得できたであろうコンバージョンを逃してしまえば、意味がありません。

そのため、コンテンツが表示されるまでのスピードを「高速」と判断できるレベルに改善することが、SEO検索順位を安定させてコンバージョン率を上げることにつながります。

ページの表示速度が遅くなる原因の例

ページの表示速度が遅くなる現象には、いくつかの共通する原因があります。

【表示速度が遅くなる原因の例】

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

ひとつでも当てはまる場合には、ページの表示速度が遅くなっているおそれがあります。表示速度が気になっている方は、それぞれの詳細を確認しておきましょう。

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

最適化されていない状態の画像は、ページの表示速度が遅くなる原因です。

たとえば、フリーの画像素材サイトなどからインストールした画像には、不要なデータが含まれている場合があります。ダウンロード後、そのまま使用した場合には、不要なデータを一緒に取り込んで画像の容量が重くなる原因になります。

また、ページ内に複数枚の画像があれば、不要なデータが積み重なった分だけ、Webサイトの表示速度が遅延してしまいます。

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

Webサイトの表示速度が遅くなる原因として、サードパーティーのスクリプトが挙げられます。サードパーティースクリプトとは、自社のWebサイト外のドメインから読み込むJava Scriptです。

【サードパーティースクリプトの例】

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

1つのサードパーティースクリプトが表示速度に与える影響はわずかです。しかし、コンテンツを増やせば増やすほど、スクリプトが積み重なって、表示速度に与える影響が大きくなります。

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

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

そのため、読み込むファイルが多いほど、表示速度に影響するおそれがあるのです。不要なファイルはできる限り削除しましょう。

原因④：サーバーやCMSの容量（スペック）が足りない

表示速度が遅延する4つ目の原因は、サーバーやCMSの容量（スペック）の不足です。サーバーもCMSも、Webサイトを表示するために不可欠なものです。

• サーバー：ブラウザからのリクエストに応えるソフトウェア
• CMS：WordPressなどのコンテンツ管理システム

どちらか一方であっても、容量が足りない場合には、表示速度が遅くなるおそれがあります。

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

表示速度の遅延となる最後の原因が、PHPやWordPress、jQueryのバージョンが古いことです。それぞれは、数ヶ月〜数年単位でソフトウェアの更新（アップデート）を実施します。仮に、更新を逃してしまった場合には、表示速度が遅くなるおそれがあります。

webページの表示速度を改善する方法の例

改善方法①：画像を最適化する

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

【画像を最適化する方法の例】

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

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

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

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

画像最適化の最後の方法が、「画像の遅延読み込み」を実装することです。

画像の遅延読み込みは、表示していないエリアの画像を遅れて読み込む方法です。実装すれば、画像が表示されるエリアにユーザーが入るまで、ダミーを表示または画像を非表示にしておくことができます。

ダミーの表示または画像の非表示で画像データを軽量化することにより、表示速度の向上を期待できます。WordPressの場合は、画像の遅延読み込みをプラグイン1つで実装できるため、比較的容易に取り組める方法の1つだと言えるでしょう。

ここで紹介した3つの画像最適化の方法は、どれか1つを取り組めば良いというわけではなく、できる限り多くの方法を実装することが望ましいです。そのため、取り組みやすいものから積極的に実践していくことをおすすめします。

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

サードパーティースクリプトの改善方法としては、スクリプト数を減らすこと、最適化することの2つの方法が挙げられます。

たとえば、必要以上にアドセンス広告を貼りすぎている場合や、不要なWordPressプラグインをインストールしている場合は、数を減らすことで改善できる可能性があります。

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

次に、サードパーティースクリプトの最適化には、下記の方法が考えられます。

【サードパーティーのスクリプトを最適化する方法の例】

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

たとえば、クリックされないアドセンス広告などは、明確な価値や意図のないスクリプトに該当するでしょう。削除すれば、表示速度の改善を望めます。

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

改善方法③：ファイルの中身を整理する（サイトをリニューアルする）

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

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

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

改善方法④：高速サーバーに移管する

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

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

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

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

改善方法⑤：最新版にバージョンアップする

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

たとえば、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の実装も専門知識が必要になりますので、エンジニアなどに依頼をしてみることを推奨します。

表示速度の計測方法を確認する

ページの表示速度が遅くなる原因に対する対策を取った後には、表示速度を確認しておきましょう。 実際に表示速度を計測してみて、評価が上がっていない場合には、再度対策が必要だからです。

表示速度に関するツール

ページの表示速度は、以下のようなツールを使って計測できます。

【ページの表示速度を計測するツールの例】

• 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サイトの表示速度を分析できます。

【Page Speed Insightsの項目の例】

• 次世代フォーマットでの画像の配信
• 効率的な画像フォーマット
• 適切なサイズの画像
• 使用していない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の項目の例】

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

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

また、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要素に関して再度ご説明します。

【コアウェブバイタルの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対策に活かすことも可能です。

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

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

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

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

まとめ

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

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

WEBサイト表示スピード高速化サービス資料 無料ダウンロードする

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス　『HP爆速くん for WP』の詳細はコチラ