Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

遅いウェブサイトのトラブルシューティング

最終更新 Markdown で表示Agent セットアップ

このガイドでは、ウェブサイトのパフォーマンス問題を特定し、解決します。基本的な診断から始め、高度なトラブルシューティングへ進みます。

始める前に: トラフィックが Cloudflare を経由していることを確認する

パフォーマンスを調べる前に、トラフィックが実際に Cloudflare を経由していることを確認してください。リクエストが Cloudflare を迂回している場合、問題は Cloudflare とは無関係であり、このガイドは役に立ちません。

cf-ray ヘッダーを確認する

Cloudflare 経由で返される応答には、必ず cf-ray ヘッダーが含まれます。このヘッダーを確認します。

curl -s -D- -o /dev/null https://www.example.com | grep -i cf-ray
(Invoke-WebRequest -Uri "https://www.example.com" -Method Head).Headers["cf-ray"]

cf-ray ヘッダー(例: cf-ray: 8a1b2c3d4e5f6g7h-SJC)があれば、トラフィックは Cloudflare を経由しています。ない場合は、DNS 設定を確認してください。

DNS が Cloudflare を指していることを確認する

トラフィックをプロキシするには、ドメインが Cloudflare の IP アドレスに解決される必要があります。

dig +short www.example.com
Resolve-DnsName -Name www.example.com | Select-Object -ExpandProperty IPAddress

返される IP アドレスは Cloudflare の IP である必要があります。オリジンサーバーを直接指している場合、DNS レコードはプロキシされていません。

修正手順は次のとおりです。

  1. Cloudflare ダッシュボード を開きます。
  2. 遅いホスト名の DNS レコードを探します。
  3. Proxy statusProxied(オレンジの雲アイコン)になっていることを確認します。

遅いリクエストの情報を集める

パフォーマンス問題は、何が遅いかを特定できると解決しやすくなります。まず、次の情報を集めます。

  1. 遅いリクエストを特定する - どの URL、アセット、API エンドポイントが遅いかを把握します。
  2. 遅さを測る - 遅延を数値化します(例: 「この画像の読み込みに 5 秒かかる」)。
  3. 問題を再現する - 遅さが一貫して起きており、一度限りでないことを確認します。

手順 1: Observatory でパフォーマンスを分析する

Observatory は、合成テストとリアルユーザーモニタリング(RUM)のデータを提供し、ウェブサイトのパフォーマンスを評価します。

RUM は特に重要です。メトリクスは実際の訪問者のブラウザーから取得されるため、サイトの体験を客観的に示します。ラボデータはデバッグに向くほど詳細ですが、実ユーザーが使うデバイスや接続性と常に一致するわけではありません。

速度テストを実行する

  1. Cloudflare ダッシュボードを開きます。

    Observatory を開く ↗
  2. Observatory を選択します。

  3. テストしたい URL を入力し、Run test を選択します。

結果を理解する

Observatory は次の主要メトリクスを報告します。

メトリクス 測定内容 目標
Largest Contentful Paint (LCP) 最も大きな表示要素が読み込まれるまでの時間 2.5 秒未満
First Contentful Paint (FCP) 最初のコンテンツが表示されるまでの時間 1.8 秒未満
Cumulative Layout Shift (CLS) ページ読み込み中の視覚的な安定性 0.1 未満
Time to First Byte (TTFB) 応答の最初のバイトを受信するまでの時間 800 ms 未満
Total Blocking Time (TBT) メインスレッドがブロックされている時間 200 ms 未満

リアルユーザーモニタリングでも似たメトリクスが報告されますが、Total Blocking Time (TBT) の代わりに Interaction to Next Paint (INP) が表示されます。

TBT はページ読み込み中だけを測ります。INP は、実訪問者がサイトで行うすべての操作を測ります。

推奨される最適化を有効にする

Observatory の結果に基づき、関連する Speed の最適化 を有効にします。

  • Brotli 圧縮 - 応答を圧縮し、転送を速くします
  • Early Hints - 重要なリソースをプリロードします
  • HTTP/2 と HTTP/3 - 多重化に対応した新しいプロトコルを使い、アセットごとに別接続を開くのではなく、1 本の接続で複数リクエストを送ります
  • 画像最適化 - 画像を自動で最適化し、リサイズします
  • Rocket Loader - JavaScript の読み込みを遅らせ、描画時間を改善します

手順 2: 遅いリソースを特定する

Observatory と RUM のデータが特定の問題を示している場合は、ブラウザーの開発者ツールで個々のリソースを調べます。

