Serving gzippte CSS und JavaScript von Amazon CloudFront über S3

Ich habe auf der Suche nach Möglichkeiten, meine Seite schneller geladen und in einer Weise, dass ich möchte, um zu erkunden, ist die verstärkte Nutzung von Cloudfront.

Weil Cloudfront war ursprünglich nicht konzipiert als eine custom-origin CDN und weil es Sie nicht unterstützen Gzip, habe ich bisher verwende es als host für alle meine Bilder, die referenziert sind, durch Ihre Cloudfront-cname in meiner Website-code, und optimiert mit weit-futures-Header.

CSS-und javascript-Dateien, auf der anderen Seite, gehostet auf meinem eigenen server, denn bis jetzt war ich unter dem Eindruck, dass Sie konnte nicht serviert werden, gzipped von Cloudfront, und dass der Gewinn von Gzip (etwa 75 Prozent) überwiegt, dass von der Nutzung eines CDN (über 50 Prozent): Amazon S3 (und damit Cloudfront) nicht unterstützen portion gzipped-Inhalt in einem standard-Weise durch die Verwendung des HTTP-Accept-Encoding-header, die gesendet wird, von den Browsern zu zeigen, Ihre Unterstützung für gzip-Komprimierung und so waren Sie nicht in der Lage, Gzip und dienen-Komponenten on-the-fly.

So, ich war unter dem Eindruck, bis jetzt hatte man die Wahl zwischen zwei alternativen:

verschieben Sie alle Vermögenswerte, die zu Amazon CloudFront und vergessen-Gzip;
halten-Komponenten self-hosted und konfigurieren unsere server zu erkennen, die eingehenden Anfragen und führen Sie on-the-fly Gzip als angemessen, das ist, was ich wählte es so weit.

Dort wurden Problemumgehungen um dieses Problem zu lösen, aber im wesentlichen diese hat nicht funktioniert. [link].

Nun scheint es Amazon Cloudfront unterstützt benutzerdefinierte Ursprungs, und dass es ist nun möglich, verwenden Sie die standard-HTTP-Accept-Encoding-Methode für das servieren von Gzip-Inhalte, wenn Sie Benutzerdefinierte Origin - [ link ].

Habe ich noch nicht so weit umsetzen können, die neue Funktion auf meinem server. Der blog-post habe ich im Zusammenhang mit oben, die ist die einzige, die ich gefunden Detaillierung der änderung, scheint zu implizieren, dass Sie können nur dann aktivieren, Gzip (bar workarounds, die ich nicht verwenden will), wenn Sie entscheiden sich für benutzerdefinierte Herkunft, die ich lieber nicht: ich finde es einfacher, die Hosts der jeweiligen fileds auf meine Cloudfront-server, und link, um Sie von dort aus. Trotz sorgfältigem Lesen der Dokumentation, ich weiß nicht:

ob die neue Funktion bedeutet, die Dateien werden sollte, gehostet auf meinem eigenen domain-server über benutzerdefinierten Ursprungs, und wenn ja, welche code-setup erreichen;
so konfigurieren Sie die css-und javascript-Header, um sicherzustellen, dass Sie werden serviert gzipped aus Cloudfront.

InformationsquelleAutor der Frage Donald Jenkins | 2011-03-26

194

UPDATE: Amazon unterstützt nun auch gzip-Kompression, so dass diese nicht mehr benötigt wird. Amazon-Ankündigung

Original Antwort:

Die Antwort ist gzip die CSS-und JavaScript-Dateien. Ja, Sie haben richtig gelesen.
```
gzip -9 production.min.css
```
Diese produzieren production.min.css.gz. Entfernen Sie die .gzupload auf S3 (oder was auch immer-Ursprungs-server, die Sie nutzen) und explizit den Content-Encoding header für die Datei zu gzip.

Es ist nicht on-the-fly Gzip, aber Sie könnte sehr leicht wickeln Sie es in Ihren build - /deployment-Skripten. Die Vorteile sind:
1. Es erfordert keine CPU für Apache gzip den Inhalt, wenn die Datei angefordert wird.
2. Die Dateien sind mit Gzip-auf der höchsten Komprimierungsstufe (vorausgesetzt gzip -9).
3. Servieren Sie sehen die Datei von einem CDN.
Davon aus, dass Ihre CSS - /JavaScript-Dateien sind (a) minified und (b) groß genug, um zu rechtfertigen, die die CPU benötigt, um Sie zu entpacken auf dem Rechner des Benutzers, Sie können erhebliche performance-Gewinne hier.

