React 開発者向けの初期ロード パフォーマンス: 詳しい調査

- ウェブページの最初の画面のパフォーマンスと最適化戦略の詳細

ディレクトリ

最初の読み込みパフォーマンスインジケーターはじめに

1. オーバーブトゥールの概要
2. プロジェクト設定
   必要なdevtools
   1. を探索します
   さまざまなネットワーク条件を探索します
非常に遅いサーバー
3. さまざまな帯域幅と遅延
   1. をシミュレートします
   cdn
   2. の重要性
   アクセスのパフォーマンスをリピート
キャッシュコントロールヘッダーを使用してブラウザキャッシュを制御
4. キャッシュ制御および最新のパッケージングツール
   私の簡単なケースは本当にこれらすべてを知る必要がありますか？
   今日、AI駆動型のコード生成の重要性は活況を呈しており、Reactコードを作成することの重要性は減少しています。誰でも、あらゆるものを使用して、Reactでアプリケーションを作成できます。しかし、コードを書くことは常に問題の一部でした。アプリケーションをどこかに展開し、ユーザーに見せ、強化し、速くし、他の100万のことを行う必要があります。これらを引き継ぐAIはありません。少なくともそれはまだ不可能です。
したがって、今日、アプリケーションを迅速に実行する方法に焦点を当てましょう。この目的のために、一時的に反応を残す必要があります。より速く何かを作る前に、まず「速い」とは何か、それを測定する方法、そしてこれに影響を与える可能性があるため、まず知る必要があるからです。

ネタバレ警告：学習プロジェクトに加えて、この記事には反応はありません。今日は基本的な知識に関するすべてです。パフォーマンスツールの使用方法、コアWebバイタルの紹介、Chromeパフォーマンスパネル、初期読み込みパフォーマンスは何ですか、どのインジケーターが測定できるか、キャッシュ制御とさまざまなネットワーク条件がどのように影響するか。

最初の読み込みパフォーマンスインジケーターはじめに

ブラウザを開いて、お気に入りのウェブサイトに移動しようとするとどうなりますか？ "リクエストを取得して、返品としてHTMLページを受信しました。

この操作を実行するのに必要な時間は、「最初のバイト時間」（TTFB）と呼ばれます。送信要求から到着の結果の結果までの時間です。 HTMLを受信した後、ブラウザはこのHTMLをできるだけ早く利用可能なWebサイトに変換する必要があります。

最初に画面上のSO -Caledの「キーパス」をレンダリングします。ユーザーに表示できる最小および最も重要なコンテンツです。

キーパスに含める必要があるのは、複雑な問題です。理想的には、すべてがユーザーに完全なエクスペリエンスをすぐに確認できるようにすることです。しかし、同じものは、「キー」パスであるため、できるだけ速くする必要があるためです。 2つは同時に不可能なので、妥協する必要があります。

妥協はこのようなものです。ブラウザは「キーパス」を構築すると想定しています。少なくとも次の種類のリソースが必要です。

サーバーから受け取った最初のHTMLは、実際のDOM要素を構築し、エクスペリエンスを構築するために使用されています。
これらの初期要素の重要なCSSファイル - 他の場合、それがそれらを待たずに続けている場合、ユーザーは最初に奇妙に言いようのないコンテンツを「ちらつき」見るでしょう。
キーJavaScriptファイルは同時に変更されます。

ブラウザは、サーバーの最初の要求で最初（HTML）を取得します。それはそれを分析し、このプロセスの「キーパス」を完了する必要があるCSSファイルとJSファイルのリンクを抽出し始めました。次に、サーバーからそれらを取得し、ダウンロードし、それらを処理し、これらすべてを組み合わせて、特定の瞬間に画面に「キーパス」ピクセルを描画するのを待つリクエストを送信します。

これらの主要なリソースなしではブラウザが初期レンダリングを完了できないため、「ブロッキングリソースのレンダリング」と呼ばれます。もちろん、すべてのCSSおよびJSリソースがブロックされているわけではありません。通常のみ：

ほとんどのCSS、それが内部結合であろうと

• タグを介していても。 ラベルは、非同期または遅延JavaScriptリソースではありません。
「キーパス」をレンダリングするプロセス全体が大まかに表示されます。

ブラウザは、初期HTML

の分析を開始します

