Webサイトの表示速度改善方法！原因特定と施策の手順と具体的な方法

2025年11月19日

マーケティングで最も見落とされがちなのが表示速度の最適化です。

本記事では、表示速度最適化手法を、実装優先度と効果測定方法とともに具体的に解説します。

表示速度の概要について詳しくは表示速度とはの記事をご覧ください。

表示速度改善の前にサイトの状況を把握

まずはWEBサイトの状況を把握するために、信頼性の高い計測ツールで現状のパフォーマンススコアを確認していく必要があります。

ここではPageSpeed Insightsを使ったサイトの表示速度計測方法を解説していきます。

PageSpeed Insightsの測定方法と結果の確認方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。

スマホ・デスクトップの数値が見分けられる

計測されると下記の画像のような表示となり計測結果も表示されます。

ここでは、URL入力のすぐ下の部分（画像の赤で囲われている箇所）でスマホとデスクトップそれぞれの計測結果を別に見ることができます。

スマホとPCでは大きく差が生まれることが多く、スマホ・デスクトップ別にどこを修正したらいいか確認する際はこちらを見るようにしましょう。

実際のユーザーの環境での評価の見方

URL入力欄の少し下の部分に「実際にユーザー環境で計測する」という項目が出てきます。

実際にユーザー環境で計測された数値は下記画像の赤枠部分で確認することができます。

ポイントとして、ここで表示されているデータは「実際のユーザーの環境」での評価となります。

実際のユーザーの環境というのは、Chrome User Experience Report（CrUX）データに基づいており、以下の具体的な条件が加わり測定されています。

デバイスやブラウザ環境
回線速度や接続環境
地理条件

そのため「実際のユーザーの環境で計測されている数値」となり、ユーザー環境によっても変動することだけ理解しておくといいでしょう。

表示速度を改善する場合に確認する指標

表示速度を改善する場合は、下記の指標の数値を確認しましょう。

LCP（最も大きなコンテンツが表示されるまでの時間）
INP：ユーザーの操作に対するページの応答速度
FCP：ページ内で最初のコンテンツが表示されるまでの時間
TTFB：サーバーが最初のデータを返すまでの時間

上記以外にもPageSpeed Insightsでは「CLS」という指標があります。

CLSはレイアウトのズレを表す大事な指標ではありますが、表示速度という観点では直接影響しないので、ここはで割愛します。

パフォーマンスの問題を診断するの見方

更に下の方へスクロールすると、下記の画像のように「パフォーマンスの問題を診断する」という項目があります。

ここでは、パフォーマンス、ユーザー補助、おすすめの方法、SEOという項目に分けて改善方法が公開されます。

それぞれ詳しく解説していきます。

「パフォーマンス」の項目の見方について

パフォーマンスの項目は下記の画像のような項目が表示されています。

ここでは

FCP：ページ内で最初のコンテンツが表示されるまでの時間
LCP：ページ内で最も大きなコンテンツが表示されるまでの時間
TBT：ページが操作不能な時間の合計
CLS：ページ表示中のレイアウトの予期しない移動量
SI：ページの可視部分が表示される平均速度

これらの数値の評価が確認できます。

「パフォーマンス」の項目に関しては、「FCP」「LCP」「TBT」「CLS」「SI」という５項目の指標の数値が見れます。

また「パフォーマンスの問題を計測する」セクションは、Lighthouseエンジンによるラボデータ（シミュレーション環境）で測定されているという点は押さえておきましょう。

具体的には、下記のような環境下で計測されている数値となります。

CPUを4倍スローダウン
ネットワークを4G LTE速度に制限
モバイルは375×667px画面
デスクトップは1920×1080px画面
キャッシュなしの初回訪問の状態

実際のユーザー環境とは異なる理想的な実験室環境で、具体的な技術的問題の特定と改善提案に特化した診断結果となります。

インサイト・診断項目の見方

更にスクロールしていくと、下記の画像のようなINSIGHTS、診断という項目が出てきます。

ここでは、計測結果に応じた具体的な改善内容が確認できます。

上記画像の①では、各指標別の改善項目を絞り込むことができます。

