Melayani gzip CSS dan JavaScript dari Amazon CloudFront via S3

Saya telah mencari cara untuk membuat situs saya memuat lebih cepat dan satu cara yang ingin saya jelajahi adalah memanfaatkan Cloudfront dengan lebih baik.

Karena Cloudfront pada awalnya tidak dirancang sebagai CDN asal-kustom dan karena itu tidak mendukung gzipping, sejauh ini saya menggunakannya untuk meng-host semua gambar saya, yang dirujuk oleh cname Cloudfront mereka dalam kode situs saya, dan dioptimalkan dengan jauh header masa depan.

Sebaliknya, file CSS dan javascript di-host di server saya sendiri, karena sampai sekarang saya mendapat kesan bahwa mereka tidak dapat dilayani dengan gzip dari Cloudfront, dan bahwa keuntungan dari gzip (sekitar 75 persen) lebih besar daripada dari menggunakan CDN (sekitar 50 persen): Amazon S3 (dan dengan demikian Cloudfront) tidak mendukung penyajian konten yang di-gzip dengan cara standar dengan menggunakan header HTTP-Encoding-Terima yang dikirim oleh browser untuk menunjukkan dukungan mereka untuk kompresi gzip, dan jadi mereka tidak dapat Gzip dan melayani komponen dengan cepat.

Jadi saya mendapat kesan, sampai sekarang, bahwa seseorang harus memilih antara dua alternatif:

1. pindahkan semua aset ke Amazon CloudFront dan lupakan tentang GZipping;

2. menjaga komponen di-host-sendiri dan mengonfigurasi server kami untuk mendeteksi permintaan yang masuk dan melakukan GZipping on-the-fly yang sesuai, yang merupakan apa yang saya pilih untuk dilakukan sejauh ini.

Ada yang workarounds untuk memecahkan masalah ini, tapi pada dasarnya ini tidak bekerja . [ tautan ].

Sekarang, tampaknya Amazon Cloudfront mendukung asal kustom, dan sekarang mungkin untuk menggunakan metode Pengkodean Terima HTTP standar untuk menyajikan konten yang di-gzip jika Anda menggunakan tautan Custom Origin [ link ].

Sejauh ini saya belum dapat mengimplementasikan fitur baru di server saya. Posting blog yang saya tautkan di atas, yang merupakan satu-satunya yang saya temukan yang merinci perubahannya, tampaknya menyiratkan bahwa Anda hanya dapat mengaktifkan gzipping (bilah solusi, yang tidak ingin saya gunakan), jika Anda memilih asal kustom, yang Saya lebih suka tidak: Saya merasa lebih mudah untuk meng-host fil yang merespons di server Cloudfront saya, dan menautkannya ke sana. Meskipun membaca dokumentasi dengan cermat, saya tidak tahu:

• apakah fitur baru berarti file harus di-host di server domain saya sendiri melalui asal kustom, dan jika demikian, pengaturan kode apa yang akan mencapai ini;

• cara mengkonfigurasi header css dan javascript untuk memastikan mereka dilayani di-gzip dari Cloudfront.

PEMBARUAN: Amazon sekarang mendukung kompresi gzip, jadi ini tidak lagi diperlukan. Pengumuman Amazon

Jawaban asli:

Jawabannya adalah gzip file CSS dan JavaScript. Ya, Anda membacanya dengan benar.

gzip -9 production.min.css

Ini akan menghasilkan production.min.css.gz. Hapus .gz, unggah ke S3 (atau server asal apa pun yang Anda gunakan) dan atur Content-Encodingtajuk untuk file secara eksplisit gzip.

Ini bukan gzipping on-the-fly, tetapi Anda bisa dengan mudah membungkusnya dengan skrip build / deployment Anda. Keuntungannya adalah:

1. Tidak memerlukan CPU untuk Apache untuk gzip konten ketika file diminta.
2. File-file tersebut di-gzip pada level kompresi tertinggi (dengan asumsi gzip -9).
3. Anda sedang melayani file dari CDN.

