web-dev-qa-db-ja.com

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

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

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

bandwidthcompression
12
Mark Henderson

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

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

もう少し関与：

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

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

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

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

10
Thomas Bonini

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!の Webサイトを高速化するためのベストプラクティス 同様のベストプラクティスのセットを特定します。

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

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

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

5
Bryson