②に関しては、具体的に改善余地のある項目が並びます。

更に右側にある③をクリックすると、更に詳しい改善箇所なども表示されます。

具体的な改善箇所を確認する場合は、インサイト・診断項目を確認して改善を進めましょう。

表示速度が遅い要素の確認と優先度の決め方

表示速度の改善は、遅くする要因が大きいものから改善していくことで施策効果を感じやすくなります。

施策を実施する前に、まずはどの部分が特に遅い要因となっているかを確認し、施策の優先度を決めましょう。

運用上の都合で全ての施策が難しいという場合に、とても役に立つ考え方となります。

下記で確認方法をご紹介します。

①計測する回線の基準を決める

まずは正確な測定環境の基準を決めましょう。

ユーザーの実際の通信環境を反映した測定が重要で、闇雲に計測しても意味がありません。

まずGoogle Analyticsでモバイル・デスクトップの訪問比率を確認し、モバイルが60%以上なら4G環境を測定基準にすべきです。

PageSpeed Insightsはデフォルトで4G想定のため、実環境に近い結果が得られます。

Chrome DevToolsを使った計測前の設定手順

Chrome DevToolsでは、「ネットワーク」タブからスロットリングをかけます。

基本的におすすめは「低速4G」を選択し、実ユーザーの体感速度を再現するのがいいかと思います。

上記の画像の赤枠部分で設定ができます。

サイトの計測目的に合わせて選択してみてください。

※ここの設定で計測結果もかなり変わるため、サイトに合わせて基準をしっかり作っておくことをお勧めします。

②サイト表示速度が遅い原因を把握する

サイトの読み込みを段階的に分けると下記のように分けられます。

ページのリクエスト開始からダウンロード完了までの時間
<head>内のリソースの読み込み時間
<body>内のリソースの読み込み時間

まずはどのフェーズの部分の読み込み速度に時間がかかっているかを確認します。

Chrome DevToolsでウォーターフォールを確認し優先を決める

Chrome DevToolsの「ネットワーク」タブを開き、サイトを読み込み直します。

そうすると、下記の画像のように読み込まれたファイルの一覧とウォーターフォールという列で読み込みの状況が把握できます。

上記の図で段階を表すと

赤い枠がページのリクエスト開始からダウンロード完了までの時間

黄色い枠が<head>内のリソースの読み込み時間

青い枠が<body>内のリソースの読み込み時間

という具合に段階に分けて確認することができます。

施策の優先度の決め方としては、上記で説明したグラフを確認し、読み込み時間が長い段階の部分から優先して施策をしていくのが表示速度のインパクトも大きいためお勧めです。

サーバーのレスポンス開始が遅い場合の表示速度改善方法

ウォーターフォールで一番初めに読み込まれるサーバーからのレスポンス受信開始からダウンロード完了までの時間が遅い場合はこちらの改善策をお試しください。

ここはサーバーからのレスポンスが大きく影響する段階です。

下記の手順で計測と現状を把握するところから始めましょう。

Chrome DevTools
「ネットワーク」タブ
スロットリングなしに設定
再度ページを読み込み

スロットリングについて通常は「低速4G」で設定することが多いですが、サーバーレスポンシブを正しく計測する場合は「スロットリングなし」に設定するので、その点だけ注意しておきましょう。

まずは、一番初めに読み込まれているファイルのフォーターフォールを確認します。

上記のように詳細を出したら「サーバーの応答を待機しています」の項目を確認します。

目安としてここが20ms以下であればとても良い状態です。

20〜40ms程度であれば許容の範囲になりますが、40ms以上ある場合は下記の改善ポイントをチェックしていきましょう。

②サーバーの応答速度をあげる

サーバー応答速度の向上は、TTFB（Time To First Byte）を改善してページ表示の基盤を最適化する手法です。

特に高性能サーバーへの移行、CDN導入、キャッシュ機能、HTTP/2またはHTTP/3の活用といった方法があり、これによりサーバー応答時間が短縮され、全体的なページ読み込み速度とユーザーエクスペリエンスが大幅に改善されます。

サーバーの速度改善方法も是非参考にしてみてください。

