Web サイトのパフォーマンスの最適化に関する知識ポイント

この記事で言及されている Web サイトのパフォーマンスは、Web サイトの応答速度を指します。これは、Web サイトのパフォーマンスに関するほとんどの人の理解とも一致しています。アクセスが速い Web サイトは、逆に、アクセス速度が遅いほどパフォーマンスが優れています。ウェブサイトのパフォーマンスが低下します。この記事でまとめた最適化手法は巨視的なエンジニアリングレベルの手法であり、例えばJSやCSSの構文最適化など、言語単位での最適化はWebサイトのパフォーマンスにも影響します。構文レベルは開発者のプログラミング レベルによって異なります。

どのような Web サイトが応答が早いですか?実際、Web サイトのリソースの読み込みが速いほど、Web サイトの応答も速くなると考えられがちですが、Web サイトが読み込む必要があるリソースが少ないほど、Web サイトの応答も速くなります。これは、Web サイトのパフォーマンス最適化の 2 つの主要な方向、つまりリソー​​スのキャッシュとリソースのマージと圧縮に対応します。ブラウザーはリソースの読み込みを完了した後、最終的な Web ページをレンダリングする前にリソースをさらに解析する必要があるため、ブラウザーの解析メカニズムは Web サイトのパフォーマンスを最適化するための方向性でもあります。さまざまな最適化手法は、これら 3 つの一般的な方向に分類できます。

1. リソース キャッシュ

1.1 CDN

を使用して、静的 HTML、画像、スタイル CSS、スクリプト JS などの Web サイトの静的リソースを分離します。静的リソースを CDN にデプロイすると、これらのリソースの読み込み速度が向上します。

1.2 HTTP キャッシュ メカニズムを利用する

HTTP キャッシュは、ブラウザーによってロードされたリソースをローカルにキャッシュし、次回ロードするときに、キャッシュされたリソースの有効期限が切れていない限り、ローカル リソースを直接使用できるため、HTTP リクエストの数が削減されます。リソースの読み込み速度を向上させます。具体的な方法は、HTTP ヘッダーに Cache-Control パラメーターを設定することです。 HTTP 1.0 では、キャッシュに Pragma と Expires という 2 つのパラメーターを使用しますが、これらの使用は推奨されなくなりました。

2. リソースのマージと圧縮

2.1 HTTP リクエストを減らす

1 つの HTTP リクエストを使用して 10M ファイルをロードし、ファイルを 10 個の 1M ファイルに分割し、10 個の HTTP リクエストを使用して並列ロードします。読み込みが速くなりますか？ HTTP リクエストを減らすと Web サイトの応答速度が向上すると述べられているため、結論としては HTTP リクエストを 1 つ使用した方が速いということのようです。実際、正しい答えは「必ずしもそうではない」です。

私は小さな実験をしました。index1.html とindex2.html の 2 つの HTML ファイルがあり、index1.html は