プロセスでは、ラベルからCSSおよびJSリソースのリンクを抽出します。
次に、ダウンロードプロセスを開始し、ブロッキングリソースがダウンロードを完了するのを待ちます。
待っている間、可能であれば、HTMLに対処し続けます。
すべての主要なリソースを受け取った後、それらも処理します。
最後に、インターフェイスの実際のピクセルを完了します。
• 今回は、初めて
draw（fp）

と呼ばれるものです。ユーザーが画面に何かを見る機会があるのはこれが初めてです。それが起こるかどうかは、サーバーから送信されたHTMLによって異なります。テキストや画像などの意味のあるものがある場合、これは最初のコンテンツ描画（FCP）の時間でもあります。 HTMLが単なる空のDIVである場合、FCPは後で発生します。

最初のコンテンツ図面（FCP）

は、知覚されたの初期負荷を測定するため、最も重要なパフォーマンスインジケーターの1つです。基本的に、これはユーザーのWebサイト速度の予備的な印象です。

この瞬間まで、ユーザーは爪を噛むために空白の画面を見つめていました。 Googleによると、良好なFCP数は1.8秒未満です。その後、ユーザーは、ウェブサイトが提供できるコンテンツへの関心を失い、去り始める可能性があります。

ただし、FCPは完璧ではありません。 Webサイトがローターまたはいくつかのロード画面でロードを開始する場合、FCPインジケーターはコンテンツを表します。しかし、ユーザーがウェブサイトに移動して、派手なロード画面を表示する可能性は低いです。ほとんどの場合、彼らはコンテンツにアクセスしたいと考えています。

このため、ブラウザは開始を完了する必要があります。非ブロッキングJavaScriptの残りの部分を待っており、それを実行し、画面上のDOMに変更を適用し、画像をダウンロードし、他の方法でユーザーエクスペリエンスを改善します。

プロセスの特定の時点で、最大コンテンツの描画時間が発生します。これは、FCPのような最初の要素ではなく、ページのメインコンテンツ領域（可視ポート）に表示される最大のテキスト、画像、またはビデオです。 Googleによると、この数値は2.5秒未満

にする必要があります。この数よりも、ユーザーはウェブサイトが遅いと考えるでしょう。

これらすべてのインジケータは、GoogleのWeb Vitalsの一部です。ページ上のユーザーエクスペリエンスのインデックスセットです。 LCPは、3つのコアWebバイタル - 3つのインジケータの1つであり、ユーザーエクスペリエンスのさまざまな部分を表しています。

lcp責任ある

パフォーマンスの読み込み これらの指標は、灯台を介して測定できます。 LighthouseはGoogleパフォーマンスツールです。これは、Chrome Devtoolsに統合されており、Shell Script、Webインターフェイス、またはノードモジュールを実行できます。制作環境で戻る前に、構造中に実行して検出できるように、ノードモジュールとして使用できます。ローカルデバッグとテストには、統合されたDevToolsバージョンを使用します。競合他社のパフォーマンスを確認するWebバージョン。 オーバーブトゥールの概要 上記は、プロセスの非常に簡潔で簡素化された説明です。しかし、人々を混乱させる多くの略語と理論があります。個人的には、そのようなコンテンツを読むのは役に立たない。動作しているので自分で操作できない限り、すぐにすべてを忘れます。 この特定のテーマでは、これらの概念を完全に理解する最も簡単な方法は、セミリアルページでさまざまなシーンをシミュレートし、結果をどのように変更するかを確認することであることがわかります。したがって、より多くの理論の前に（たくさんあります！）、これをしましょう。

プロジェクト設定

喜んでいる場合は、独自のプロジェクトで次のすべてのシミュレーションを実行できます。結果は多かれ少なかれ必要です。ただし、より制御可能で簡素化するためには、この記事に備えた学習プロジェクトを使用することをお勧めします。ここで訪問できます：

https://www.php.cn/link/def14e8541708294d7558fdf2126ef27

最初にすべての依存関係をインストールします：

<code>npm install</code>

建設プロジェクト：

<code>npm run build</code>

サーバーを起動：

<code>npm run start</code>

"https://www.php.cn/link/66e8d052ec2230c66bd11e6b5a0e3c8

必要なdevtools を探索します

ChromeおよびOpen Chrome Devtoolsで分析するWebサイトを開きます。そこに「パフォーマンス」と「灯台」パネルを見つけて、それらをまとめます。両方が必要です。

さらに、この記事で他の操作を実行する前に、「無効なキャッシュ」チェックボックスが有効になっていることを確認してください。上部の「ネットワーク」パネルに配置する必要があります。

