ブラウザの DevTools の [Network] パネルを使用すると、 いつ読み込むかを定義します[Network] パネルの各行は、対応するネットワーク ウェブアプリが読み込んだ特定の URL です。
<ph type="x-smartling-placeholder">
読み込み対象のデータを確認する
ウェブ アプリケーションに適切なキャッシュ戦略を考えるには、 読み込む対象を正確に把握できる。信頼性の高いウェブを構築するとき ネットワークはあらゆる暗黒の力にさらされる可能性があります。必要なこと ネットワークの脆弱性を 理解することが重要です 。
ご自身のウェブ アプリケーションについて、 表示されます。静的 HTML を少し散らばって JavaScript、CSS、画像ファイルなどです。しかし、生成 AI を導入して コンテンツ配信ネットワークでホストされているサードパーティのリソースを混在させることに 動的 API リクエストやサーバーが生成したレスポンスに対して、 います。
いくつかの小さな CSS ファイルに対して有効なキャッシュ戦略では、 たとえば何百枚もの大きな画像でも 理にかなっているからです
読み込み時間を確認する
読み込みの全体像におけるもう一つの要素は、すべてを読み込むタイミングです。
IP アドレスや IP アドレスなど、ネットワークへの一部のリクエストは ナビのリクエスト ユーザーが特定のページにアクセスするとすぐに、無条件に作成される URL。この HTML には、重要な CSS または JavaScript へのハードコードされた参照が含まれている可能性がある インタラクティブ ページを表示するために読み込む必要のあるファイルについても記載されています。これらの クリティカルな読み込みパスに配置されます。データ アナリストは、 確実に高速にキャッシュします
API リクエストや遅延読み込みアセットなど、他のリソースでは、 初期読み込みがすべて完了するまで読み込みを開始します。条件 これらのリクエストは、特定のシーケンスのユーザー操作の後にのみ発生します。 まったく異なるリソースセットがリクエストされ、 同じページへの複数回の訪問で コンバージョンが促進されますあまり積極的でないキャッシュ戦略は、 多くの場合、デジタル サービス法 クリティカル読み込みパスを指定します。
[Name] 列と [Type] 列は、
[Name] 列と [Type] 列で、 確認できます。「読み込み対象」に対する答え上記の例では、合計は それぞれ固有のコンテンツ タイプを表す 4 つの URL。
[名前] にはブラウザがリクエストした URL が表示されますが、
URL のパスの最後の部分です。たとえば
https://example.com/main.css が読み込まれました。main.css のみが表示されます。
[名前] に表示されます。
URL パスの最後の数文字、
ピリオド（例: 「css」）は URL の拡張子として知られています。
この URL の拡張子は通常、リクエストされているリソースの種類、
[Type] 列に表示される情報に直接マッピングされます。たとえば
v2.html はドキュメント、main.css はスタイルシートです。
ウォーターフォール列は
[ウォーターフォール] 列を上から順に確認します。「 各棒の長さは読み込み時間の合計 表示されます。リクエストとリクエストの違いを、 リクエストがある場合 長時間待たないと いけないのではないでしょうか
ウォーターフォールの最初のリクエストは常に HTML ドキュメントに対するリクエストになりますが、
例: v2.html後続のすべてのリクエストは
（ウォーターフォール）など）に基づいて、
HTML ドキュメント参照のスタイル設定
ウォーターフォールでは、v2.html の読み込みが完了するとすぐにリクエストが
参照するアセット（サブリソースとも呼ばれます）から作成されます。「
ブラウザは複数のサブリソースを同時にリクエストできます。
main.css のウォーターフォール列の重なり合うバーで表されます。
logo.svg。最後に、このスクリーンショットを見ると、main.js が
最後に読み込みが行われ、他の 3 つの URL が完了した後に読み込みが終了します。
できます。