高性能サーバーを使用する

特にサーバーは、最新世代のCPU（多コア・高クロック）とSSDストレージ、大容量メモリ（16GB以上）を搭載したサーバーに移行することで、データベースアクセスやファイル読み込みが大幅に高速化されます。

また、サーバー帯域も重要な選定基準となります。サーバー規模別に合わせて帯域のプランも検討しましょう。

並行して最新のphpを利用している状態にしておくことをお勧めします。

サーバーの種類は専用サーバーを選ぶことで、CPUやメモリなどを独占で使用できるのでサーバーのパフォーマンスを最大限生かせます。

高性能サーバーのポイント

専用サーバーを選ぶ
高性能CPUのサーバーを利用する
SSDストレージを選ぶ
大容量メモリ（16GB以上）搭載のものにする
最新のphpを使用する
サーバー帯域

HTTP/2またはHTTP/3を使用する

HTTP/2およびHTTP/3は、従来のHTTP/1.1よりも通信効率が大幅に改善され高速化されます。

下記の画像のように、リクエストとレスポンスの効率が格段に上がります。

クライアントとサーバーとの接続効率があがることで表示速度も格段に上がります。

基本的にはサーバーサービスで設定ができるものがほとんどです。

HTTP/3やHTTP/2について詳しくは「HTTP/3とは？HTTP/2の違いや特徴を比較」の記事でも詳しく説明しています。

<head>内の読み込み時間が長い場合の表示速度改善策

ウェブサイトを表示するまでの過程として、サーバーのレスポンスを受けたあとは先に<head>を読み込みます。

<head>内の読み込みはCSSやJavaScriptなどの外部ファイルが、レンダリングのブロックにつながる要素が多いため表示の遅延を起こしやすい部分です。

レンダリングブロックにつながる要素を最適化していくことで表示速度改善に繋がります。

googleの表示速度の指標でもある「LCP」や「FCP」にも効果がある対策です。

詳しくは「レンダリングブロックとは」の記事をご覧下さい。

①CSSの最適化を行う

レンダリングブロックを回避するためのCSSの最適化の1つ目は、ファーストビューに必要な要素を内部CSS化させます。

内部CSS化というのは、ファーストビューで必要なCSS部分をHTMLの<style>タグ内に直接記述する方法です。

そうすることでファーストビューで必要なCSSだけを先に読み込むことができ表示速度が早くなります。

下記が記述のソースとなります。