この方法では、最初の訪問者をシミュレートすることができます - 当社のウェブサイトにアクセスしたことがなく、ブラウザはリソースをキャッシュしていません。

灯台パネルを探索します

灯台パネルを開きます。そこには、いくつかの設定と「分析ページの読み込み」ボタンが表示されます。

このセクションでは、「ナビゲーション」モードに興味があります。ページの初期負荷を詳細に分析します。レポートでは、次のスコアが提供されます。

ローカルパフォーマンスは完璧ですが、これは驚くことではありません - すべてが「私のマシンで実行されています」。

次の指標もあります

ここで必要なFCP値とLCP値は、上部にあります。

以下に、スコアを改善するのに役立つ提案のリストが表示されます。

各提案を拡張でき、そこに詳細情報を見つけることができます。また、特定のテーマを説明するためのリンクを見つけることもあります。これがすべて行動を起こすことができるわけではありませんが、パフォーマンスの学習を開始し、それを改善できるさまざまなことを理解する優れたツールです。これらのレポートと関連するリンクを読むのに数時間かかります。

ただし、灯台は表面情報のみを提供し、遅いネットワークや低いCPUなどのさまざまなシナリオをシミュレートすることはできません。それは単なる良いエントリポイントであり、時間の経過とともにパフォーマンスを追跡するための優れたツールです。何が起こっているのかをより深く理解するには、

「パフォーマンス」

パネルが必要です。

探索パフォーマンスパネル

初めてロードするときは、「パフォーマンス」パネルを以下に示す必要があります。

3 つの主要な Web Vitals メトリクスが表示されます。そのうちの 1 つは LCP で、遅いネットワークと CPU をシミュレートしたり、パフォーマンスの詳細を経時的にログに記録したりできます。

パネルの上部にある [スクリーンショット] チェックボックスを見つけて選択し、[記録して再ロード] ボタンをクリックします。Web サイトが自動的に再ロードされたら、記録を停止します。これは、ページの初期読み込み中に何が起こったかに関する詳細なレポートになります。

このレポートにはいくつかのセクションが含まれています。

一番上には、通常の「タイムラインの概要」 セクションがあります。

ここでは、サイトで何かが起こっていることがわかりますが、それ以上のことは何もありません。カーソルを合わせると、何が起こっているかのスクリーンショットが表示され、特定の範囲を選択してズームインして詳しく見ることができます。

その下には、ネットワークセクションがあります。展開すると、ダウンロードされているすべての外部リソースとその正確な時間がタイムラインに表示されます。特定のリソースの上にマウスを置くと、ダウンロードのどの段階で費やされた時間の詳細が表示されます。赤い隅のリソースは、リソースがブロックされていることを示します。

学習プロジェクトを使用している場合は、まったく同じ画像が表示されます。これは、前のセクションで説明した内容と一字一句一致します。

• 最初に青いブロックがあります - ウェブサイトの HTML を取得するリクエスト
• 読み込みが完了すると、短い一時停止 (HTML の解析) があり、さらにリソースを求める 2 つのリクエストが行われます。
• そのうちの 1 つ (黄色) は JavaScript 用で、ノンブロッキングです。
• もう 1 つ (紫色) は CSS 用で、ブロックするものです。

ここで学習プロジェクトのコードを開いて dist フォルダーを表示すると、ソース コードは次の動作と一致します。

• アセットフォルダーには、index.html ファイルと .css および .js ファイルが存在します
Index.html ファイルの
• セクション内には、CSS ファイルを指す タグがあります。ご存知のとおり、 タグ内の CSS リソースはレンダリングをブロックしているため、これをチェックアウトできます。
• さらに、アセットフォルダー内の JavaScript ファイルを指す <script> タグがあります。遅延でも非同期でもありませんが、type="module" が付いています。これらは自動的に延期されるため、それもチェックアウトされます。パネル内の JavaScript ファイルはノンブロッキングです。 </script>

追加の演習

プロジェクトに取り組んでいる場合は、その初期読み込みパフォーマンスに注目し、[ネットワーク] パネルを確認してください。さらに多くのリソースがダウンロードされる可能性があります。