Nur daran erinnern: Wenn Sie eine änderung an einer Datei, die zwischengespeichert wird, in CloudFront, stellen Sie sicher, dass Sie den cache ungültig, nachdem Sie diese Art von ändern.

InformationsquelleAutor der Antwort Skyler Johnson

Meine Antwort ist ein take-off auf dieser: http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

Gebäude aus skyler die Antwort, die du hochladen kannst gzip und nicht-gzip-version von css und js. Seien Sie vorsichtig, der Benennung und der test in Safari. Da safari nicht behandeln .css.gz oder .js.gz - Dateien.

site.js und site.js.jgz und
site.css und site.gz.css (Sie müssen die content-encoding - header, um den richtigen MIME-Typ zu bekommen, diese dienen rechts)

Dann in Ihre Seite setzen.

<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 ist nur sr_gzipEnabled = true; Diese tests, um sicherzustellen, dass der browser verarbeiten kann die Gzip-code und sorgen für eine Sicherung, wenn Sie nicht können.

Dann tun Sie etwas ähnliches in der Fußzeile, vorausgesetzt, alle Ihre js in einer Datei und kann in der Fußzeile.

<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 unterstützt nun auch gzip-Kompression. Ankündigung, so dass diese nicht mehr benötigt wird. Amazon-Ankündigung

InformationsquelleAutor der Antwort Sean

14

Cloudfront unterstützt Gzip.

Cloudfront-Verbindung zu Ihrem server via HTTP 1.0. Standardmäßig einige Webserver, einschließlich nginx, somit nicht dienen gzipped-Inhalt an die HTTP 1.0 verbindungen, aber Sie können sagen, es zu tun, indem Sie hinzufügen:
```
gzip_http_version 1.0
```
Ihrem nginx-config. Das äquivalent config gesetzt werden konnte, für welchen web-server du verwendest.

Dies hat einen Nebeneffekt, dass keep-alive-verbindungen, nicht für HTTP 1.0-verbindungen, aber die Vorteile von Kompression, sind riesig, es lohnt sich die trade-off.

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

Bearbeiten

Inhalt bedienen, ist die Gzip-on-the-fly über Amazon cloud front ist gefährlich und wahrscheinlich nicht getan werden sollte. Im Grunde, wenn der webserver Gzip den Inhalt, es wird kein Content-Length und stattdessen senden Sie die Daten als chunked.

Wenn die Verbindung zwischen Cloudfront und dein server ist unterbrochen und vorzeitig abgetrennt, Cloudfront noch caches, die teilweise Ergebnis und dient als die version im Cache, bis es abläuft.

Die akzeptierte Antwort von Gzip Sie es zuerst auf der Festplatte und dann servieren Sie die Gzip-version ist eine bessere Idee, wie Nginx in der Lage, das Content-Length-header, und so Cloudfront verwerfen abgeschnitten Versionen.

InformationsquelleAutor der Antwort Danack
5

Wir haben ein paar Optimierungen für uSwitch.com vor kurzem komprimieren einige der statischen Elemente auf unserer Website. Obwohl wir das setup eine ganze nginx-proxy habe ich auch zusammen ein wenig Heroku-app, die proxies zwischen CloudFront und S3 zu komprimieren Inhalt: http://dfl8.co

Gegeben öffentlich zugänglich S3-Objekte zugegriffen werden kann, über eine einfache URL-Struktur, http://dfl8.co verwendet einfach die gleiche Struktur. I. e. die folgenden URLs sind äquivalent:
```
http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css
```
InformationsquelleAutor der Antwort pingles
5

Gestern von amazon angekündigte neue feature, Sie können jetzt aktivieren Sie gzip auf Ihre Verteilung.

Funktioniert es mit dem s3 ohne Zusatz .gz-Dateien selbst, ich habe versucht, die neue Funktion heute und es funktioniert Super. (Sie benötigen, zu entkräften, sind Sie aktuellen Objekte)

Mehr info

InformationsquelleAutor der Antwort Chris
0

Können Sie CloudFront konfigurieren, um automatisch Dateien komprimieren bestimmter Arten und dienen der komprimierten Dateien.

Unter AWS Developer Guide

InformationsquelleAutor der Antwort Rafi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.