<head>
  <style>
    /* 生成されたクリティカルCSS */
    body { font-family: sans-serif; }
    .header { background-color: #f1f1f1; }
    .main-content { padding: 20px; }
  </style>
</head>

また、ファーストビューに不要なCSSに関してはrel="preload"でHTMLの解析を停止せずに非同期で読み込みます。

読み込み完了時にonloadイベントでrel="stylesheet"に変更して適用します。

CSSやJavaScriptなどの外部ファイルは、上記のように非同期で読み込ませたり、不要な部分を後から読み込ませることでレンダリングブロックを防ぎ表示速度を改善させます。

②JavaScriptの最適化を行う

JavaScript最適化のおすすめの方法として、1つ目はファーストビューで必要な分のJavaScriptをasync属性で読み込みます。

async属性は、JavaScriptを非同期で読み込み・実行する属性なので、HTMLの解析を停止せずにスクリプトを並行してダウンロードし、準備完了次第すぐに実行されます。

async属性の記述例としては下記のようになります。

<!-- async: 非同期で読み込み・実行 -->
<script src="script.js" async></script>

2つ目はファーストビュー以外のJavaScriptをdefer属性で読み込みます。

defer属性は、JavaScriptの実行をHTML解析完了後まで延期する属性です。

スクリプトは非同期でダウンロードされますが、HTMLの解析が完了してからDOMContentLoaded前に、記述順通りに実行されるようになります。

jQueryなどのライブラリやDOM操作を行うスクリプト、依存関係があるコードに最適で、実行順序が保証されるためレンダリングブロックを回避しつつ安全にスクリプトを読み込めます。

defer属性の記述例としては下記のようになります。

<!-- defer: 並行ダウンロード、HTML解析完了後に実行 -->
<script src="script.js" defer></script>

※async属性、defer属性は<head>内での記述を行います。

これでレンダリングブロックを回避してページ表示速度を改善できます。

JavaScriptの最適化について詳しくは「JavaScriptの速度改善方法」もご覧ください。

コンテンツの表示速度改善方法

Webサイトの表示速度（サイトスピード）の改善方法

Webサイトの表示速度は、LPの離脱率やCVRやとSEO評価に直結する重要な要素です。

ページ読み込み速度の改善により、離脱率の低下、コンバージョン率の向上、検索順位の上昇が期待できます。画像最適化、サーバー設定、コード軽量化など、多角的なアプローチでサイトスピードを大幅に改善しましょう。

画像の最適化

画像はファイルサイズなどによっては読み込みに時間がかかり、表示速度を悪化させる要因になります。

主に、画像を軽量化させる方法や、遅れて読み込ませる方法などがあります。

次世代フォーマットの採用と画像圧縮

次世代フォーマットのWebPやAVIFを採用することで、従来のJPEGやPNGよりファイルサイズを削減し同等画質を実現します。

WebPは広範囲のブラウザサポート、AVIFはさらに高い圧縮率を提供します。

<picture>要素で複数フォーマットを指定し、ブラウザが対応形式を自動選択する実装が推奨されます。

画像変換ツールでフォーマットを変更する方法などもあります。

また、これと並行して画像圧縮もすることで最大限の効果を発揮できます。

先に画像圧縮を行い、その後に次世代フォーマットに変換するという流れがおすすめです。

これにより画像読み込み時間が大幅短縮され、ページ表示速度とユーザーエクスペリエンスが向上します。

次世代フォーマットについて詳しくは「次世代フォーマット画像とは？」をご覧ください。

画像の遅延読み込みの実施

画像の遅延読み込み（lazy load）は、画面に表示される画像のみを優先的に読み込み、それ以外の画像を後から読み込むという方法です。

通常は、ページ全体の画像を同時に読み込んでしまうため画像の表示に時間がかかり、ページの表示速度も遅くなります。

画面に表示される画像のみ先に読み込ませることで、初期表示速度を向上させることができます。

方法は簡単で、下記ソースのように表示を遅延させたい画像に「loading="lazy"」を挿入するだけで遅延読み込みができます。

<!-- 従来の書き方 -->
<img src="image.jpg" alt="説明文">

<!-- Lazy Load対応 -->
<img src="image.jpg" loading="lazy" alt="説明文">

遅延読み込み（lazy load）について詳しくは「Lazy Loadとは？仕組みや使い方などわかりやすく解説」をご覧ください。

参考：画像の表示速度改善

レスポンシブ画像の実装

レスポンシブ画像は、デバイスの画面サイズや解像度に応じて最適な画像を配信する手法です。

<img>タグのsrcset属性で複数サイズを指定し、sizes属性でブレイクポイントを定義することで、ブラウザが自動的に適切な画像を選択します。

レスポンシブ画像（srcset要素）の例

<!-- レスポンシブ画像指定 -->
<img loading="lazy"
     src="hero-small.jpg"
     srcset="hero-small.jpg 300w, 
             hero-medium.jpg 600w, 
             hero-large.jpg 1200w"
     sizes="(max-width: 600px) 300px, 
            (max-width: 1200px) 600px, 
            1200px"
     alt="レスポンシブ画像">

これによりモバイルでは小さな画像、デスクトップでは高解像度画像を配信し、無駄な通信量を削減してページ読み込み速度を大幅改善できます。

レスポンシブ画像について詳しくは「レスポンシブ画像とは」で解説しています。

ソースコードの軽量化と不要リソースの削除

ソースコードの軽量化は、HTMLやCSS、JavaScriptから不要な空白、改行、コメントを除去してファイルサイズを削減する手法です。

主に圧縮できるポイントとしては下記があります。

空白・改行・インデントの削除
不要なコメントやソースの削除
統合できるものは統合する

空白や改行などの削除ソース例

/* 圧縮前 */
.header {
    background-color: #ffffff;
    margin-top: 20px;
    padding: 10px 15px;
}

/* 圧縮後 */
.header{background-color:#fff;margin-top:20px;padding:10px 15px}

階層や値の統合や整理したソース例

/* 最適化前 */
.header { margin: 10px; }
.header { padding: 5px; }

/* 最適化後 */
.header { margin: 10px; padding: 5px; }

また、使用していないCSSルールやJavaScript関数の削除、重複コードの統合も効果的です。

これにより転送データ量が削減され、ページ読み込み時間の大幅短縮とサーバー負荷軽減を実現できます。

サードパーティーの最適化

サードパーティー最適化は、外部サービス（Google Analytics、広告、SNSウィジェット等）による速度低下を防ぐ手法です。

不要なサードパーティースクリプトを削除し、必要なもののみ厳選して読み込みます。

JavaScriptの最適化と同様にasync/defer属性で非同期読み込みを実施し、遅延読み込みでユーザー操作後に動かすという方法がおすすめです。

特にGoogle Tag Managerで統合管理している場合は、その中にあるタグの読み込み順序を制御や削除をすることで、サードパーティーによるレンダリングブロックを回避し、コア機能の表示速度を維持できます。

DOM階層最適化

DOM階層最適化は、HTMLの構造を単純化してブラウザの処理負荷を軽減する手法です。

過度にネストした要素や不要なdiv要素を削除し、階層の深さを浅くすることでレンダリング速度を向上させます。

下記のソース例のように、無駄な要素をまとめるなどしてDOM要素や階層の削減が実現できます。

<!-- 悪い例 -->
<div class="wrapper">
  <div class="container">
    <div class="section">
      <p>コンテンツ</p>
    </div>
  </div>
</div>

<!-- 良い例 -->
<section class="content">
  <p>コンテンツ</p>
</section>

適切なセマンティックHTMLタグを使用し、無駄なマークアップを排除することで、ブラウザのパースや描画処理が効率化され、特にモバイル環境での表示速度が大幅に改善されます。

DOMについて詳しくは「DOMとは」の記事で解説しています。

CDNとサーバーキャッシュを活用する

CDN（Content Delivery Network）は、世界各地のサーバーに静的コンテンツを配置し、ユーザーに最も近いサーバーからリソースを提供することで読み込み時間を大幅短縮します。

また、サーバーキャッシュは、動的コンテンツを一時保存してデータベースアクセスを削減し、応答速度を向上させます。

両者の組み合わせにより、グローバルな高速配信と効率的なサーバー処理を実現します。

CloudflareやAmazon CloudFrontなどでCDNサービスを利用でき、日本サービスではさくらのCDNなどがあります。

CDNについて詳しくは「CDNとは」で詳しく解説しています。

ブラウザキャッシュを活用する

ブラウザキャッシュは、CSS、JavaScript、画像などの静的リソースをユーザーのブラウザに一時保存し、2回目以降の再訪問時の読み込み時間を大幅短縮する仕組みです。

.htaccessファイル、HTMLのメタタグやJavaScriptなどでも指定できます。

また、ブラウザキャッシュの設定では、どのファイルに対して、どの程度の期間キャッシュをするか設定ができます。

リソースタイプ	推奨期間	理由
画像ファイル	1年	変更頻度が低い
CSS・JS	1ヶ月〜1年	バージョン管理で対応
フォント	1年	変更されることが稀
HTML	1日〜1週間	内容更新が頻繁

参考ではありますが、運用の必要性に応じてリソース別にキャッシュする期間を設定してあげるといいでしょう。

Webサイトの表示速度が重要な理由

webサイトの表示速度はウェブマーケティングにおいてかなり重要な要素です。

主に下記のような要素に影響します。

影響項目	損失の大きさ	改善の緊急度
ユーザー離脱	★★★★★	最優先
SEO順位低下	★★★★★	最優先
コンバージョン率低下	★★★★★	最優先
広告費の無駄	★★★★☆	高
ブランドイメージ悪化	★★★★☆	高
モバイル機会損失	★★★★★	最優先
競合への顧客流出	★★★★★	最優先
サーバーコスト増	★★★☆☆	中
採用への悪影響	★★★☆☆	中

特に要素として大きな部分をそれぞれ解説していきます。

表示速度と離脱率の関係

Webサイトの表示速度は、ユーザーの離脱率に直接的な影響を与えます。

Googleの調査によると、ページの読み込み時間が長くなるほど、ユーザーは待ちきれずにサイトを離れてしまいます。

表示速度別の離脱率データ

ページ読み込み時間	ユーザー離脱率	直帰率の増加
1秒	基準値	-
3秒	32%増加	+32%
5秒	90%増加	+90%
6秒	106%増加	+106%
10秒	123%増加	+123%

わずか3秒の遅延で、ユーザーの53%がサイトを離脱します。

さらに、表示速度が1秒から3秒に悪化するだけで、直帰率が32%も上昇するのです。

モバイル環境ではこの傾向がさらに顕著で、5秒以上かかるページでは74%のユーザーが離脱します。

特に、ECサイトや問い合わせフォームなど、コンバージョンを目的とするページでは、この離脱率の上昇が直接的な売上損失につながります。

ユーザーは待つことを嫌い、表示が遅ければ即座に競合サイトへ移動してしまうため、表示速度の最適化は最優先で取り組むべき課題です。

表示速度とSEO順位の関係

Googleは2021年のアルゴリズムアップデートで、ページ表示速度を検索順位の重要な評価指標として正式に組み込みました。

Core Web Vitals（コアウェブバイタル）の基準を満たさないサイトは、内容が優れていても検索結果で不利になります。

Core Web Vitals基準と順位への影響

指標	良好（合格）	不良（不合格）	順位への影響
LCP（表示速度）	2.5秒以下	4.0秒以上	2〜5位下落
INP（操作反応）	100ms以下	300ms以上	1〜3位下落
CLS（レイアウト安定性）	0.1以下	0.25以上	1〜2位下落

実際の調査データでは、ページ表示速度が1秒遅延するごとに検索順位が平均2〜3位下がることが確認されています。

特にモバイル検索では影響が顕著で、表示速度が4秒を超えるサイトは10位以上順位が低下するケースもあります。

表示速度の改善により、検索トラフィックが20〜40%増加した事例も多数報告されています。

SEO対策としてコンテンツ改善だけでなく、表示速度の最適化は必須の施策です。

表示速度とコンバージョン率の関係

Webサイトの表示速度は、購入や問い合わせなどのコンバージョン率に直結します。

ユーザーは表示が遅いサイトでは購入を諦め、競合サイトへ移動してしまいます。

逆に、ページ表示が1秒遅延するとコンバージョン率が平均7%低下します。

ECサイトでは、表示速度が0.1秒遅いだけで売上が1%減少するというAmazonのデータもあり、大規模サイトでは年間数億円の損失につながります。

問い合わせフォームでは表示速度が遅いと到達率が低下し、資料請求やメールアドレス登録も減少します。

Webサイトの表示速度改善方法まとめ

Webサイトの表示速度改善は、一度に完璧を目指す必要はありません。

できることから一つずつ、着実に進めていきましょう。

表示速度の改善は、SEO順位の向上、離脱率の低下、コンバージョン率のアップという3つの成果をもたらします。

焦らず、一歩ずつ改善を重ねることで、競合に勝てるWebサイトが完成します。

今日から始められる小さな施策でも、積み重ねれば大きな成果につながります。一緒に、より良いWebサイトを目指して頑張っていきましょう。

記事を書いた人

井上寛生

LandingHub 執行役員 / 事業責任者 / 技術責任者

大学院では情報工学を専攻し、修了後に株式会社TeNへ新卒入社。当時は社内唯一のエンジニアながら、開発部門をゼロから立ち上げ、採用・育成を一手に担い、全員が未経験からスタートした精鋭エンジニアチームを組成。2021 年にはWEBサイト高速化プラットフォーム「LandingHub」を立ち上げ、プロダクトオーナー兼事業責任者として企画・開発・グロースを牽引。現在は執行役員として、会社の技術戦略と事業成長の双方をリードしている。

コラム一覧に戻る