• レンダリングをブロックするリソースはいくつありますか?これはすべて必要ですか?
• プロジェクトの「入口」ポイントがどこにあるのか、またブロックしているリソースが <script> セクションにどのように表示されるのか知っていますか? npm ビルド バリアントを使用してプロジェクトをビルドしてみて、それらを検索してください。ヒント:- 純粋に Webpack ベースのプロジェクトがある場合は、webpack.config.js ファイルを探してください。 HTML エントリ ポイントへのパスは内部にある必要があります。 </script>
• Vite を使用している場合は、学習プロジェクトと同じ dist フォルダーを確認してください
• Next.js App Router を使用している場合は、.next/server/app をチェックしてください

「ネットワーク」セクションの下に「フレーム」セクションと「タイミング」セクションがあります。

これはかなりクールです。 「タイミング」セクションでは、これまでに説明したすべてのメトリクス (FP、FCP、LCP) と、まだ説明していないメトリクスを確認できます。メトリックの上にマウスを置くと、かかった正確な時間を確認できます。それらをクリックすると、一番下の [概要] タブが更新され、このメトリックに関する情報と詳細を確認するためのリンクが表示されます。 DevTools は現在、人々を教育することを目的としています。

最後にメイン部分です。これは、記録されたタイムライン中にメインスレッドで発生することです。

ここでは、「HTML の解析」や「レイアウト」などの内容と、それに要した時間を確認できます。黄色の部分は JavaScript に関連していますが、縮小された JavaScript を備えた製品版を使用しているため、少し役に立ちません。ただし、この状態であっても、たとえば HTML の解析やレイアウトの描画に比べて、JavaScript の実行にどれくらい時間がかかるかを大まかに知ることができます。

ネットワーク と メイン の両方が開いており、画面全体を占めるまで拡大されている場合のパフォーマンス分析に特に役立ちます。

ここから、サーバーが非常に高速で、バンドルが非常に高速で小さいことがわかります。特定のネットワーク タスクがボトルネックになることはありません。ボトルネックとなるネットワーク タスクには長い時間がかかりません。ブラウザはその間にぶらぶらして独自の作業を行うだけです。したがって、ここで初期ロードを高速化したい場合は、「HTML の解析」がなぜ非常に遅いのかを調べる必要があります。これはグラフ上で最も長いタスクです。

あるいは、絶対的な数字を見てみると、パフォーマンスの観点から、ここでは何もするべきではありません。全体の初期ロード時間は 200 ミリ秒未満で、Google が推奨するしきい値を大幅に下回っています。しかし、このテストをローカルで実行しており (したがって実際のネットワーク コストは発生しません)、非常に高速なラップトップで、非常に基本的なサーバーを使用しているため、このようなことが起こっています。

現実の生活をシミュレーションしてみましょう。

さまざまなネットワーク条件を探索します

非常に遅いサーバー

最初に、サーバーをより現実的にしましょう。現在、最初の「青」ステップは約50ミリ秒で、そのうち40ミリ秒が待っています。

実際の生活では、サーバーは特定の操作を実行し、アクセス許可を確認し、特定のコンテンツを生成し、許可を再度確認します（残りのコードが多数あり、チェックが3回失われるため）。とても忙しい。

backend/index.ts file（

https://www.php.cn/link/def14e8541708294d7558fdf2126ef27）。コメントを見つけてください> //スリープ（500）を待って、注釈をキャンセルします。これにより、HTMLを返す前にサーバーが500ミリ秒遅れます。これは、古い複雑なサーバーにとって妥当と思われます。 reプロジェクト（npm run build）を構築し、再起動（npm run start）、パフォーマンスレコードを再実行します。

最初の青い線を除いて、残りと比較されたタイムラインに変更はありませんが、今は非常に長いです。

この状況は、パフォーマンスの最適化を実行する前に、グローバルをチェックし、ボトルネックを識別することの重要性を強調しています。 LCP値は約650ミリ秒で、そのうち約560ミリ秒が最初のHTMLを待つために使用されます。その反応部分は約50ミリ秒です。たとえそれを減らして25ミリ秒に減らしようとしたとしても、全体的な状況ではわずか4％です。それを減らすには、多くの

の努力が必要です。より効果的な戦略は、サーバーに集中し、なぜそれがそんなに遅い理由を見つけることです。

さまざまな帯域幅と遅延

をシミュレートします 誰もが1ギガビット接続の世界に住んでいるわけではありません。たとえば、オーストラリアでは、50兆/秒が高速インターネット接続の1つであり、月額約90ドルを費やします。もちろん、それは3Gではなく、世界中の多くの人々が閉じ込められています。それでも、ヨーロッパ人の1ギガビット1/秒または10ユーロのインターネットプランを聞くたびに、私は泣きます。 とにかく

