帯域幅（したがってページの読み込み時間）を削減する効果的な方法は？

ウェブサイトがページをレンダリングするために必要な帯域幅の量を減らすことに関して、最も効果的な方法は何ですか？

積極的なキャッシング？JS / CSSを縮小していますか？Gzip？CMS？スプライト？

どのWebサイトでも簡単に実装できるいくつかの基本的な方法：

• リクエストを行ったブラウザがサポートしている場合、deflateまたはgzipリクエストをサポートしている場合は、HTML、CSS、およびJavascriptを圧縮します。
• Google Closure Compilerで JavaScriptを縮小します
• YUI Compressorで CSSを縮小する

もう少し関与：

• ページまたは画像が変更される可能性が低い場合、ブラウザにキャッシュするように指示します。ほとんどのWebサーバーは既に静的ファイルに対してこれを行っているため、必要なことは、可能であれば動的スクリプトに追加するだけです。
• CSSファイルとJSファイルを単一のファイルに自動的にマージします。これは、HTTP要求（オーバーヘッドが発生し、特定の愚かなブラウザ（つまりInternet Explorer）がデフォルトでドメインごとに一度に2つの要求を制限する）を減らすため、有利です。
• 静的ファイル（CSS、JS、画像など）を別のドメイン名に移動します。これにより、HTTPリクエストでCookie情報が送信されなくなります。

• 自動的に生成されるスプライトを使用します。スプライトは、複数のアイコンまたは他の小さな画像を含む単一の画像です。次に、CSS backgroundプロパティで表示する画像を選択します。例。

  利点は、クライアントがHTTPリクエスト（オーバーヘッドがある）を少なくすることです。

これらのことを手動で行う場合、それは間違いなく価値がなく、コードのメンテナンスが悪夢になるため、「自動的に」太字にしました。通常、それを自動的に行うことは、カスタムスクリプトを記述することを意味します。そのため、「もう少し複雑」です。

Googleは、ペイロードサイズを最小化するための推奨事項の概要を説明しました。次のテクニックが含まれます。

1. 圧縮を有効にする
2. 未使用のCSSを削除する
3. JavaScriptを縮小する
4. CSSを縮小
5. HTMLを縮小
6. JavaScriptの読み込みを延期する
7. 画像を最適化する
8. スケーリングされた画像を提供する
9. 一貫したURLからリソースを提供する

これらの提案は、Page Speedと呼ばれるオープンソースのFirefox / Firebugアドオンプロジェクトの一部です。Yahoo!のYSlowプラグインに似ています。実際のPage Speedアドオンは、そのリストで詳細に説明されているよりも多くの最適化をチェックします。ページ速度の使用方法も説明されています。

ウェブサイトを高速化するためのYahoo!のベストプラクティスでは、同様のベストプラクティスを特定しています。

1. HTTPリクエストを最小限に抑える
2. コンテンツ配信ネットワークを使用する
3. ExpiresまたはCache-Controlヘッダーを追加する
4. Gzipコンポーネント
5. スタイルシートを上部に配置する
6. スクリプトを一番下に置く
7. CSS式を避ける
8. JavaScriptとCSSを外部にする
9. DNSルックアップを削減
10. …

（Yahoo!のリストは最大35項目で、全体を引用する必要はありません。）

YSlow（画像リンク）とPage Speed（画像リンク）の両方を使用すると、ページでテストを実行し、実行できることを提案し、推奨事項のうち既に実装されているものを示すことができます。