Amazon CloudFront'tan S3 ile gziplenmiş CSS ve JavaScript sunma

Sitemin daha hızlı yüklenmesini sağlamanın yollarını arıyordum ve keşfetmek istediğim yollardan biri de Cloudfront'u daha fazla kullanmak.

Cloudfront başlangıçta özel kaynaklı bir CDN olarak tasarlanmadığından ve gzipping'i desteklemediğinden, şimdiye kadar site kodumdaki Cloudfront cname'si tarafından referans verilen ve uzak ile optimize edilmiş tüm resimlerimi barındırmak için kullanıyorum - gelecekteki başlıkları.

Diğer yandan CSS ve javascript dosyaları kendi sunucumda barındırılıyor, çünkü şimdiye kadar Cloudfront'tan gzip edilemedikleri ve gzipping (yaklaşık yüzde 75) kazancının ağır bastığı izlenimi altındaydım. CDN (yaklaşık yüzde 50) kullanmaktan: Amazon S3 (ve dolayısıyla Cloudfront), gzip sıkıştırması için desteklerini belirtmek üzere tarayıcılar tarafından gönderilen HTTP Kabul Et-Kodlama üstbilgisini kullanarak gzip edilmiş içeriğin standart bir şekilde sunulmasını desteklemedi ve bu yüzden anında Gzip bileşenlerine hizmet edemediler.

Böylece, şimdiye kadar, iki alternatif arasında seçim yapmak zorunda olduğum izlenimindeydim:

1. tüm varlıkları Amazon CloudFront'a taşıyın ve GZipping'i unutun;

2. bileşenleri kendi kendini barındırmaya devam edin ve sunucumuzu gelen istekleri algılayacak ve anında GZipping'i uygun şekilde gerçekleştirecek şekilde yapılandırın.

Orada vardı bu sorunu çözmek için geçici çözümler, ancak esasen bu işe yaramadı . [ bağlantı ].

Şimdi, Amazon Cloudfront özel orijini destekliyor gibi görünüyor ve artık bir Özel Origin [ link ] kullanıyorsanız gzip edilmiş içerik sunmak için standart HTTP Kabul Et-Kodlama yöntemini kullanmak mümkün .

Yeni özelliği sunucumda şu ana kadar uygulayamadım. Değişikliklerin ayrıntılarını bulduğum tek bağlantı olan yukarıda bağlandığım blog gönderisi, özel menşe tercih ederseniz, yalnızca gzipping'i (kullanmak istemediğim geçici çözümler) etkinleştirebileceğiniz anlamına geliyor. Bunu tercih etmem: Karşılık gelen dosyaları Cloudfront sunucumda barındırmayı ve oradan bağlantı kurmayı daha basit buluyorum. Belgeleri dikkatlice okumama rağmen bilmiyorum:

• yeni özelliğin, dosyaların özel kökeni aracılığıyla kendi etki alanı sunucumda barındırılması gerektiği anlamına gelip gelmediği ve bu durumda hangi kod kurulumunun bunu başaracağı;

• css ve javascript üstbilgilerinin Cloudfront'tan gzip edilmiş olduklarından emin olmak için nasıl yapılandırılacağı.

GÜNCELLEME: Amazon artık gzip sıkıştırmasını destekliyor, bu yüzden artık gerekli değil. Amazon Duyurusu

Orijinal cevap:

Cevap CSS ve JavaScript dosyalarını sıkıştırmaktır. Evet, doğru okudunuz.

gzip -9 production.min.css

Bu üretecek production.min.css.gz. .gzS3'e yükleyin (veya kullandığınız herhangi bir başlangıç ​​sunucusunu) kaldırın ve Content-Encodingdosya üstbilgisinigzip .

Anında gzipping değil, ancak derleme / dağıtım komut dosyalarınıza kolayca yerleştirebilirsiniz. Avantajları:

1. Apache'nin dosya istendiğinde içeriği sıkıştırması için CPU gerekmez.
2. Dosyalar en yüksek sıkıştırma seviyesinde gzip edilir (varsayalım gzip -9).
3. Dosyayı bir CDN'den sunuyorsunuz.