。この不快なオーストラリアのインターネットをシミュレートし、パフォーマンスインジケーターで何が起こるかを見てみましょう。この目的のために、[パフォーマンス]タブの既存のレコード（リロードとレコードボタンの近くのボタン）をクリアします。ネットワーク設定パネルを表示する必要があります

Chromeバージョンに表示されない場合、「ネットワーク」タブで同じ設定を使用できるはずです。

新しい構成ファイルを「ネットワーク」ドロップダウンメニューに追加し、次の番号を使用します。

• 構成ファイル名： "平均的なインターネット帯域幅"
• ダウンロード：50000（50 mbps）
• アップロード：15000（15 mbps）
• 遅延：40（一般的なインターネット接続の平均値）

ドロップダウンメニューの構成ファイルを選択し、パフォーマンスレコードをもう一度実行します。

何を見ましたか？私にとっては、このように見えます。

lcp

値にはほとんど変化がありません。最初の青い「サーバー」部品には変更がありません。説明できます。最も基本的なHTMLのみを送信するため、ダウンロードしてください。 しかし、ダウンロード可能なリソースとメインスレッドの関係は劇的に変化しました。

レンダリングのブロックCSS

ファイルの影響をはっきりと見ることができます。 「Analysis HTML」ミッションは完了しましたが、ブラウザはアイドル状態で、CSSを待ちます - ダウンロードする前にコンテンツを描画できません。以前の写真と比較して、リソースはすぐにダウンロードされ、ブラウザはHTMLを分析しています。

その後、技術的には、ブラウザをいくつかのコンテンツを描画できますが、コンテンツはありませんが、HTMLファイルに空のDIVのみを送信します。したがって、ブラウザはJavaScriptファイルをダウンロードして実行するまで続行します。 約60ミリ秒の待機ギャップは、

lcp

の増加です。

さらに速度を下げて進行状況を表示します。新しいネットワーク構成ファイルを作成し、「低インターネット帯域幅」に名前を付け、「低いインターネット帯域幅」構成ファイルからダウンロード/アップロード番号をコピーし、遅延を40ミリ秒に設定します。

そして再度テストを実行します。

LCP値は現在、ほぼ500ミリ秒に増加しています。 JavaScriptは約300ミリ秒をダウンロードします。比較的言えば、「分析的HTML」タスクの重要性とJavaScriptの実行タスクが減少しています。

追加演習

独自のプロジェクトがある場合は、このテストを実行してみてください。

• すべてのキーパスリソースをダウンロードするのにどれくらい時間がかかりますか？
• すべてのJavaScriptファイルをダウンロードするのにどれくらい時間がかかりますか？
• 「解析html」タスクの後、ダウンロードはいくらですか？
メインスレッドでは、リソースダウンロードのための「HTMLの分析」とJavaScriptのリソースダウンロードはいくらですか？
LCPインデックスにどのように影響しますか？

リソースバー内で起こったことも非常に興味深いです。黄色のJavaScriptバーにマウスを掛けます。このコンテンツはそこに表示されるはずです：

ここで最も興味深い部分は、「リクエストを送信して待機する」ことです。これには約40ミリ秒かかります。残りのネットワークリソースにマウスを吊るします - これらすべてにそれがあります。それが私たちの待ち時間です。ネットワークの遅延を40に設定します。多くのことが遅延数に影響します。ネットワーク接続のタイプはその1つです。たとえば、平均3G接続帯域幅は10/1 Mbpsで、100〜300ミリ秒の間で遅延します。

これをシミュレートするには、新しいネットワーク構成ファイルを作成し、「平均3G」に名前を付け、「低いインターネット帯域幅」構成ファイルからダウンロード/アップロード番号をコピーし、遅延を300ミリ秒に設定してください。

もう一度実行します。すべてのネットワークリソースの「リクエストの送信と待機」は、約300ミリ秒に増やす必要があります。これにより、 lcp

数字がさらに宣伝されます。私にとっては

1.2秒

です。 今こそ興味深い部分です。帯域幅を超高速に復元すると、遅延が低く抑えればどうなりますか？この設定を試してみましょう：

ダウンロード

：1000 mbps

アップロード
• ：100 mbps 遅延
：300ミリ秒
• サーバーがノルウェーのどこかにある場合、クライアントがオーストラリア人が豊富にある場合、これは簡単です。
• これが結果です：
lcp

数値は約

960 millisecond