Dengan asumsi bahwa file CSS / JavaScript Anda (a) diperkecil dan (b) cukup besar untuk membenarkan CPU yang diperlukan untuk melakukan dekompresi pada mesin pengguna, Anda bisa mendapatkan keuntungan kinerja yang signifikan di sini.

Ingat saja: Jika Anda membuat perubahan pada file yang di-cache di CloudFront, pastikan Anda membatalkan cache setelah membuat jenis perubahan ini.

Jawaban saya adalah lepas landas untuk ini: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Membangun jawaban skyler Anda dapat mengunggah versi cz dan js gzip dan non-gzip. Berhati-hatilah dalam memberi nama dan uji di Safari. Karena safari tidak akan menangani .css.gzatau .js.gzfile.

site.jsdan site.js.jgzdan site.cssdan site.gz.css (Anda harus mengatur content-encodingtajuk ke jenis MIME yang benar agar dapat ditayangkan dengan benar)

Kemudian di halaman Anda taruh.

<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 hanya sr_gzipEnabled = true; Ini menguji untuk memastikan browser dapat menangani kode gzip dan menyediakan cadangan jika mereka tidak bisa.

Kemudian lakukan sesuatu yang serupa di footer dengan asumsi semua js Anda ada dalam satu file dan bisa masuk ke dalam footer.

<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> 

UPDATE: Amazon sekarang mendukung kompresi gzip. Pengumuman, jadi ini tidak lagi diperlukan. Pengumuman Amazon

Cloudfront mendukung gzipping.

Cloudfront terhubung ke server Anda melalui HTTP 1.0. Secara default, beberapa server web, termasuk nginx, tidak dapat menyajikan konten yang di-gzip ke koneksi HTTP 1.0, tetapi Anda dapat melakukannya dengan menambahkan:

gzip_http_version 1.0

ke konfigurasi nginx Anda. Konfigurasi yang setara dapat ditetapkan untuk server web mana pun yang Anda gunakan.

Ini memang memiliki efek samping membuat koneksi tetap-hidup tidak berfungsi untuk koneksi HTTP 1.0, tetapi karena manfaat kompresi sangat besar, itu pasti layak diimbangi.

Diambil dari http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

Edit

Melayani konten yang di-gzip dengan cepat melalui Amazon cloud depan adalah berbahaya dan mungkin tidak boleh dilakukan. Pada dasarnya jika server web Anda gzipping konten, itu tidak akan mengatur Panjang Konten dan malah mengirim data sebagai chunked.

Jika koneksi antara Cloudfront dan server Anda terputus dan terputus sebelum waktunya, Cloudfront masih menyimpan hasil parsial dan menyajikannya sebagai versi cache hingga habis masa berlakunya.

Jawaban yang diterima dari gzipping pertama kali pada disk dan kemudian menyajikan versi gzip adalah ide yang lebih baik karena Nginx akan dapat mengatur header Panjang Konten, sehingga Cloudfront akan membuang versi terpotong.

Kami telah membuat beberapa optimisasi untuk uSwitch.com baru-baru ini untuk mengompresi beberapa aset statis di situs kami. Meskipun kami menyiapkan seluruh proxy nginx untuk melakukan ini, saya juga telah membuat aplikasi Heroku kecil yang proksi antara CloudFront dan S3 untuk memampatkan konten: http://dfl8.co

Mengingat objek S3 yang dapat diakses publik dapat diakses menggunakan struktur URL sederhana, http://dfl8.co hanya menggunakan struktur yang sama. Yaitu URL berikut ini setara:

http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css

Kemarin amazon mengumumkan fitur baru, sekarang Anda dapat mengaktifkan gzip pada distribusi Anda.

Ini bekerja dengan s3 tanpa menambahkan file .gz sendiri, saya mencoba fitur baru hari ini dan berfungsi dengan baik. (perlu membatalkan objek Anda saat ini)

Info lebih lanjut

Anda dapat mengkonfigurasi CloudFront untuk secara otomatis mengkompres file dari jenis tertentu dan melayani file yang dikompresi.

Lihat Panduan Pengembang AWS