performance - ブラウザのキャッシュと複数のドメインに対するリクエスト数の最小化

Question

私は最近、私たちのウェブサイトのフロント エンドのパフォーマンスを改善することに取り組んでおり、多くのベスト プラクティスを採用しています。

ただし、いくつかのプラクティスが互いにわずかに矛盾している最近の例がありました

• HTTP リクエストを最小限に抑える
• ブラウザを「だまして」より多くの同時リクエストを作成させるために、別のドメインからいくつかのアセットを提供します
• ブラウザのキャッシュを利用する

なんで？

HTTP リクエストを最小限に抑えるために、ほとんどすべての Javascript を 1 つのファイルにバンドルしていました。これには、JQuery と JQuery UI が含まれていました。

多くのユーザーはすでに JQuery をブラウザーにキャッシュしている可能性が高いため、これはばかげていると思いました。そのため、all.js から削除し、代わりに Google の CDN から提供することにしました。これにより、ユーザーがコードを再度ダウンロードする手間が省けます。コードは別のドメインにあるため、独自のドメインから他のリソースと並行してダウンロードできます。

同時ダウンロードは、次のグラフに示されています。

もちろん、これは JQuery がまだキャッシュされていない人々のリクエストの数を増やしましたが、これは素晴らしいことではありません。

だから私の質問はこれです：

その変化は賢明なものですか？キャッシングを利用して同時リクエストを許可する利点は、リクエスト数のわずかな増加よりも重要ですか?

Answer 1

それはとても良い質問です。

あなたは自分の理由を十分に説明しました。これらはすべて、この変更を行う正当な理由です。

しかし、両方のアプローチにはまだ利点があります。

すべてを 1 つのファイルにまとめる

• HTTP 要求の数を減らし、ユーザーの接続に対するラウンドトリップ遅延の悪影響を減らします。

• すべてのライブラリ/プラグインは一度にダウンロードされ、後で必要になったときにキャッシュされたままになります。

• 他のサービスへの依存を減らします (ただし、Google は非常に信頼できます)。

複数のドメインにまたがる個別のファイル

• ダウンロードの並列化を増やし、ユーザーの接続に対する帯域幅シェーピングの悪影響を減らします。(ただし、ほとんどのブラウザは、ドメインごとの同時リクエストを 2 つに制限していないことに注意してください。 )

• 粒度を上げる - 必要に応じて個別のパーツをオンデマンドでダウンロードできます。つまり、最初のページ ヒットで特定のプラグインが必要ない場合は、ダウンロードされません。

個人的には、通常は前者に少し傾いています (HTTP リクエストを 1 つの大きなファイルにまとめることで HTTP リクエストを減らします)。視聴者のほとんどがかなり高帯域幅の接続を使用しているように感じ、遅延を減らすことができます. Google と Yahoo のページ速度ツールを使用して、速度を上げる他の方法を見つけることを忘れないでください。