ブラウザーの開発者ツールを使う

  1. ブラウザーの開発者ツールを開きます。
  2. Network タブを開きます。
  3. ページを再読み込みし、時間がかかっているリクエストを確認します。
  4. Time または Duration で並べ替え、最も遅いアセットを特定します。
  5. 遅いリソースの具体的な URL を控えます。

次の点を確認します。

  • 大きな画像や動画
  • 遅い API 呼び出し
  • サードパーティスクリプト
  • 描画を妨げるリソース

手順 3: オリジンのパフォーマンスを分析する

ウェブサイトが遅い場合、原因はオリジンサーバー側にあることがあります。Origin Analytics で、オリジンの動作を把握します。

オリジンの応答時間を確認する

Cloudflare ダッシュボードで次の操作を行います。

  1. Speed > Origin Analytics を開きます。

    Origin Analytics を開く ↗
  2. Origin Response Time のメトリクスを確認します。

  3. 遅い応答のパターン(特定のパス、時間帯、地理的な地域)を探します。

オリジンの応答時間が長い場合、オリジンサーバーに負荷がかかっています。次を検討してください。

  • ホスティングプランのアップグレード
  • データベースクエリの最適化
  • サーバー側キャッシュの導入

利用できるメトリクス、診断の流れ、オリジンのステータスコードの解釈は、Origin Analytics を参照してください。

遅い Workers を確認する

ゾーンに Cloudflare Workers をデプロイしている場合、一致するリクエストごとに実行され、全体の応答時間に加算されます。遅い Worker は、TTFB が高くなるよくある原因です。

Workers がパフォーマンスに影響しているかを確認するには、次の手順を行います。

  1. Cloudflare ダッシュボードで Workers & Pages を開きます。
  2. ゾーンにデプロイされている Workers を確認します。
  3. 各 Worker の Analytics で実行時間を確認します。
  4. Workers を一時的に無効にし、遅さの原因かどうかを切り分けます。

Worker が遅い場合は、コードで次を確認します。

  • 遅い外部 API 呼び出しや fetch() リクエスト
  • 非効率なループやデータ処理
  • await がなく、並列ではなく直列に実行されている箇所

手順 4: コマンドラインでパフォーマンスを測る

特定リクエストの詳細なタイミングを知るには、コマンドラインツールでパフォーマンスを測ります。

基本的なパフォーマンステスト

curl -w "\n\nDNS Lookup: %{time_namelookup}s\nTCP Connect: %{time_connect}s\nTLS Handshake: %{time_appconnect}s\nTime to First Byte: %{time_starttransfer}s\nTotal Time: %{time_total}s\n" -o /dev/null -s https://www.example.com/slow-asset.jpg
$url = "https://www.example.com/slow-asset.jpg"
try {
    $timing = Measure-Command { 
        $response = Invoke-WebRequest -Uri $url -ErrorAction Stop
    }
    Write-Host "Total Time: $($timing.TotalSeconds)s"
    Write-Host "Status: $($response.StatusCode)"
} catch {
    if ($_.Exception.Response) {
        $statusCode = $_.Exception.Response.StatusCode.value__
        Write-Host "Error Status: $statusCode"
    }
    Write-Host "Error: $($_.Exception.Message)"
}

出力例(bash):

DNS Lookup: 0.025s
TCP Connect: 0.045s
TLS Handshake: 0.120s
Time to First Byte: 0.350s
Total Time: 1.250s

メトリクスを理解する

curl のタイミング内訳は、次のとおりです。

メトリクス 説明 値が高い場合に疑うこと
DNS Lookup ドメイン名の解決にかかる時間 DNS の問題、または遅いリゾルバー
TCP Connect TCP 接続の確立にかかる時間 ネットワーク遅延、またはサーバーまでの距離
TLS Handshake SSL/TLS ネゴシエーションの完了にかかる時間 証明書チェーンの問題、または遅いサーバー
Time to First Byte (TTFB) 応答の最初のバイトまでの時間 オリジン処理の遅さ
Total Time リクエスト全体の所要時間 ファイルサイズが大きい、または転送が遅い

別の場所からテストする

地理的に異なる場所からテストするには、次のようなオンラインツールを使います。


手順 5: キャッシュを調べる

キャッシュは、ウェブサイトのパフォーマンスを上げる最も効果的な方法の 1 つです。コンテンツがキャッシュされていると、Cloudflare は訪問者に近いデータセンターから直接配信し、オリジンサーバーへの往復をなくします。応答時間を数百ミリ秒から数ミリ秒まで下げられることがあります。

キャッシュされていないコンテンツは、訪問者から Cloudflare、さらにオリジンサーバーへと往復します。Cache Analytics でキャッシュの状況を把握し、さらにキャッシュできる箇所を見つけます。

アセットがキャッシュされているかを確認する

