Обслуговування gzipped CSS та JavaScript від Amazon CloudFront через S3

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

Оскільки Cloudfront спочатку не був розроблений як власне CDN, а тому, що він не підтримував gzipping, я до цих пір використовував його для розміщення всіх моїх зображень, на які посилається їх ім'я Cloudfront у коді мого сайту, та оптимізовано далеко -заголовки.

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

Таким чином, до цього часу я був під враженням, що треба було вибрати між двома альтернативами:

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

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

Там були обхідні шляхи , щоб вирішити цю проблему, але по суті вони не працюють . [ посилання ].

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

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

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

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

ОНОВЛЕННЯ: Amazon тепер підтримує стиснення gzip, тому це більше не потрібно. Оголошення Amazon

Оригінальна відповідь:

Відповідь - зібрати файли CSS та JavaScript. Так, ви правильно прочитали.

gzip -9 production.min.css

Це призведе до отримання production.min.css.gz. Видаліть .gz, завантажте на S3 (або будь-який сервер-джерело, який ви використовуєте) та явно встановіть Content-Encodingзаголовок для цього файлу gzip.

Це не на ходу gzipping, але ви можете дуже легко зафіксувати його у своїх сценаріях побудови / розгортання. Перевагами є:

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

Якщо припустити, що ваші файли CSS / JavaScript (а) мінімізовані та (б) достатньо великі, щоб виправдати процесор, необхідний для декомпресії на машині користувача, тут можна отримати значні підвищення продуктивності.

Просто пам’ятайте: Якщо ви внесете зміни до файлу, кешованого в CloudFront, переконайтеся, що ви недійсні кеш після внесення цього типу змін.

Моя відповідь - це зняття з цього приводу: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Створюючи відповідь skyler, ви можете завантажити gsip та non-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

Cloudfront підтримує gzipping.

Cloudfront підключається до вашого сервера через HTTP 1.0. За замовчуванням деякі веб-сервери, включаючи nginx, не подають gzipped вміст у з'єднання HTTP 1.0, але ви можете сказати це, додавши:

gzip_http_version 1.0

до конфігурації nginx. Еквівалентну конфігурацію можна встановити для будь-якого веб-сервера, який ви використовуєте.

Це має побічний ефект від того, щоб не підтримувати постійні з'єднання для HTTP 1.0-з'єднань, але, оскільки переваги стиснення величезні, це, безумовно, варто скасувати.

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

Редагувати

Обслуговування вмісту, який збирається на льоту через хмарний фронт Amazon, є небезпечним, і, ймовірно, цього не слід робити. В основному, якщо ваш веб-сервер збирає вміст, він не встановить Довжину вмісту, а натомість надсилатиме дані як розділені.

Якщо зв’язок між Cloudfront та вашим сервером перервано та передчасно перервано, Cloudfront все одно кешує частковий результат і виконує функцію кешованої версії до його закінчення.

Прийнята відповідь про gzipping його спочатку на диску, а потім подачі gzipped версії - краща ідея, оскільки Nginx зможе встановити заголовок довжини вмісту, і тому Cloudfront відкине усічені версії.

Нещодавно ми зробили кілька оптимізацій для 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

Вчора Amazon оголосив про нову функцію, тепер ви можете ввімкнути gzip у своєму розповсюдженні.

Він працює з s3 без доданих .gz файлів самостійно, я спробував нову функцію сьогодні, і вона працює чудово. (Вам потрібно визнати недійсними поточні об’єкти)

Більше інформації

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

Дивіться Посібник для розробників AWS