Обслуживание gzipped CSS и JavaScript от Amazon CloudFront через S3

Я искал способы ускорить загрузку моего сайта, и один из способов, который я хотел бы изучить, более широко использует Cloudfront.

Поскольку Cloudfront изначально не был создан как CDN с обычным происхождением и потому, что он не поддерживал gzipping, я до сих пор использовал его для размещения всех моих изображений, на которые ссылается их CloudView cname в моем коде сайта, и оптимизированный с помощью фьючерсных заголовков.

С другой стороны, CSS и javascript файлы размещаются на моем собственном сервере, потому что до сих пор у меня создалось впечатление, что они не могут быть обработаны gzipped из Cloudfront и что прибыль от gzipping (около 75 процентов ) перевешивает то, что от использования CDN (около 50 процентов): Amazon S3 (и, следовательно, Cloudfront) не поддерживал стандартную подачу содержимого gzipped, используя заголовок HTTP-Accept-Encoding, который отправляется браузерами, чтобы указать их поддержку gzip сжатие, и поэтому они не могли Gzip и обслуживать компоненты "на лету".

Таким образом, до сих пор у меня создалось впечатление, что нужно выбирать между двумя альтернативами:

  • переместите все активы на Amazon CloudFront и забудьте о GZipping;

  • поддерживать компоненты самостоятельно и настраивать наш сервер для обнаружения входящих запросов и выполнять "на лету" GZipping, что и было, что я решил сделать до сих пор.

Были предприняты обходные пути для решения этой проблемы, но в основном эти не работали. [ссылка].

Теперь кажется, что Amazon Cloudfront поддерживает настраиваемое происхождение, и что теперь можно использовать стандартный метод HTTP-Accept-Encoding для обслуживания содержимого gzipped, если вы используете Custom Origin [ссылка.

Я пока не смог реализовать новую функцию на своем сервере. Сообщение в блоге, которое я связал с выше, которое является единственным, что я нашел с подробным описанием изменения, похоже, подразумевает, что вы можете включить только gzipping (обходные пути для бара, которые я не хочу использовать), если вы выберете произвольное происхождение, которое Я бы предпочел: я считаю, что проще размещать соответствующие записи на моем сервере Cloudfront и ссылаться на них оттуда. Несмотря на тщательное чтение документации, я не знаю:

  • будет ли новая функция означать, что файлы должны размещаться на моем собственном доменном сервере через пользовательское происхождение, и если да, то какая настройка кода будет достигнута,

  • как настроить заголовки css и javascript, чтобы удостовериться, что они обслуживаются gzipped из Cloudfront.

ОТВЕТЫ

Ответ 1

Ответ на gzip файлы CSS и JavaScript. Да, вы это правильно поняли.

gzip -9 production.min.css

Это приведет к production.min.css.gz. Удалите .gz, загрузите на S3 (или какой-либо исходный сервер, который вы используете) и явно установите заголовок Content-Encoding для файла gzip.

Это не на лету gzipping, но вы можете очень легко включить его в свои сценарии сборки/развертывания. Преимущества:

  • Он не требует, чтобы процессор для Apache не загружал содержимое при запросе файла.
  • Файлы сжаты с максимальным уровнем сжатия (предполагая gzip -9).
  • Вы обслуживаете файл из CDN.

Предполагая, что ваши файлы CSS/JavaScript (a) минимизированы и (b) достаточно велики, чтобы оправдать процессор, необходимый для распаковки на пользовательской машине, вы можете получить значительный прирост производительности здесь.

Просто помните: если вы вносите изменения в файл, который кэшируется в CloudFront, убедитесь, что вы сделали недействительным кеш после внесения такого типа изменений.

Ответ 2

Мой ответ: " http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Создав ответ skyler, вы можете загрузить версию gss и gzip css и js. Будьте осторожны с именами и тестами в Safari. Поскольку сафари не будет обрабатывать файлы .css.gz или .js.gz.

site.js и site.js.jgz и site.css и site.gz.css (вам нужно установить заголовок content-encoding на правильный MIME-тип, чтобы заставить их правильно обслуживать)

Затем на вашей странице положите.

<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; Это проверяет, чтобы браузер мог обрабатывать gzipped-код и предоставлять резервную копию, если они не могут.

Затем сделайте что-нибудь подобное в нижнем колонтитуле, предполагая, что все ваши js находятся в одном файле и могут идти в нижнем колонтитуле.

<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. Объявление, так что это больше не нужно. Объявление Amazon

Ответ 3

Cloudfront поддерживает gzipping.

Cloudfront подключается к вашему серверу через HTTP 1.0. По умолчанию некоторые веб-серверы, в том числе nginx, не поддерживают gzipped-контент для HTTP 1.0 соединений, но вы можете сказать, что это нужно сделать, добавив:

gzip_http_version 1.0

в конфигурацию nginx. Эквивалентная конфигурация может быть установлена ​​для любого веб-сервера, который вы используете.

Это имеет побочный эффект от того, что соединения keep-alive не работают для соединений HTTP 1.0, но поскольку преимущества сжатия огромны, это определенно стоит того, чтобы компромисс.

Взято из http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

Edit

Служебный контент, который gzipped на лету через облако облаков Amazon опасен и, вероятно, не должен быть выполнен. В основном, если ваш веб-сервер gzipping содержимого, он не будет устанавливать Content-Length и вместо этого отправит данные как chunked.

Если соединение между Cloudfront и вашим сервером прерывается и преждевременно отключается, Cloudfront по-прежнему кэширует частичный результат и выполняет его как кешированную версию до истечения срока ее действия.

Принимаемый ответ gzipping его сначала на диск, а затем обслуживание gzipped-версии - лучшая идея, поскольку Nginx сможет установить заголовок Content-Length, и поэтому Cloudfront будет отбрасывать усеченные версии.

Ответ 4

Недавно мы сделали несколько оптимизаций для uSwitch.com для сжатия некоторых статических активов на нашем сайте. Хотя мы настроили прокси-сервер nginx для этого, я также собрал небольшое приложение Heroku, которое проксирует между CloudFront и S3 для сжатия контента: 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

Ответ 5

Вчера amazon анонсировала новую функцию, теперь вы можете включить gzip в свой дистрибутив.

Он работает с s3 без добавления файлов .gz самостоятельно, я попробовал новую функцию сегодня, и она отлично работает. (нужно признать, что вы являетесь текущими объектами)

Дополнительная информация

Ответ 6

Вы можете настроить CloudFront для автоматического сжатия файлов определенных типов и обслуживания сжатых файлов.

См. AWS Руководство разработчика