Don*_*ins 191 javascript css gzip amazon-s3 amazon-cloudfront
我一直在寻找让我的网站加载更快的方法,我想探索的一种方法是更多地使用Cloudfront.
因为Cloudfront最初并非设计为自定义源CDN,并且因为它不支持gzipping,所以到目前为止我一直使用它来托管我的所有图像,这些图像在我们的站点代码中由他们的Cloudfront cname引用,并且远远优化了-futures标题.
另一方面,CSS和javascript文件托管在我自己的服务器上,因为直到现在我的印象是他们无法从Cloudfront gzip服务,并且gzipping(大约75%)的收益超过了使用CDN(约50%):Amazon S3(以及Cloudfront)不支持使用浏览器发送的HTTP Accept-Encoding标头以标准方式提供gzip压缩内容,以表明它们支持gzip压缩,以及所以他们无法动态地使用Gzip和服务组件.
因此,直到现在,我仍然不得不在两种选择之间做出选择:
将所有资产移至Amazon CloudFront并忘记GZipping;
保持组件自托管并配置我们的服务器以检测传入请求并在适当时执行动态GZipping,这是我到目前为止所做的.
还有人变通办法来解决这个问题,但本质上这些没有工作.[ 链接 ].
现在,似乎Amazon Cloudfront支持自定义源,并且如果您使用自定义源 [ 链接 ],现在可以使用标准HTTP Accept-Encoding方法来提供gzip压缩内容.
到目前为止,我还没有能够在我的服务器上实现新功能.我上面链接的博客文章,这是我发现的唯一一个详细说明变更的博客文章,似乎暗示你只能启用gzipping(条形图解决方法,我不想使用),如果你选择自定义来源,我宁愿不这样做:我发现在我的Cloudfront服务器上托管相应的文件更简单,并从那里链接到它们.尽管仔细阅读文档,但我不知道:
新功能是否意味着文件应该通过自定义源托管在我自己的域服务器上,如果是,那么代码设置将实现此目的;
如何配置css和javascript标头以确保它们是从Cloudfront gzip中提供的.
Sky*_*son 199
更新: 亚马逊现在支持gzip压缩,因此不再需要. 亚马逊公告
原始答案:
答案是gzip CSS和JavaScript文件.是的,你没有看错.
gzip -9 production.min.css
这将产生production.min.css.gz.删除.gz,上传到S3(或您正在使用的任何源服务器)并显式设置Content-Encoding文件的标头gzip.
它不是即时的gzipping,但你可以很容易地将它包装到你的构建/部署脚本中.优点是:
gzip -9).假设你的CSS/JavaScript文件是(a)精缩和(b)大到足以证明用户的机器上解压缩所需的CPU,你可以在这里得到显著的性能提升.
请记住:如果您对在CloudFront中缓存的文件进行了更改,请确保在进行此类更改后使缓存无效.
Sea*_*ean 15
我的回答是:http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html
根据skyler的回答,你可以上传一个gzip和非gzip版本的css和js.在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; 这个测试,以确保浏览器可以处理gzip压缩代码并提供备份,如果他们不能.
然后在页脚中执行类似的操作,假设您的所有j都在一个文件中,并且可以进入页脚.
<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>
更新: 亚马逊现在支持gzip压缩.公告,所以不再需要. 亚马逊公告
Dan*_*ack 14
Cloudfront支持gzipping.
Cloudfront通过HTTP 1.0连接到您的服务器.默认情况下,某些Web服务器(包括nginx)不会将gzip压缩内容提供给HTTP 1.0连接,但您可以通过添加以下内容来告诉它:
gzip_http_version 1.0
到你的nginx配置.可以为您使用的任何Web服务器设置等效配置.
这确实会产生副作用,使得保持活动连接不适用于HTTP 1.0连接,但由于压缩的好处是巨大的,所以它绝对值得权衡.
摘自http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/
编辑
提供通过亚马逊云前端进行gzip压缩的内容是危险的,可能不应该这样做.基本上,如果您的网络服务器正在压缩内容,它将不会设置内容长度,而是将数据作为分块发送.
如果Cloudfront与您的服务器之间的连接中断并过早切断,Cloudfront仍会缓存部分结果并将其作为缓存版本提供,直至其过期.
接受的首先在磁盘上解压缩然后提供gzip压缩版本的答案是一个更好的想法,因为Nginx将能够设置Content-Length标头,因此Cloudfront将丢弃截断版本.
我们最近对uSwitch.com进行了一些优化,以压缩我们网站上的一些静态资产.虽然我们设置了一个完整的nginx代理来实现这一点,但我还整理了一个在CloudFront和S3之间代理以压缩内容的Heroku应用程序:http://dfl8.co
鉴于可以使用简单的URL结构访问可公开访问的S3对象,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