です。以前に試したインターネット上で最も遅いものよりも悪いです！この場合、バンドルされたパッケージのサイズは重要ではなく、CSSのサイズはまったく重要ではありません。両方を引いたとしても、LCPインジケーターはほとんど移動しません。高い遅延はすべてよりも優れています。

これは、まだ達成していない場合、誰もが達成すべき最初のパフォーマンス改善を思い出させます。これは、「CDNを介してサービスを提供するために、静的リソースを常に

常に保証する」と呼ばれます。

cdn

の重要性 CDN（コンテンツ配信ネットワーク）は、基本的にはフロントエンドのパフォーマンス作業の0番目のステップであり、より派手なもの（コードセグメンテーションやサーバーコンポーネントなど）を検討し始める前でさえです。 CDN（コンテンツ配信ネットワーク）の主な目的は、遅延を減らし、できるだけ早くエンドユーザーにコンテンツを配信することです。彼らはこれのためにさまざまな戦略を実装しました。この記事の中で最も重要な2つは、「分散サーバー」と「キャッシュ」です。

CDN プロバイダーは、地理的に異なる場所に複数のサーバーを持ちます。これらのサーバーは静的リソースのコピーを保存し、ブラウザーが要求したときにユーザーに送信できます。 CDN は基本的にオリジン サーバーの周囲のソフト層であり、オリジン サーバーを外部の影響から保護し、外部とのやり取りを最小限に抑えます。これは、実際の人間を介さずに典型的な会話を処理できる内向型の人向けの AI アシスタントのようなものです。

上記の例では、サーバーはノルウェーにあり、クライアントはオーストラリアにあり、次のようなイメージがあります:

CDNを挟むとイメージが変わります。 CDN はユーザーに近いサーバー (たとえばオーストラリアのどこか) にサーバーを置きます。ある時点で、CDN はオリジン サーバーから静的リソースのコピーを受信します。オーストラリアまたはその近郊のユーザーは、ノルウェーのサーバーからオリジナルのコピーではなく、これらのコピーを取得することになります。

それは 2 つの重要なことを達成します。まず、ユーザーがオリジン サーバーに直接アクセスする必要がなくなるため、オリジン サーバーの負荷が軽減されます。第 2 に、JavaScript ファイルをダウンロードするために海を渡る必要がなくなったため、ユーザーはこれらのリソースをより迅速に入手できるようになりました。

上記のシミュレーションの LCP 値は 960 ミリ秒から 640 ミリ秒? に低下しました。

リピートアクセスパフォーマンス

これまでは、初回訪問のパフォーマンス、つまりサイトを訪れたことのない人に対するパフォーマンスについてのみ説明してきました。しかし、このサイトが非常に優れているので、初めての訪問者のほとんどが定期的な訪問者になってくれることを願っています。少なくとも、最初の読み込み後は離れず、数ページ閲覧し、おそらく何かを購入するでしょう。この場合、通常、ブラウザーが静的リソース (CSS や JS など) をキャッシュすること、つまり、常にダウンロードするのではなく、そのコピーをローカルに保存することを期待します。

この場合、パフォーマンスのグラフと数値がどのように変化するかを見てみましょう。

学習プロジェクトを再度開きます。開発ツールで、ネットワークを以前に作成した「平均 3G」に設定します。遅延が大きく帯域幅が狭いため、違いがすぐにわかります。 「ネットワークキャッシュを無効にする」チェックボックスがオフになっていることを確認してください。

まず、ブラウザを更新して、初めての訪問者が排除されていることを確認してください。次に、更新してパフォーマンスを測定します。

学習プロジェクトを使用している場合、最終結果は次のようになり、少し驚くかもしれません:

CSS および JavaScript ファイルは依然として [ネットワーク] タブで非常に目立ちますが、[リクエストを送信して待機] (「平均 3G」プロファイルで設定した遅延設定) では約 300 ミリ秒が表示されます。その結果、LCP は可能な限り低くならず、ブラウザーが CSS のブロックを待機しているときに 300 ミリ秒のギャップが生じます。

何が起こったのですか?ブラウザはこれをキャッシュすべきではないでしょうか?

Cache-Control ヘッダーを使用してブラウザーのキャッシュを制御します

何が起こっているかを理解するには、[ネットワーク] パネルを使用する必要があります。それを開いて、そこにある CSS ファイルを見つけます。次のようになります:

ここで最も興味深いのは、「ステータス」列と「サイズ」です。 「サイズ」は、CSS ファイル全体のサイズではありません。小さすぎます。 「ステータス」では、通常の 200 の「すべて問題ありません」ステータスではなく、別の 304 ステータスです。

ここで 2 つの質問があります。なぜ 200 ではなく 304 なのか、そしてそもそもなぜリクエストが送信されたのか?キャッシュが機能しないのはなぜですか?

まず、304 応答です。これは、適切に構成されたサーバーが条件付きリクエストに対して送信する応答であり、応答はさまざまなルールに基づいて変化します。このようなリクエストは、ブラウザーのキャッシュを制御するためによく使用されます。

たとえば、サーバーは CSS ファイルのリクエストを受信すると、ファイルが最後に変更されたのがいつかを確認できます。この日付がブラウザ側のキャッシュ ファイルの日付と同じである場合、空の本文を持つ 304 が返されます (そのため、223 B のみになります)。これは、ブラウザがすでに所有しているファイルを安全に再利用できることを意味します。帯域幅を無駄にして再ダウンロードする必要はありません。

これが、パフォーマンス画像に大きな「リクエストを送信して待機」という数字が表示される理由です。ブラウザは、CSS ファイルがまだ最新であるかどうかをサーバーに確認するよう求めています。そのため、「コンテンツのダウンロード」には 0.33 ミリ秒かかります。サーバーは「304 Unmodified」を返し、ブラウザは以前にダウンロードしたファイルを再利用するだけです。

追加の演習

1. 学習プロジェクトで、dist/assets フォルダーに移動し、CSS ファイルの名前を変更します
2. dist/index.html ファイルに移動し、名前を変更した CSS ファイルへのパスを更新します
3. 開いているページを更新して [ネットワーク] タブを開くと、CSS ファイルが新しい名前、200 ステータス、正しいサイズで表示されるはずです。これは再度ダウンロードされたものです。これは「キャッシュ無効化」と呼ばれ、ブラウザにキャッシュされたリソースの再ダウンロードを強制する方法です。
4. ページを再度更新しました - 304 ステータスに戻り、キャッシュされたファイルが再利用されました。

さて、2 番目の質問 - そもそもなぜこのリクエストが送信されたのでしょうか?

この動作は、サーバーが応答で設定する Cache-Control ヘッダーによって制御されます。 [ネットワーク] パネルで CSS ファイルをクリックして、リクエスト/レスポンスの詳細を表示します。 「ヘッダー」タブの「応答ヘッダー」ブロックで「Cache-Control」値を探します:

このヘッダーでは、異なる組み合わせでコンマで分離できます。この例には、2つあります

最大数字で - この特定の応答が（秒単位で）保存されます

• revalidate-inで、応答の有効期限が切れた場合、常にサーバーに新しいバージョンのリクエストを送信することを示します。応答が最大年齢の値よりもキャッシュに存在する場合、応答は期限切れになります。
したがって、
• 基本的に、ヘッダーはブラウザを伝えます：
この応答はキャッシュに保存できますが、しばらくすると再び確認する必要があります。

ちなみに、

キャッシュ時間を正確に

その結果、ブラウザ
• は常にサーバーを使用して検証し、すぐにキャッシュを使用しないでください。
ただし、この変更は簡単に変更できます。最大age数を0〜31536000（1年、最大秒数）に変更する必要があります。この目的のために、学習プロジェクトでは、BackEnd/Index.tsファイルに転送し、Max-Age = 0の設定の位置を見つけ、31536000（1年）に変更します。ページを数回更新すると、「ネットワーク」タブにCSSファイルの次のコンテンツが表示されます：
「ステータス」列が「サイズ」（メモリキャッシュ）の場合、灰色になっていることに注意してください。 CSSファイルは、ブラウザのキャッシュからサービスを提供するようになりました。これは、常に1年で当てはまります。ページを数回更新して表示しても、変更されません。

さて、キャッシュヘッダーの処理のすべての主なポイントについて：ページのパフォーマンスをもう一度測定しましょう。 「平均3G」構成ファイル設定を設定し、「キャッシュを無効にする」設定を維持することを忘れないでください。 結果は次のようになります

遅延は高くなっていますが、「リクエストと待機の送信」セクションは、「HTMLの分析」とJavaScriptの評価の間のギャップがほぼゼロになり、LCP値は約650ミリ秒に戻ります。

追加演習

