196

サイトの読み込みを高速化する方法を探していましたが、探求したい方法の 1 つは、Cloudfront をさらに活用することです。

Cloudfront はもともとカスタム オリジン CDN として設計されておらず、gzip をサポートしていなかったため、これまですべてのイメージをホストするために Cloudfront を使用してきました。これらのイメージは、サイト コードで Cloudfront cname によって参照され、はるかに最適化されています。 -先物ヘッダー。

一方、CSS と JavaScript ファイルは、私自身のサーバーでホストされています。なぜなら、これまで Cloudfront から gzip で提供することはできず、gzip による利益 (約 75%) がそれを上回るという印象を受けていたからです。 CDN の使用から (約 50%): Amazon S3 (および Cloudfront) は、gzip 圧縮のサポートを示すためにブラウザによって送信される HTTP Accept-Encoding ヘッダーを使用して、標準的な方法で gzip 圧縮されたコンテンツを提供することをサポートしていませんでした。そのため、その場で Gzip してコンポーネントを提供することができませんでした。

したがって、私は今まで、次の 2 つの選択肢から選択する必要があるという印象を受けていました。

  1. すべてのアセットを Amazon CloudFront に移動し、GZipping を忘れます。

  2. コンポーネントのセルフホストを維持し、着信リクエストを検出し、必要に応じてオンザフライで GZipping を実行するようにサーバーを構成します。

この問題を解決するための回避策がありましたが、基本的にこれらは機能しませんでした。[リンク].

現在、Amazon Cloudfront はカスタム オリジンをサポートしているようで、カスタム オリジンを使用している場合は、gzip されたコンテンツを提供するために標準の HTTP Accept-Encoding メソッドを使用できるようになりました [リンク]。

これまでのところ、サーバーに新しい機能を実装できていません。上記にリンクしたブログ投稿は、変更の詳細を説明している唯一のブログ投稿であり、カスタムオリジンを選択した場合、gzip のみを有効にできることを暗示しているようです (回避策は使用したくありません)。 Cloudfront サーバーで対応するフィールドをホストし、そこからリンクする方が簡単だと思います。ドキュメントを注意深く読んでも、わかりません：

  • 新しい機能は、カスタムオリジンを介して自分のドメインサーバーでファイルをホストする必要があることを意味するかどうか、またそうであれば、どのコード設定でこれを実現するか;

  • css および javascript ヘッダーを構成して、Cloudfront から gzip 形式で配信されるようにする方法。

4

6 に答える 6

205

更新: Amazon は gzip 圧縮をサポートするようになったため、これは不要になりました。 アマゾンの発表

元の答え:

答えは、CSS と JavaScript ファイルを gzip することです。はい、あなたはその権利を読みました。

gzip -9 production.min.css

これにより、 が生成されproduction.min.css.gzます。を削除し.gz、S3 (または使用しているオリジン サーバー) にアップロードしContent-Encoding、ファイルのヘッダーを明示的に に設定しますgzip。

オンザフライの gzip 圧縮ではありませんが、ビルド/デプロイ スクリプトに非常に簡単にラップできます。利点は次のとおりです。

  1. ファイルが要求されたときに Apache がコンテンツを gzip するのに CPU は必要ありません。
  2. ファイルは最高の圧縮レベルで gzip されます (仮定gzip -9)。
  3. CDN からファイルを提供しています。

CSS/JavaScript ファイルが (a) 縮小されており、(b) ユーザーのマシンでの解凍に必要な CPU を正当化するのに十分な大きさであると仮定すると、ここで大幅なパフォーマンスの向上を得ることができます。

注意: CloudFront にキャッシュされているファイルに変更を加える場合は、この種の変更を行った後にキャッシュを無効にしてください。

于 2011-03-27T04:11:39.200 に答える
15

私の答えはこれについての離陸です：http：//blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

skylerの答えを基に、cssとjsのgzipバージョンと非gzipバージョンをアップロードできます。Safariでの命名とテストには注意してください。サファリはファイルを処理し.css.gzないためです。.js.gz

site.jsand site.js.jgzand site.cssand （これらを正しく機能させるには、ヘッダーを正しいMIMEタイプにsite.gz.css 設定する必要があります）content-encoding

