Обслуживание сжатых CSS и JavaScript из Amazon CloudFront через S3 - PullRequest
Новая
       21

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

190 голосов
/ 26 марта 2011

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

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

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

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

  1. переместить все активы в Amazon CloudFront и забыть о GZipping;

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

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

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

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

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

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

Ответы [ 6 ]

196 голосов
/ 27 марта 2011

ОБНОВЛЕНИЕ: Amazon теперь поддерживает сжатие gzip, поэтому в этом больше нет необходимости. Амазонское объявление

Оригинальный ответ:

Ответ - сжать файлы CSS и JavaScript. Да, вы правильно прочитали. 

gzip -9 production.min.css

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

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

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

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

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

15 голосов
/ 31 марта 2011

Мой ответ на этот вопрос: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Используя ответ Скайлера, вы можете загрузить версии css и js в формате gzip и без gzip. Будьте осторожны с именами и тестируйте в Safari. Потому что 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; Этот тест проверяет, может ли браузер обрабатывать сжатый код и предоставляет резервную копию, если не может.

Затем сделайте что-то похожее в нижнем колонтитуле, предполагая, что все ваши 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

14 голосов
/ 06 февраля 2013

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

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

gzip_http_version 1.0

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

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

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

Редактировать

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

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

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

5 голосов
/ 18 декабря 2015

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

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

Подробнее

5 голосов
/ 18 августа 2012

Недавно мы сделали несколько оптимизаций для 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
0 голосов
/ 06 июля 2017

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

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

...