1. 最大時代の値を10（10秒）に変更します
2. 「無効なキャッシュ」チェックボックスを選択し、ページを更新してキャッシュを削除します。
3. [選択]チェックボックスをキャンセルして、もう一度ページを更新します - 今回はメモリキャッシュから提供する必要があります。
4. 10秒待ってから、もう一度ページを更新します。 Max-Ageにはわずか10秒しかないため、ブラウザはリソースを再度チェックし、サーバーは再び304を返します。
5. すぐにページを更新します - メモリから再びサービスを提供する必要があります。

キャッシュ制御および最新のパッケージングツール

上記の情報は、キャッシュが海賊のパフォーマンスであることを意味しますか？間違いなくそうではありません！他のすべてに加えて、「熟練していないテクノロジー」と「ブラウザキャッシュをクリアする方法を説明する必要がある」の組み合わせを作成する可能性は、最も上級の開発者がパニック発作を起こさせます。

キャッシュを最適化する方法、キャッシュ制御ヘッダーには何百万もの命令、およびサーバーの実現に影響しない可能性のある他の組み合わせがあります。たぶん、このテーマ自体だけが数冊の本を書くことができます。キャッシュマスターになりたい場合は、https：//web.dev/とmdnリソースの記事から始めて、パンパン粉に従って操作します。

残念ながら、「これはすべてのコンテンツに適した5つの最高のキャッシュ戦略です」と言うことはできません。せいぜい答えは次のとおりです。「このユースケースがある場合は、これと組み合わせて、このキャッシュ設定の組み合わせは良い選択ですが、これらの問題に注意してください。」これはすべて、リソースの理解、構築システム、リソースの変更の頻度、キャッシュセキュリティ、およびエラー操作の結果に起因します。

しかし、例外があります。 1つの例外は、「ベストプラクティス」という明確な「ベストプラクティス」です。JavaScriptとCSSファイルは、最新のツールによって構築されたWebサイトを使用しています。最新のパッケージングツール（Vite、Rollup、Webpackなど）は、「無関係な」JSおよびCSSファイルを作成できます。もちろん、それらは実際には「変わらない」ものではありません。ただし、これらのツールはファイルコンテンツに依存するハッシュ文字列を使用してファイル名を生成します。ファイルのコンテンツが変更された場合、ハッシュが変更され、ファイル名が変更されます。その結果、Webサイトが展開されると、キャッシュ設定に関係なく、ブラウザはファイルの新しいコピーを再検討します。以前にCSSファイルを手動で変更したときと同じように、キャッシュは「クリア」されました。

たとえば、

学習プロジェクトの遠位/資産フォルダーを確認してください。 JSファイルとCSSファイルの両方にindex- [hash]ファイル名があります。これらの名前を覚えておき、NPMを実行して実行します。これらのドキュメントのコンテンツが変更されていないため、名前は変更されていません。

src/app.tsxファイルに移動し、Console.log（ 'bla'）に似たコンテンツをどこかに追加します。 NPMを実行して再度実行し、生成されたファイルを確認します。 CSSファイル名は変更されていないままであることがわかりますが、JSファイル名は変更されています。このウェブサイトが展開され、次にユーザーがアクセスすると、ブラウザはキャッシュに表示されないまったく異なるJSファイルを要求します。キャッシュがクリアされました。

追加演習

プロジェクトの設計フォルダーの等価性を見つけて、構築コマンドを実行します。

• ファイル名は何ですか？ Hashに似ていますか、それとも通常のindex.js、index.cssなどですか？
• コマンドを再度実行すると、ファイル名は変更されますか？
• コード内の特定の位置で簡単な変更を加えると、ファイル名はいくつ変更されますか？

建設システムが構成されている場合 - 幸運です。サーバーを安全に構成して、最大最大時代のヘッダーを設定してアセットを生成できます。すべての画像を制御する場合は、画像をリストに含めることもできます。

ウェブサイトとそのユーザーとその動作によると、これにより、最初の読み込みに対して非常に良いパフォーマンス改善が得られる場合があります。

私の簡単なケースは本当にこれらすべてを知る必要がありますか？

この時点で、あなたはそのようなことを考えているかもしれません。ツールはこれらすべてを処理します。私もそうだと思います。しかし、私は実際にそれをチェックしました、私は驚いていますか？

私の2つの項目には、最大時代= 0で、CSSおよびJSファイルの必須の再バリデートがあります。これが私のCDNプロバイダーのデフォルト設定であることがわかります。もちろん、彼らには理由があります

以上がReact 開発者向けの初期ロード パフォーマンス: 詳しい調査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。