the - Sirviendo CSS y JavaScript comprimidos desde Amazon CloudFront a través de S3
configure aws cloudfront (6)
He estado buscando formas de hacer que mi sitio se cargue más rápido y una forma que me gustaría explorar es hacer un mayor uso de Cloudfront.
Debido a que Cloudfront originalmente no fue diseñado como un CDN de origen personalizado y porque no era compatible con gzipping, hasta ahora lo he estado usando para alojar todas mis imágenes, a las que hace referencia su nombre de Cloudfront en el código de mi sitio, y he optimizado con mucho -los encabezados de los futuros.
Los archivos CSS y javascript, por otro lado, están alojados en mi propio servidor, porque hasta ahora tenía la impresión de que no se podían enviar archivos comprimidos desde Cloudfront, y que la ganancia de gzipping (alrededor del 75 por ciento) es mayor que de usar un CDN (alrededor del 50 por ciento): Amazon S3 (y, por lo tanto, Cloudfront) no admitía el servicio de contenido comprimido en gzip de forma estándar mediante el uso del encabezado HTTP Accept-Encoding que envían los navegadores para indicar su compatibilidad con la compresión gzip, y así que no pudieron Gzip y servir componentes sobre la marcha.
Por lo tanto, tenía la impresión, hasta ahora, de que uno tenía que elegir entre dos alternativas:
mueva todos los activos a Amazon CloudFront y olvídese de GZipping;
mantenga los componentes alojados automáticamente y configure nuestro servidor para detectar solicitudes entrantes y realice GZipping sobre la marcha según corresponda, que es lo que elegí hacer hasta ahora.
Hubo soluciones para resolver este problema, pero esencialmente no funcionaron . [ link ].
Ahora, parece que Amazon Cloudfront es compatible con el origen personalizado, y que ahora es posible usar el método estándar de codificación y aceptación HTTP para servir contenido comprimido en formato Gz si está usando un [ Origen ] personalizado [ link ].
Hasta ahora no he podido implementar la nueva función en mi servidor. La publicación del blog que vinculé anteriormente, que es la única que encontré que detalla el cambio, parece dar a entender que solo se puede habilitar gzipping (soluciones temporales de barras, que no quiero usar), si opta por un origen personalizado, que Preferiría que no: me parece más sencillo alojar archivos complementarios en mi servidor Cloudfront y enlazarlos desde allí. A pesar de leer cuidadosamente la documentación, no sé:
si la nueva característica significa que los archivos deben estar alojados en mi propio servidor de dominio a través de un origen personalizado, y si es así, qué configuración de código logrará esto;
cómo configurar los encabezados css y javascript para asegurarte de que se sirven gzipped desde Cloudfront.
Ayer Amazon anunció una nueva función, ahora puede habilitar gzip en su distribución.
Funciona con s3 sin agregar archivos .gz, probé la nueva función hoy y funciona muy bien. (Necesito invalidar tus objetos actuales aunque)
Cloudfront soporta gzipping.
Cloudfront se conecta a su servidor a través de HTTP 1.0. De forma predeterminada, algunos servidores web, incluido nginx, no ofrecen contenido comprimido con gzip a conexiones HTTP 1.0, pero puede indicarle que lo haga agregando:
gzip_http_version 1.0
a su configuración nginx. La configuración equivalente podría establecerse para cualquier servidor web que esté utilizando.
Esto tiene el efecto secundario de que las conexiones keep-alive no funcionan para las conexiones HTTP 1.0, pero como los beneficios de la compresión son enormes, definitivamente vale la pena compensar.
Tomado de http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/
Editar
Servir contenido comprimido sobre la marcha a través de la nube de Amazon es peligroso y probablemente no debería hacerse. Básicamente, si su servidor web está comprimiendo el contenido, no establecerá una longitud de contenido y, en su lugar, enviará los datos como fragmentados.
Si la conexión entre Cloudfront y su servidor se interrumpe y se corta prematuramente, Cloudfront todavía almacena en caché el resultado parcial y sirve como la versión en caché hasta que caduque.
La respuesta aceptada de gzipping primero en el disco y luego servir la versión gzipped es una mejor idea, ya que Nginx podrá configurar el encabezado Content-Length, por lo que Cloudfront descartará las versiones truncadas.
Hemos realizado algunas optimizaciones para uSwitch.com recientemente para comprimir algunos de los activos estáticos en nuestro sitio. Aunque configuramos un proxy nginx completo para hacer esto, también armé una pequeña aplicación Heroku que alterna entre CloudFront y S3 para comprimir contenido: http://dfl8.co
Dado que se puede acceder a los objetos S3 de acceso público mediante una estructura de URL simple, http://dfl8.co solo usa la misma estructura. Es decir, las siguientes URL son equivalentes:
http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css
Mi respuesta es un despegue de esto: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html
Basándose en la respuesta del skyler, puede cargar una versión gzip y no gzip de css y js. Ten cuidado al nombrar y probar en Safari. Porque safari no manejará archivos .css.gz o .js.gz .
site.js y site.js.jgz y site.css y site.gz.css (deberá configurar el encabezado de content-encoding en el tipo MIME correcto para que funcionen correctamente)
Luego en su página ponga.
<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 es sr_gzipEnabled = true; Esto prueba para asegurarse de que el navegador puede manejar el código comprimido y proporcionar una copia de seguridad si no pueden.
Luego haga algo similar en el pie de página asumiendo que todo su js está en un archivo y puede ir en el pie de página.
<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>
ACTUALIZACIÓN: Amazon ahora es compatible con la compresión gzip. Anuncio, por lo que esto ya no es necesario. Anuncio de Amazon
Puede configurar CloudFront para comprimir automáticamente archivos de ciertos tipos y servir los archivos comprimidos.
Consulte la Guía del desarrollador de AWS
ACTUALIZACIÓN: Amazon ahora admite la compresión gzip, por lo que ya no es necesario. Anuncio de Amazon
Respuesta original:
La respuesta es gzip los archivos CSS y JavaScript. Sí, lo leiste bien.
gzip -9 production.min.css
Esto producirá production.min.css.gz . Elimine el .gz , cárguelo en S3 (o en el servidor de origen que esté utilizando) y configure explícitamente el encabezado de Content-Encoding del archivo en gzip .
No es un gzipping sobre la marcha, pero se podría resumir fácilmente en sus scripts de compilación / despliegue. Las ventajas son:
- No requiere CPU para que Apache gzip el contenido cuando se solicita el archivo.
- Los archivos están comprimidos en Gzip en el nivel de compresión más alto (asumiendo
gzip -9). - Estás sirviendo el archivo desde un CDN.
Suponiendo que sus archivos CSS / JavaScript son (a) minificados y (b) lo suficientemente grandes para justificar la CPU requerida para descomprimir en la máquina del usuario, puede obtener importantes ganancias de rendimiento aquí.
Solo recuerde: si realiza un cambio en un archivo que está en caché en CloudFront, asegúrese de invalidar la memoria caché después de realizar este tipo de cambio.