それからあなたのページに入れてください。 

<script type="text/javascript">var sr_gzipEnabled = false;</script> 
<script type="text/javascript" src="http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr.gzipcheck.js.jgz"></script> 

<noscript> 
  <link type="text/css" rel="stylesheet" href="http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css">
</noscript> 
<script type="text/javascript"> 
(function () {
    var sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css';
    if (sr_gzipEnabled) {
      sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css.gz';
    }

    var head = document.getElementsByTagName("head")[0];
    if (head) {
        var scriptStyles = document.createElement("link");
        scriptStyles.rel = "stylesheet";
        scriptStyles.type = "text/css";
        scriptStyles.href = sr_css_file;
        head.appendChild(scriptStyles);
        //alert('adding css to header:'+sr_css_file);
     }
}());
</script>

gzipcheck.js.jgzはsr_gzipEnabled = true; 、ブラウザがgzipで圧縮されたコードを処理できることを確認し、処理できない場合はバックアップを提供するためのテストです。

次に、すべてのjsが1つのファイルにあり、フッターに入れることができると仮定して、フッターで同様のことを行います。

<div id="sr_js"></div> 
<script type="text/javascript"> 
(function () {
    var sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js';
    if (sr_gzipEnabled) {
       sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js.jgz';
    }
    var sr_script_tag = document.getElementById("sr_js");         
    if (sr_script_tag) {
    var scriptStyles = document.createElement("script");
    scriptStyles.type = "text/javascript";
    scriptStyles.src = sr_js_file;
    sr_script_tag.appendChild(scriptStyles);
    //alert('adding js to footer:'+sr_js_file);
    }
}());
</script>

更新： Amazonはgzip圧縮をサポートするようになりました。アナウンスなので、これはもう必要ありません。 アマゾンアナウンス

于 2011-03-31T15:32:43.923 に答える
14

Cloudfront は gzip をサポートしています。

Cloudfront は HTTP 1.0 経由でサーバーに接続します。デフォルトでは、nginx を含む一部の Web サーバーは、gzip されたコンテンツを HTTP 1.0 接続に提供しませんが、次を追加することで提供するように指示できます。

gzip_http_version 1.0

あなたのnginx設定に。使用している Web サーバーに相当する構成を設定できます。

これには、キープアライブ接続が HTTP 1.0 接続で機能しないという副作用がありますが、圧縮の利点は非常に大きいため、トレードオフの価値があることは間違いありません。

http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/から取得

編集

Amazon クラウド フロントを介してオンザフライで gzip されたコンテンツを提供することは危険であり、おそらく行うべきではありません。基本的に、Web サーバーがコンテンツを gzip 圧縮している場合、Content-Length を設定せず、代わりにデータをチャンクとして送信します。

Cloudfront とサーバー間の接続が中断され、途中で切断された場合でも、Cloudfront は部分的な結果をキャッシュし、有効期限が切れるまでキャッシュ バージョンとして提供します。

Nginx は Content-Length ヘッダーを設定できるため、Cloudfront は切り詰められたバージョンを破棄するため、最初にディスク上で gzip 圧縮してから gzip 圧縮されたバージョンを提供するという受け入れられた答えがより適切です。

于 2013-02-06T10:05:20.457 に答える
5

最近、サイト上の静的アセットの一部を圧縮するために、uSwitch.com に対していくつかの最適化を行いました。これを行うために nginx プロキシ全体をセットアップしましたが、コンテンツを圧縮するために CloudFront と S3 の間でプロキシする小さな Heroku アプリもまとめました: http://dfl8.co

一般にアクセス可能な S3 オブジェクトが単純な URL 構造を使用してアクセスできる場合、http://dfl8.coは同じ構造を使用するだけです。つまり、次の URL は同等です。

http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css
于 2012-08-18T14:10:14.410 に答える
5

昨日、Amazon が新機能を発表しました。ディストリビューションで gzip を有効にできるようになりました。

自分で .gz ファイルを追加しなくても s3 で動作します。今日、新しい機能を試してみましたが、うまく動作します。（ただし、現在のオブジェクトであることを無効にする必要があります）

より詳しい情報

于 2015-12-18T12:36:53.357 に答える