特定アセットのキャッシュ状態を確認します。

curl -s -D- -o /dev/null https://www.example.com/asset.jpg | grep -i "cf-cache-status"
(Invoke-WebRequest -Uri "https://www.example.com/asset.jpg" -Method Head).Headers["cf-cache-status"]

取りうる値は次のとおりです。

ステータス 意味 対応
HIT Cloudflare のキャッシュから配信された 対応は不要
MISS キャッシュになく、オリジンから取得した Cache Rule が必要な場合がある
DYNAMIC キャッシュ対象外 静的なら Cache Rule を作成する
BYPASS 意図的にキャッシュをバイパスした Cache Rule を見直す
EXPIRED キャッシュ済みコピーが古くなっていた Edge TTL を延ばす
REVALIDATED コンテンツが最新であることを Cloudflare が確認した Edge TTL を延ばす

一覧は Cloudflare のキャッシュ応答 を参照してください。

Cache Analytics を使う

  1. Cloudflare ダッシュボードを開きます。

    Overview を開く ↗
  2. Cache Performance セクションを確認します。

  3. Cache status equals MISS または DYNAMIC で絞り込み、キャッシュされていないコンテンツを特定します。

静的コンテンツがキャッシュされない理由を調べる

静的アセット(画像、CSS、JavaScript)のキャッシュステータスが DYNAMICBYPASSMISS の場合は、原因を調べます。

症状 考えられる原因 解決策
DYNAMIC ステータス コンテンツタイプが デフォルトのファイル拡張子 に含まれていない Cache Rule を作成してコンテンツをキャッシュする
DYNAMIC ステータス オリジンが Cache-Control: private または no-store を送っている Cache Rule で オリジンのキャッシュ制御を上書き する
BYPASS ステータス Cache Rule がキャッシュをバイパスしている Cache Rules の設定を見直す
毎回 MISS 応答に Set-Cookie ヘッダーが含まれる 静的アセットでは Cookie を設定しないようにオリジンを設定する。または Cache Rule で Cookie を無視 する
クエリ文字列付きで MISS クエリ文字列が違うと別のキャッシュエントリになる カスタムキャッシュキー でクエリ文字列を無視または正規化する

追加の静的コンテンツをキャッシュする

デフォルトでは、Cloudflare は特定の ファイル拡張子 だけをキャッシュします。追加の静的コンテンツをキャッシュするには、次の手順を行います。

  1. Caching > Cache Rules を開きます。
  2. 特定のコンテンツをキャッシュ するルールを作成します。
  3. 適切な Edge TTL を設定します。

Cloudflare Trace で Cache Rule をデバッグする

Cache Rule が想定どおりに適用されない場合は、Cloudflare Trace でリクエストをシミュレートし、どのルールが一致するかを確認します。Trace は、特定 URL に対して Cloudflare の設定(Cache Rule、Page Rule、その他の設定を含む)がどう影響するかを示します。

特に次の場合に役立ちます。

  • Cache Rule でキャッシュされるはずなのに、応答が DYNAMIC または BYPASS になる
  • どのルールが優先されているか分からない
  • 変更前に「もし〜なら」のシナリオを試したい

手順 6: ネットワークの問題を切り分ける

curl で TCP Connect や TLS Handshake の時間が長い場合、原因はアプリケーションではなくネットワーク側にあることがあります。

インターネット接続をテストする

speed.cloudflare.com で次をテストします。

  • ダウンロード速度とアップロード速度
  • レイテンシ(ping)
  • ジッター
  • パケットロス

結果が悪い場合は、ローカルネットワークまたは ISP に問題があります。

自分の場所から Cloudflare へ MTR を実行する

MTR は traceroute と ping を組み合わせ、各ネットワークホップのレイテンシとパケットロスを示します。

mtr -rw www.example.com

WinMTR をダウンロードし、対象に自分のドメインを指定して実行します。

次の点を確認します。

  • 特定ホップの 高いレイテンシ(遅いネットワーク区間を示す)
  • パケットロス(混雑や障害を示す)
  • タイムアウト(ファイアウォールやルーティングの問題のことがある)

詳細は MTR の読み方 を参照してください。

オリジンから Cloudflare へ MTR を実行する

オリジンサーバーにアクセスできる場合は、オリジンから Cloudflare の IP アドレス へ MTR を実行し、オリジンと Cloudflare のあいだのネットワーク経路をテストします。

mtr -rw 104.16.132.229

この経路でレイテンシやパケットロスが高いと、キャッシュミスしたすべてのリクエストに影響します。


手順 7: ネットワークルーティングを理解する

リクエストが Cloudflare データセンターへどうルーティングされるかは、パフォーマンスに大きく影響します。