CSS / JavaScript dosyalarınızın (a) küçültülmüş ve (b) kullanıcının makinesinde sıkıştırmayı açmak için gereken CPU'yu haklı çıkaracak kadar büyük olduğunu varsayarsak, burada önemli performans kazançları elde edebilirsiniz.

Unutmayın: CloudFront'ta önbelleğe alınmış bir dosyada değişiklik yaparsanız, bu tür bir değişiklik yaptıktan sonra önbelleği geçersiz kıldığınızdan emin olun.

Cevabım bununla ilgili bir soru: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Skyler'ın cevabını kullanarak css ve js'nin gzip ve gzip olmayan bir sürümünü yükleyebilirsiniz. Safari'de adlandırma ve test konusunda dikkatli olun. Çünkü safari idare etmeyecek .css.gzveya.js.gz dosyaları.

site.jsve site.js.jgzve site.cssve site.gz.css (ayarlamak gerekir content-encodingbu hakkına hizmet almak için doğru MIME tipine başlık)

Sonra sayfanıza koyun.

<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 sadece sr_gzipEnabled = true; Bu testler tarayıcının gzip kodunu işleyebildiğinden ve yapamadıklarında bir yedek sağlayabildiğinden emin olmak için.

Sonra tüm js tek bir dosyada olduğunu ve altbilgi gidebilir varsayarak altbilgi benzer bir şey yapın.

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

GÜNCELLEME: Amazon artık gzip sıkıştırmasını destekliyor. Duyuru, bu yüzden artık gerekli değil. Amazon Duyurusu

Cloudfront gziplemeyi destekler.

Cloudfront, sunucunuza HTTP 1.0 üzerinden bağlanır. Varsayılan olarak, nginx dahil olmak üzere bazı web sunucuları, HTTP 1.0 bağlantılarına gzip'lenmiş içerik sunmaz, ancak şunu ekleyerek bunu yapabilirsiniz:

gzip_http_version 1.0

nginx yapılandırmanıza. Eşdeğer yapılandırma hangi web sunucusunu kullandığınız için ayarlanabilir.

Bunun, canlı bağlantıların HTTP 1.0 bağlantıları için çalışmamasını sağlamanın bir yan etkisi vardır, ancak sıkıştırmanın faydaları büyük olduğundan, kesinlikle takas etmeye değer.

Alındığı http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

Düzenle

Amazon bulut cephesinden anında gziplenmiş içerik sunmak tehlikelidir ve muhtemelen yapılmamalıdır. Temel olarak web sunucunuz içeriği gzipliyorsa, bir İçerik Uzunluğu ayarlamaz ve bunun yerine verileri yığın halinde gönderir.

Cloudfront ile sunucunuz arasındaki bağlantı kesilir ve zamanından önce kesilirse, Cloudfront kısmi sonucu önbelleğe alır ve süresi dolana kadar önbelleğe alınan sürüm olarak sunar.

Önce diskte gzipping'in ardından gzip edilmiş sürüme hizmet etmenin kabul edilen cevabı, Nginx'in Content-Length başlığını ayarlayabileceği ve Cloudfront'un kesilmiş sürümleri atacağı için daha iyi bir fikirdir.

USwitch.com için son zamanlarda sitemizdeki bazı statik varlıkları sıkıştırmak için birkaç optimizasyon yaptık. Bunu yapmak için tam bir nginx proxy kurmamıza rağmen, içeriği sıkıştırmak için CloudFront ve S3 arasında proxy olan küçük bir Heroku uygulamasını da bir araya getirdim: http://dfl8.co

Herkese açık olarak erişilebilen S3 nesnelerine basit bir URL yapısı kullanılarak erişilebilir, http://dfl8.co sadece aynı yapıyı kullanır. Yani, aşağıdaki URL'ler eşdeğerdir:

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

Dün amazon yeni bir özellik duyurdu, artık dağıtımınızda gzip'i etkinleştirebilirsiniz.

S3 ile kendiniz eklemeden .gz dosyaları olmadan çalışır, bugün yeni özelliği denedim ve harika çalışıyor. (mevcut nesnelerinizi geçersiz kılmanız gerekir)

Daha fazla bilgi

CloudFront'u belirli türdeki dosyaları otomatik olarak sıkıştıracak ve sıkıştırılmış dosyaları sunacak şekilde yapılandırabilirsiniz.

Bkz. AWS Geliştirici Kılavuzu