最も一般的なサイトパフォーマンス問題を診断し、レイテンシーとページ読み込み時間の改善のためのCloudflareオプションについて説明します。
概要
サイトの読み込みが遅い場合、次の手順でトラブルシューティングを進めてください：
- 過負荷またはトラフィックについてオリジンWebサーバーを調べます。ホスティングプロバイダーにオリジンWebサーバーの正常性を確認するように依頼します。
- webpagetest.orgを使用して、 遅延がCloudflare経由で発生しているのか、オリジンWebサーバーで直接発生しているのか確認します。
- パフォーマンスを最適化するCloudflareのオプションを確認します。
Webpagetest.orgでパフォーマンスをテストする
webpagetest.org もスピード問題のトラブルシューティングに利用できます。webpagetest.org はサイトスピードをテストし、リソース読み込み時間（画像、CSS、HTMLなど）についてのデータを提供します。webpagetest.orgは、インターネット接続の不良などのローカルインターネットの問題を防ぎます。
遅延の原因を評価するには：
- Cloudflareでテストを実行する
- オリジンWebサーバーに直接テストを行う
- レビューページの読み込み速度結果
Cloudflareでテストする
Cloudflareが現在サイトトラフィックをプロキシできている（一時的に停止するのでもなく、クラウドをグレー色にするでもない）場合、Cloudflareを介してページスピードを決定します：
1. https://www.webpagetest.org/へ移動します。
2. 地理的なテスト Locationと、ページ読み込みが遅いと感じる訪問者のブラウザとロケーションにぴったりと適合するブラウザを選択します。
3. 読み込みが遅いページのURLを入力し、「START TEST」をクリックします。
4. Cloudflareサポートでチケットを開ける必要がある場合に備えて、ブラウザのURLを完了したテスト結果にコピーしておいてください。
オリジンWebサーバーへ直接テストする
Cloudflareを一時的に停止するか、CloudflareDNSアプリのサブドメインDNSレコードをグレー色のクラウドにして、Cloudflareをバイパスしながらテストを実行します。
1. https://www.webpagetest.org/へ移動します。
2. 地理的なテストロケーションとブラウザをCloudflareとのテストとして選択してください。
3. Cloudflareとのテストで使用する同じURLを入力して、「START TEST」をクリックします。
4. Cloudflareサポートでチケットを開ける必要がある場合に備えて、ブラウザのURLを完了したテスト結果にコピーしておいてください。
ページ読み込み速度結果を見直す
ページ読み込みの平均速度を確認します：
- パフォーマンス結果下の完全な結果をプロットするをクリックします。
- 読み込み時間までスクロールして、平均時間を確認します。
- Cloudflareとのテストとオリジンへ直接でのテストを比較します：
- オリジンサーバーへのページ読み込み平均時間がCloudflareを介すよりも遅い場合は、ホスティングプロバイダーと低速の原因を調べてください。
- リソースの最初のリクエストだけが遅い場合は、サーバーがレスポンスを生成するのに長くかかりすぎたということを示します。最初にリソースがリクエストされた時、Cloudflareではキャッシュされていない可能性があり、リクエストはオリジンサーバーに送信される必要があります。ホスティングプロバイダーと低速の原因を調べてください。
- オリジンサーバーへのページ読み込み平均時間が、Cloudflareを介した時よりも速い場合は、Cloudflareサポートチケットを開けて次の詳細を提供してください。
- 遅いURL
- 比較したURLは、webpagetest.orgです。 スクリーンショットや添付ではなく、テスト結果への直接URLを提供してください。
- ドメインへのtracerouteです。
4. パフォーマンスを最適化するCloudflareのオプションを確認します。
サイトパフォマンスを最適化する
この短い動画は、あなたのサイトパフォーマンスを最適化にするCloudflareの機能について説明しています。
Cloudflareを使ってあなたのサイトを最適化する追加の方法は次の通りです：
キャッシングの最適化
Cloudflareのキャッシング設定は、デフォルトで意図的に慎重に行われるようになっています。デフォルトでキャッシュされているCloudflareの静的ファイルの種類を確認してください：
静的HTMLをキャッシュするには、Cache Everything Page Ruleを使用します。静的THMLのキャッシングは、ログインページやショッピングカートページなどの動的コンテンツには適していません。しかし、BusinessプランとEntertpriseプランのお客様は、 Bypass Cache on Cookie Page Ruleを作成することで、HTMLのキャッシングをしつつ、ログインページやショッピングカートページを誤ってキャッシング事態を避けることができます。
HTTP/2サポートにHTTPSを使う
HTTP/2はHTTP プロトコルの最新版で、ページ読み込みの加速化を図った機能強化がデザインされています。HTTP/2をサポートするのはHTTPSサイトだけです。
オリジンリダイレクトの代わりにCloudflare Page Ruleを
サイトを転送する際、オリジンWebサーバーでリダイレクトを実装する代わりに、CloudflareのPage Ruleを使います。Cloudflareのエッジからサイトトラフィックを転送するためにRage Ruleを使用すると、オリジンWebサーバーとの接続が遅くなることがありません。
Cloudflare Mirage と Polishの活用 （有料プラン）
無料のCloudflareプランをアップグレードしてCloudflareのMirageとPolishの機能にアクセスする
Polish と Mirageは、次の画像ファイル拡張子を使います:
- .jpg
- .jpeg
- .png
- .gif
Railgunで動的コンテンツを加速させる (Business プランとEnterpriseプラン）
Railgun は動的コンテンツをキャッシュします。Railgunを実行するWebサイトは、HTML読み込み時間において143%の改善が全般的に見られ、TTFBレスポンスでは90%減少しました。
Argo Smart Routingを使う
Argo はどんなプランにも簡単に追加できて、レイテンシーが平均33%まで短縮。サイトのキャッシュヒット率を上げることでArgoの階層型キャッシングとSmart Routingが、レイテンシーを短縮します。Argoを有効化についてのガイドとArgo請求に関するドキュメントをご参照ください。