リクエストを処理しているデータセンターを特定する

ドメインに /cdn-cgi/trace を付けて、どの Cloudflare データセンターがリクエストを処理しているかを確認します。

curl https://www.example.com/cdn-cgi/trace
Invoke-RestMethod -Uri "https://www.example.com/cdn-cgi/trace"

colo フィールドは、処理中のデータセンターを示す 3 文字の空港コードです(例: サンノゼなら colo=SJC)。データセンターとコードの一覧は Cloudflare ステータスページ で確認できます。

ルーティングが重要な理由

リクエストが Cloudflare に届くと、次の流れになります。

  1. リクエストは anycast ルーティング に基づき、近くの Cloudflare データセンターへ送られます。
  2. コンテンツがキャッシュされていれば、すぐに配信されます。
  3. キャッシュされていない場合、Cloudflare はオリジンサーバーから取得します。

オリジンサーバーが、ユーザーを処理している Cloudflare データセンターから地理的に遠いと、キャッシュされていないリクエストは遅くなります。

想定外のルーティングを切り分ける

ユーザーから遠いデータセンターへリクエストが送られている場合、Cloudflare の自動トラフィックエンジニアリングや、ユーザーの ISP によるルーティングが原因であることがあります。

Cloudflare は、最も近い拠点から配信して最良のパフォーマンスを目指しますが、最優先は信頼性です。パフォーマンスと信頼性が相反する場合、Cloudflare のシステムは近くの接続より安定した接続を優先します。

詳細は 地理的に最も近いデータセンターに Cloudflare トラフィックが送られない を参照してください。

想定外のルーティングのよくある原因は次のとおりです。

症状 説明
遠いデータセンターへルーティングされる 信頼性のための Cloudflare トラフィックエンジニアリング、または ISP のルーティング判断
リクエストごとにルーティングが変わる 通常の動作です。ルーティングはネットワーク状況や ISP の負荷分散に合わせて変わります
遠い地域へ一貫してルーティングされる ISP のピアリング地点、または Cloudflare の容量管理
近くにデータセンターがあるのにレイテンシが高い 経路上のネットワーク混雑

オリジンまでの距離への対策

必要に応じて、次の対策を検討してください。

対策 説明 向いている場合
キャッシュヒット率を上げる より多くのコンテンツをキャッシュし、オリジン取得を減らす すべてのサイト
Tiered Cache 上位層データセンターを使い、オリジンリクエストを減らす グローバルなトラフィックがあるサイト
Argo Smart Routing より速いネットワーク経路でトラフィックを送る オリジン接続が遅いサイト
オリジンを近づける 複数リージョンにオリジンサーバーを置く 大規模なアプリケーション

Argo Smart Routing を有効にする

Argo Smart Routing はネットワーク状況をリアルタイムで分析し、最も速い経路でトラフィックを送ります。レイテンシを平均 30% 下げます。

Argo Smart Routing は Smart Shield の一部です。Smart Shield は、Cloudflare の複数のパフォーマンスおよび信頼性機能をまとめたものです。

Argo Smart Routing を有効にするには、次の手順を行います。

  1. Cloudflare ダッシュボード を開きます。
  2. Smart Shield のセットアップガイド に従い、機能を有効にします。

Argo は、次の場合に特に効果的です。

  • オリジンがユーザーから遠い
  • 特定の経路でネットワーク混雑が起きている
  • 世界各地で一貫したパフォーマンスが必要

Argo Smart Routing の仕組みの詳細は、Argo Smart Routing のドキュメント を参照してください。


問題が続く場合はサポートに連絡する

上記の手順を試してもパフォーマンス問題が続く場合は、Cloudflare サポートに連絡 してください。

サポートに連絡するときは、問題の切り分けに役立つ証拠をできるだけ添えてください。

  • HAR ファイル - 遅いリクエストを捉えた HAR ファイルを生成 します。各リクエストの詳細なタイミングが分かります。
  • Observatory の結果 - Observatory のテスト結果のスクリーンショットまたはリンクを共有します。
  • RUM データ - Web Analytics を有効にしている場合は、パフォーマンス問題を示す関連メトリクスを共有します。
  • curl の出力 - 遅いアセットについて、curl --write-out のタイミング内訳を含めます。
  • MTR の結果 - ネットワークの問題が疑われる場合は、自分の場所から対象ドメインへの MTR 出力を含めます。
  • 具体的な URL - 遅い URL を正確に列挙し、想定応答時間と実際の応答時間を添えます。

遅さを示す証拠が多いほど、サポートは問題を早く特定し、解決できます。


関連リソース

役に立ちましたか?