2

私は単純な ASP.Net MVC3 ベースの Web アプリを持っています。最近、パフォーマンスの調整を行っています。Mozilla の Firebug を使用して、リソースのロード サイズとタイミングを確認しました。その後、YSlow を使用して最適化の可能性を導き出しました。

js と cssをミニファイし、1 つの結合されたjs と css にバンドルする「バンドルとミニフィケーション」の一般的な最適化の概念に焦点を絞りたいと思います。YSlow によると、余分なサーバー リクエストと帯域幅/時間を節約できます。しかし、私の場合は矛盾しています！SquishIt libを使用しています。

これが私の統計です（添付の画像を確認してください）

Old Login page: Requests(10), Size(434), Load Time in seconds(29), YSlow grade C(78)
New Login page: Requests(6), Size(414), Load Time in seconds(42), YSlow grade B(88)

古い元のページ - 元の古いページ これが新しい最適化されたページです - 新しい最適化されたページ

理想的には逆にする必要があります！しかし、結合された js ファイルがより多くの時間を取っているようです。より正確な違いを得るために帯域幅を遅くし、両方のページに公平なチャンスがあることを確認するために、キャッシュなしでテストしました（Ctrl + F5も行いました）。それらは同じセットアップで同じサーバー上にあります。

注:画像の最後の画像リロードは無視してください - 更新を行いました。後続のページがキャッシュされたリソースを取得できるように、ログインページにいくつかの追加のjQueryライブラリを事前にロードしています。あなたはそのようなことを無視することができますが、これが可能かどうか、または私が何か間違いを犯しているのか教えてください。

バンドルとミニフィケーションに関するもう 1 つの質問- リソースに CDN 参照を使用している場合は適用できないと思います (バンドルすることはできません)。その場合、CDN 参照とバンドルのどちらが優先されますか?

4

1 に答える 1

2

一般的に、あなたは正しい方向に進んでいると思います: リクエストが少ない + リクエストの合計サイズが小さい = ほとんどのユーザーにとってパフォーマンスが向上します。

あなたのテスト結果では、いくつかのことを見ていると思います：

  1. より大きな結合ファイルを使用することの 1 つの欠点は、並列ダウンロードの利点が失われることです。これがあなたのケースの主な原因ではないと思いますが、元のケースでは、多くの jquery JS ファイルが並行してダウンロードされていることがわかります。
  2. ページ時間の合計負荷は、ネットワークの速度とサーバーの負荷に応じて、実行ごとに異なる場合があります。元のケースでは、jquery-ui ファイルは 222KB で、約 8 KB/秒で 27.8 秒かかりました。最適化されたページでは、新しく結合された JS は 254KB で、6.2 KB/秒の速度で 41 秒かかりました。これは非常に大まかな計算ですが、あなたが見た違いについての手がかりを与えるかもしれないと思います.

サイトが公共のインターネットで利用できる場合は、WebPageTestやGTmetrixなどのツールを使用して、外部サーバー (および複数の場所) からいくつかの測定を実行できます。

CDN とバンドルについての質問に対して、最終的には、どちらの方法でもいくつかのプロトタイプをテストして、どちらが適切に機能するかを確認できます。1 つのオプションは、CDN から取得される jQuery のような大規模で頻繁に変更されないファイルと、サーバーでホストされている (バンドルされた) 独自のすべての JS を使用することです。

静的ファイルの CDN ホスティングについて覚えておくべきことの 1 つは、ユーザー ベースが地理的に分散している場合に最大のメリットが得られることです。次に、グローバル CDN ネットワークを利用して、より近い (したがってより高速な) サーバーから静的ファイルを提供することができます。逆に、ユーザー ベースが世界中に広がっていない場合、またはこれが内部アプリケーションである場合、CDN を使用してもあまりメリットがない可能性があります。

于 2013-03-28T15:41:14.330 に答える