2011-01-24 14 views
4

私は現在、バックグラウンドでjavascript/cssを最小化して組み合わせたC#アプリケーションを作成しています。結合された最小化されたファイルが作成されると、そのファイルはディスクに保存され、以降のすべてのページへの要求でこのファイルがロードされます。最適化のためにJavascript/CSSを1つまたは2つのファイルに結合します。

この理由は、ページのパフォーマンスを支援するためです。私は心配しています。結合したファイルが大きければ、例えば200kbです。この場合、2つのファイルに結合して、2つの別々のhttp要求がある方が良いでしょうか?ファイルはgzipされ、キャッシュされます。

答えて

8

まあ、2つの主要な考え方があります。

最初は、可能な限りHTTP要求の数を減らしています。これは、ALLのCSSファイルを1つのモンスターまで減らすと言います。複数の50kbファイルよりも400kbを一度ダウンロードする方が良いでしょう。 (JSについても同様)。

もう1つは必要に応じて組み合わせることですが、それ以上は必要ありません。サイトの1つのセクションでのみ必要な100kbのCSSがある場合、残りのサイトをユーザーのために遅らせる理由はありません。これはJSの場合に特に当てはまります。なぜなら、サイトの10%がそれを使用しているため、すべてのページにjQueryを含むサイトがたくさんあるからです。

これは2つの組み合わせです。サイトの約50%以上でコードを使用する場合は、それを「マスター」ファイルに含めます。コードが小さい(5kbまたは10kb未満)場合は、それをマスターファイルに含めます。それ以外の場合は、ファイルを分割して分割します。

この理由のすべてが、ユーザーエクスペリエンスを向上させるためです。あなたは巨大な力を行使することができ、すべてのCSSとJSをそれぞれのページの2つのファイルに読み込みます(必ずキャッシュされます)。しかし、ランディングページがそのコードの50%を必要としない場合は、不必要にページの速度を落として最大の影響を与えます。

私は、この問題の最良の解決策は人間が状況を分析することだと考えている理由です。彼らは重複や抽象を探すことができます。彼らはページ/サイトのニーズを見て、最良のシナリオを決定することができます。あなたのプログラムでこれを行うことが難しい場合を除いて、の結果はになりません。

それはです私の$ 0.02とにかく...

+0

この情報をお寄せいただきありがとうございます。私はページに必要なすべてのjavascriptを組み合わせて、ページ上で使用されているjavascriptだけが読み込まれます。これに対して1つのHTTPリクエストしかありません。ただし、ファイルサイズは98KBです。しかしこれは大きすぎますか? 98KBのすべてのデータが必要であり、最小化されています。あなたの情報に基づいて、20KBと78KBのうち2つ以上のサイズ98KBの1つのHTTPリクエストを持っている方が良いでしょうか? – amateur

+0

@ナイアール:そうです。 1×98kbは合計98kbよりもはるかに優れています。実際には、一般的に98kbは合計で悪くはありません。ブロードバンドユーザーにとっては非常に速く、ダイヤルアップユーザーにとってはかなり高速です(最適なダイヤルアップ接続で約6秒)ので、通常は最初のページの合計ページサイズを200kbに​​することをお勧めします。それ以上のものであれば、ダイヤルアップユーザー(ターゲットユーザーに応じて大きなマイナスになることはないかもしれません)を疎遠にし始めるのです... – ircmaxell

2

ファイルの数を減らすことをお勧めします。これは、同時にダウンロードするドメイン名ごとに__要求を開くことしかできないためです。したがって、2つの要求に分割すると、必要以上に割り当てを使用しています。

全体的に、全体的に要求の総数を減らしたいと考えています。

2

Googleのdocumentation about page speedは、次のことをお勧めします。

Combine external JavaScript

推奨事項

パーティションファイルが最適です。

  • 2つのファイルに分割するのJavaScript:ここでは生産にJavaScriptファイルを結合するための親指のいくつかのルールです起動時にページをレンダリングするために必要な最小限のコード を含む 1つのJSは、 のページロードが完了するまで必要ないコード を含む1つのJSファイル。
  • のファイルを<head>として として配信し、これらのファイルのサイズを最小限に抑えてください。
  • ごくまれに訪問したコンポーネントの 自身のファイルにJavaScript を配信します。
  • そのコンポーネントがユーザーによって要求された場合にのみファイルを提供します。 JavaScriptコードの小ビットの場合は、キャッシュしないでください。 そのHTMLページ のJavaScriptをインライン展開することを検討してください。

Combine external CSS

勧告

  • パーティション2つのファイルごとにCSS:起動時にページをレンダリングするために必要な最小限のコードを含む1つのCSSファイル。ページロードが完了するまで不要なコードを含む1つのCSSファイル
  • 珍しく訪れたコンポーネントのCSSを、それ自身のファイルに配信します。そのコンポーネントがユーザーによって要求された場合にのみ、ファイルを提供します。
  • キャッシュするべきでないCSSについては、インライン展開を検討してください。
  • CSSファイルからCSS @importを使用しないでください。
関連する問題