Share
Wir leben in einer Welt, in der die Menschen immer mehr und schnellere Geschwindigkeiten erwarten. In Sekundenbruchteilen kann Ihre Website wertvolle Besucher und damit auch Geld verlieren. Obwohl die meisten Leute denken, dass CDNs für die "großen Hunde" sind, sind sie heutzutage wirklich billig und unglaublich einfach zu bedienen.
In diesem Tutorial zeige ich Ihnen, wie Sie die Web Services S3 und CloudFront von Amazon einrichten und verwenden, um die Ladezeit der Website zu reduzieren und die Leistungsunterschiede aufzuzeigen.
Ein CDN ist ein Content Delivery (oder Distribution) -Netzwerk. Dabei handelt es sich um ein Computernetzwerk, bei dem jedes System an unterschiedlichen Stellen mit den gleichen Daten auf jedem System platziert ist. Wenn jemand auf das Netzwerk zugreift, kann er auf die Datei im nächstgelegenen System oder auf die Datei mit geringerer Strombelastung zugreifen. Dies führt zu einer besseren Latenz und zum Herunterladen von Dateien. Weitere Informationen zu CDNs finden Sie unter "Content Delivery Network" bei Wikipedia.
Im obigen Beispielabbild greifen Besucher auf den Server in ihrer Nähe zu, der die bestmögliche Leistung bietet. Das Servernetz wäre das CDN. Ein regulärer Webhost hätte einen zentralen Server, auf den all diese Besucher zugreifen müssten. Dieser eine Server könnte sich nur in den USA oder vielleicht in Europa befinden und würde zu längeren Latenzzeiten und Ladezeiten für weiter entfernte Besucher führen.
Die Verwendung von mehr als einem Server, auch auf nur einem Kontinent, kann sich auf die Leistung auswirken.
Ich habe ziemlich viele Leute gefragt, warum ein CDN auch für kleinere Websites wichtig ist und warum sie sich für einen weiteren Web-Service entscheiden sollten. Die einfache Antwort ist, je schneller desto besser. Und warum bieten Sie Ihren Kunden (Besuchern) nicht das Beste, was Sie können?
Je kleiner die Website, desto geringer ist der Einfluss eines CDN. Wenn jedoch Ihre Besucher für Sie in Geld umsetzen, hilft jedes bisschen.
Es ist billig. Es ist einfach. Und es kann zu mehr Geld in Bezug auf Kunden und Einsparungen bei den üblichen Webhost-Kosten führen.
Amazon bietet eine ganze Reihe fantastischer Webdienste. Wir werden Amazons Simple Storage Service (S3) und CloudFront verwenden. S3 ist eine Datenspeicherlösung in der Cloud, die an CloudFront, Amazon CDN, gebunden werden kann.
Wenn Sie nach einer etwas einfacheren All-in-One-Lösung suchen, ist Rackspace Cloud Files eine weitere großartige Option. Sie haben sich mit dem CDN von Limelight Network zusammengetan, das eine etwas bessere Leistung aufweist als das CDN von Amazon. Ihr Service hat jedoch einige Nachteile, die Sie bei Amazon nicht finden werden. Ich werde nicht auf all das eingehen, aber eine der größeren war für mich der Mangel an benutzerdefinierter CNAME-Unterstützung, die angeblich irgendwann in der Zukunft kommen wird. Mit der Unterstützung von CNAME können Sie eine benutzerdefinierte Subdomäne für den Zugriff auf Ihre Dateien einrichten, z. B. "cdn.ihredomain.com"..
Aktuelle Leistungsvergleiche finden Sie unter http://www.cloudclimate.com/cdns/.
Hier ist Amazons S3-Preisgestaltung für die USA. Klicken Sie für andere Bereiche auf das Bild, um die vollständigen Preise anzuzeigen.
Hier ist Amazons CloudFront-Preis für die USA. Klicken Sie für andere Bereiche auf das Bild, um die vollständigen Preise anzuzeigen.
Verwenden Sie den monatlichen Taschenrechner von Amazon, um eine bessere Vorstellung von Ihrer Endabrechnung zu erhalten. Im letzten Monat war meine Gesamtrechnung weniger als 5 US-Dollar, wobei der Großteil davon durch mehr als 20 GB Datenspeicher entstand. Wie Sie sehen, ist es sehr, sehr günstig, insbesondere wenn Sie die Leistungs- und Flexibilitätsvorteile berücksichtigen.
Um anzufangen, müssen wir uns für die S3- und CloudFront-Dienste von Amazon anmelden. Wenn Sie bereits ein Konto bei Amazon haben, müssen Sie sich nur anmelden und die Anmeldung abschließen. Ist dies nicht der Fall, müssen Sie ein Konto erstellen. Dann melden Sie sich für S3 und CloudFront an. Bei der Anmeldung wird der Dienst einfach Ihrem Konto hinzugefügt. Es ist nichts kompliziertes dabei.
Klicken Sie auf jedes Bild, um zur Informations- und Anmeldeseite des Diensts zu gelangen.
Wenn Sie sich angemeldet haben, erhalten Sie eine Zugangsschlüssel-ID und einen geheimen Zugangsschlüssel, die Sie unter "Ihr Konto"> "Sicherheitsberechtigungen" finden. Dies ist im Grunde Ihr Benutzername und Passwort für den Zugriff auf S3.
Zuerst müssen Sie einen Bucket erstellen, in dem alle unsere Dateien gespeichert werden. Weitere Informationen zu "Buckets" finden Sie unter "Amazon S3-Buckets in reinem Englisch beschrieben"..
Dazu loggen wir uns zunächst bei unserem S3-Konto mit der Access Key ID und dem Secret Access Key mit einer Anwendung wie Transmit (OS X) ein, die ich auch verwende. Weitere Apps oder Browser-Add-Ons für den Zugriff auf S3 finden Sie unter "Amazon S3 Simple Storage Service - Alles, was Sie wissen wollten"..
Sobald Sie angemeldet sind, erstellen wir einen Bucket, in den Sie unsere Dateien einfügen können. Ich habe meine "files.jremick.com" genannt. Buckets müssen eindeutige Namen haben, zwischen 3 und 63 Zeichen lang sein und Buchstaben, Zahlen und Bindestriche enthalten (dürfen jedoch nicht mit einem Bindestrich enden).
Mit unique sind sie im AWS-Netzwerk einzigartig. Daher ist es eine gute Idee, etwas wie eine URL oder ähnliches zu verwenden.
Auf die Dateien, die wir in diesen Bucket legen, kann jetzt unter "files.jremick.com.s3.amazonaws.com" zugegriffen werden. Diese URL ist jedoch ziemlich lang und wir können schnell eine kürzere URL einrichten. Wir richten dazu einen neuen CNAME-Eintrag in unserem Webhost ein.
Um die Standard-URL zu verkürzen, erstellen wir einen CNAME-Eintrag wie unten beschrieben (dies ist bei Ihrem Webhost). Ich habe "Dateien" als Subdomain ausgewählt, aber Sie können verwenden, was Sie möchten.
Jetzt können wir auf diese Bucket-Dateien unter "files.jremick.com" zugreifen. Viel besser! Laden Sie dann einfach die gewünschten Dateien in den Bucket "files.jremick.com" hoch.
Nachdem Ihre Dateien hochgeladen wurden, müssen Sie die ACL (Access Control List) so einstellen, dass jeder die Dateien lesen kann (wenn Sie sie öffentlich machen möchten). Wählen Sie unter "Senden" einfach einen Rechtsklick aus, wählen Sie "Informationen einholen", setzen Sie unter "Lesen" die Option "Welt" und klicken Sie auf "Auf eingeschlossene Elemente anwenden". Dadurch erhalten alle Dateien in diesem Bucket Lesezugriff auf die Welt.
Standardmäßig erlauben Dateien, die in Ihr S3-Konto hochgeladen wurden, nur Lese- und Schreibzugriff für den Besitzer. Wenn Sie also später neue Dateien hochladen, müssen Sie diese Schritte erneut durchlaufen oder andere Berechtigungen nur für diese Dateien anwenden.
Nachdem wir nun S3 eingerichtet, eine kürzere URL erstellt und unsere Dateien hochgeladen haben, möchten wir diese Dateien über CloudFront zugänglich machen, um eine extrem niedrige Latenzzeit zu erreichen, um die Ladezeiten zu verkürzen. Dazu müssen wir eine CloudFront-Distribution erstellen.
Melden Sie sich bei Ihrem AWS-Konto an und navigieren Sie zu Ihrer Amazon CloudFront-Verwaltungskonsole (im Dropdown-Menü "Ihr Konto"). Klicken Sie dann auf die Schaltfläche "Verteilung erstellen".
Wir wählen den Ursprungsbereich (den zuvor erstellten Bereich) aus, aktivieren die Protokollierung, wenn Sie möchten, geben einen CNAME und Kommentare an und aktivieren oder deaktivieren die Verteilung. Sie müssen keinen CNAME oder Kommentar eingeben, aber wir möchten später eine kürzere URL einrichten, wie wir es für S3 gemacht haben. Ich möchte "cdn.jremick.com" verwenden, also setze ich hier.
Wie Sie sehen, ist die Standard-URL ziemlich hässlich. Das ist nicht etwas, an das Sie sich erinnern wollen. Jetzt richten wir einen CNAME für die hübsche, kurze URL ein.
Um die benutzerdefinierte CloudFiles-Unterdomäne einzurichten, durchlaufen wir den gleichen Vorgang wie bei S3.
Jetzt können wir über CloudFront auf Dateien zugreifen, indem Sie "cdn.jremick.com" verwenden..
Wenn jemand über Ihren S3-Bucket auf eine Datei zugreift, verhält sich dies wie ein normaler File-Host. Wenn jedoch jemand über CloudFiles auf eine Datei zugreift, fordert er die Datei von Ihrem S3-Bucket (dem Ursprung) an und speichert sie für alle nachfolgenden Anforderungen auf dem CDN-Server, der der ursprünglichen Anforderung am nächsten liegt. Es ist etwas komplizierter als das, aber das ist die allgemeine Idee.
Stellen Sie sich ein CDN als ein intelligentes Netzwerk vor, das in der Lage ist, die schnellstmögliche Route für die Zustellung von Anforderungen zu ermitteln. Ein anderes Beispiel wäre, wenn der nächstgelegene Server mit Verkehr belastet ist. Es könnte schneller sein, die Datei von einem Server etwas weiter weg zu bekommen, jedoch mit weniger Verkehr. CloudFront liefert die angeforderte Datei stattdessen von diesem Speicherort aus.
Wenn eine Datei in den CloudFront-Netzwerkservern zwischengespeichert wird, wird sie erst nach Ablauf der Zeit ersetzt und automatisch entfernt (standardmäßig nach 24 Stunden Inaktivität). Dies kann sehr schmerzhaft sein, wenn Sie versuchen, Updates sofort herauszugeben. Um dies zu umgehen, müssen Sie Ihre Dateien versionieren. "My-stylesheet.css" könnte beispielsweise "my-stylesheet-v1.0.css" sein. Wenn Sie dann ein Update durchführen, das sofort gelöscht werden muss, ändern Sie den Namen in "my-stylesheet-v1.1.css" oder etwas Ähnliches.
Unser Inhalt wird in unseren S3-Bucket hochgeladen, unsere CloudFront-Distribution wird bereitgestellt und unsere benutzerdefinierten Subdomains sind für den einfachen Zugriff eingerichtet. Es ist an der Zeit, es auf die Probe zu stellen, um zu sehen, welche Leistungsvorteile wir erwarten können.
Ich habe 44 Beispielbilder mit einer Größe von ca. 2 KB bis 45 KB eingerichtet. Sie denken vielleicht, dass dies mehr Bilder sind, als die meisten Websites auf eine einzige Seite laden. Das mag stimmen, aber es gibt viele Websites wie Portfolios, E-Commerce-Websites, Blogs usw., die genauso viele und möglicherweise mehr Bilder laden.
Obwohl ich nur Bilder für dieses Beispiel verwende, ist die Dateigröße und die Menge für den Vergleich wichtig. Heutige Websites laden auf jeder Seite mehrere Javascript-, CSS-, HTML- und Bilddateien. 44 Dateianfragen sind wahrscheinlich weniger als die meisten Websites, so dass ein CDN einen noch größeren Einfluss auf Ihre Website haben kann, als wir in diesem Vergleich sehen werden.
Ich verwende den Web-Inspector von Safari, um die Leistungsergebnisse anzuzeigen. Ich habe die Caches deaktiviert und für jeden Test 10-15 Mal (etwa alle 2-3 Sekunden) Shift + Refresh aktiviert, um einen anständigen Durchschnitt der gesamten Ladezeit, Latenz und Dauer zu erhalten.
Hier sind die Leistungsergebnisse, wenn Sie über meinen regulären Webhost gehostet werden. Sortiert nach Latenz.
Sortiert nach Dauer.
Die exakt gleichen Dateien wurden zum Testen von S3 verwendet. Sortiert nach Latenz.
Sortiert nach Dauer.
S3 ist schneller als mein normaler Webhoster, aber nur am Rande. Wenn Sie keine Lust haben, sich mit einem CDN zu beschäftigen, ist S3 immer noch eine gute Option, um Ihrer Website einen ordentlichen Geschwindigkeitsschub zu verleihen. Ich empfehle trotzdem, ein CDN zu verwenden, und wir werden in diesem nächsten Test sehen, warum.
Zum Testen von CloudFront wurden genau dieselben Dateien verwendet.
Sortiert nach Dauer.
Im Folgenden finden Sie eine kurze Auflistung des Leistungsvergleichs zwischen meinem regulären Webhost und den gleichen Dateien im CloudFront-Service von Amazon.
Dauervergleich
50 ms oder sogar 100 ms klingt nicht nach einer sehr langen Wartezeit (0,1 Sekunden), aber wenn Sie dies für 30, 40, 50 oder mehr Dateien wiederholen, können Sie sehen, wie schnell es Sekunden ergibt.
Hier ein kurzes Video, das zeigt, wie spürbar die Erhöhung der Ladezeit ist. Ich habe Caches deaktiviert und führe eine erzwungene Aktualisierung aus (Shift + Refresh), um sicherzustellen, dass Bilder nicht zwischengespeichert werden.
Es gibt verschiedene Möglichkeiten, die Website-Leistung bei Verwendung eines CDN zu verbessern.
Weitere Informationen finden Sie unter Best Practices zur Beschleunigung Ihrer Website.
Eine der oben genannten Optionen zur Steigerung der Leistung war das Bereitstellen von gezippten Dateien. Leider kann CloudFront nicht automatisch feststellen, ob ein Besucher gezippte Dateien annehmen kann oder nicht, und kann die richtige liefern. Glücklicherweise unterstützen heutzutage alle modernen Browser gezippte Dateien.
Um gezippte Dateien von CloudFront aus zu liefern, können wir unserer Website Logik bereitstellen, um die richtigen Dateien bereitzustellen, oder wir können die Inhaltsverschlüsselung und den Inhaltstyp für einige bestimmte Dateien festlegen, um die Sache etwas einfacher zu gestalten. Gzip die gewünschten Dateien und benennen Sie sie um, damit sie nicht .gz beendet werden. Beispielsweise würde "Dateiname.css.gz" zu "Dateiname.css" oder um sich daran zu erinnern, dass es sich um eine komprimierte Datei handelt, nennen Sie sie "Dateiname.gz.css". Laden Sie nun die gezippte Datei an den gewünschten Ort in Ihrem S3-Bucket hoch (vergessen Sie nicht, die ACL / Berechtigungen festzulegen)..
Wenn Sie nicht sicher sind, wie eine Datei gepackt werden soll, finden Sie weitere Informationen unter http://www.gzip.org (OS X kann dies im Terminal).
Wir müssen den Content-Encoding und den Content-Type (falls noch nicht festgelegt) in unseren Dateien festlegen, so dass der Browser bei Anforderung über den Browser weiß, dass der Inhalt gepackt ist und ihn ordnungsgemäß dekomprimieren kann. Sonst sieht es so aus.
Mit dem Bucket Explorer ist dies problemlos möglich. Geben Sie nach dem Herunterladen Ihren AWS Access Key und Ihren Secret Key ein, um sich bei Ihrem S3-Konto anzumelden. Suchen Sie nach der zuvor hochgeladenen, gezippten Datei, klicken Sie mit der rechten Maustaste und wählen Sie "MetaData aktualisieren"..
Wie Sie sehen, ist der Content-Type bereits auf text / css gesetzt, sodass wir dies nicht festlegen müssen (Javascript wäre Text / Javascript). Wir müssen nur die richtige Content-Encoding hinzufügen. Klicken Sie auf "Hinzufügen" und geben Sie im Popup-Dialogfeld "Content-Encoding" in das Feld "Schlüssel" und "gzip" in das Feld "Wert" ein. Klicken Sie auf OK und dann auf Speichern. Nun wird der Browser die Datei korrekt anzeigen.
Durch das Auslesen einer Datei kann die Dateigröße erheblich reduziert werden. Zum Beispiel betrug dieses Test-Stylesheet etwa 22 KB und wurde auf etwa 5 KB reduziert. Für mein Blog habe ich alle meine jQuery-Plugins mit jQuery-UI-Registerkarten kombiniert. Nach der Minifizierung wurde sie auf 26,49 KB reduziert, nachdem sie gekürzt wurde, wurde sie auf 8,17 KB reduziert.
Es gibt viele Möglichkeiten, die Leistung Ihrer Website zu steigern, und meiner Meinung nach sind sie einen Versuch wert. Wenn Besucher nur 0,5 Sekunden oder 1 Sekunde davon entfernt sind, Ihre Website zu verlassen, kann dies durch ein CDN verhindert werden. Außerdem sind die meisten von uns Geschwindigkeitsfreaks, warum sollten Sie also nicht die Leistung Ihrer Website steigern, wenn Sie können? Vor allem, wenn Sie dabei Geld sparen könnten.
Wenn Sie Fragen haben, lassen Sie es mich in den Kommentaren wissen und ich werde versuchen, auf sie zu antworten. Vielen Dank!
Accentsconagua