Advertisement
  1. Code
  2. General

Überladen der Website-Leistung mit AWS S3 und CloudFront

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wir leben in einer Welt, in der die Menschen zunehmend mehr und schnellere Geschwindigkeiten erwarten. In Sekundenbruchteilen kann Ihre Website wertvolle Besucher und damit Geld verlieren. Obwohl die meisten Leute denken, CDNs sind für die "big dogs", sind sie heutzutage supergünstig und unglaublich einfach zu bedienen.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie Amazon Web Services S3 und CloudFront einrichten und verwenden, um die Ladezeit der Website zu verkürzen und die Leistungsunterschiede aufzuzeigen.

Was ist ein CDN?

Ein CDN ist ein Content Delivery (oder Distribution) -Netzwerk. Es handelt sich um ein Computernetzwerk, bei dem jedes System an verschiedenen Punkten mit jeweils denselben Daten platziert ist. Wenn jemand auf das Netzwerk zugreift, kann er auf die Datei auf dem System zugreifen, das ihm am nächsten liegt, oder auf die Datei mit der geringeren aktuellen Last. Dies führt zu einer besseren Latenz und Dateidownloaddauer. Weitere Informationen zu CDNs finden Sie unter "Content Delivery Network" bei Wikipedia.

CDN-graphic-example-jremickCDN-graphic-example-jremickCDN-graphic-example-jremick

Im obigen Beispielbild greifen Besucher auf den Server in ihrer Nähe zu, der die bestmögliche Leistung bietet. Das Servernetzwerk wäre das CDN. Ein normaler Webhost hätte einen zentralen Server, auf den alle 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 Latenz- und Ladezeiten für weiter entfernte Besucher führen.

Die Verwendung von mehr als einem Server, selbst auf nur einem Kontinent, wirkt sich positiv auf die Leistung aus.

Warum und der Beweis

Ich wurde von einigen Leuten gefragt, warum ein CDN wichtig ist, auch für kleinere Websites, und warum sie sich die Mühe machen sollten, für einen weiteren Webdienst zu bezahlen. Die einfache Antwort lautet: Je schneller, desto besser. Und warum bieten Sie Ihren Kunden(Besuchern) nicht das Beste, was Sie können?

Je kleiner die Website ist, desto weniger Auswirkungen hat ein CDN. Wenn Ihre Besucher jedoch Geld für Sie übersetzen, hilft jedes kleine bisschen.

  • Im Jahr 2006 zeigten Googles Tests, dass eine Erhöhung der Ladezeit um 0,5 Sekunden zu einem Rückgang des Datenverkehrs um 20% führte.
  • Im Jahr 2007 zeigten die Tests von Amazon, dass der Umsatz mit jeder Verlängerung der Ladezeit um 100 ms um 1% sinken würde.
  • In diesem Jahr (2009) gab Akamai (ein führender CDN-Anbieter) in einer Studie bekannt, dass 2 Sekunden der neue Schwellenwert für die Antwortzeiten von E-Commerce-Webseiten sind.

Es ist günstig. Es ist einfach. Und es kann zu mehr Geld in Bezug auf Kunden führen und Ihre regulären Webhost-Kosten einsparen.

Amazon Web Services (AWS)

Amazon bietet eine ganze Reihe fantastischer Webdienste. Wir werden den Simple Storage Service (S3) von Amazon und CloudFront verwenden. S3 ist eine Datenspeicherlösung in der Cloud, die mit CloudFront, dem CDN von Amazon, verknüpft 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 als das CDN von Amazon aufweist. Ihr Service hat jedoch einige Nachteile, die Sie bei Amazon nicht finden werden. Ich werde nicht auf all diese Themen eingehen, aber eine der größeren für mich war der Mangel an benutzerdefinierter CNAME-Unterstützung, der angeblich irgendwann in der Zukunft verfügbar sein wird. Mit der CNAME-Unterstützung können Sie eine benutzerdefinierte Subdomain einrichten, um auf Ihre Dateien wie "cdn.yourdomain.com" zuzugreifen.

Aktuelle Leistungsvergleiche finden Sie unter http://www.cloudclimate.com/cdns/.

Preisgestaltung

Hier ist der S3-Preis von Amazon für die USA. Klicken Sie für andere Bereiche auf das Bild, um die vollständigen Preise anzuzeigen.

s3-pricings3-pricings3-pricing

Hier finden Sie die CloudFront-Preise von Amazon für die USA. Klicken Sie für andere Bereiche auf das Bild, um die vollständigen Preise anzuzeigen.

cloudfront-pricingcloudfront-pricingcloudfront-pricing

Verwenden Sie den monatlichen Taschenrechner von Amazon, um eine bessere Vorstellung von Ihrer Endrechnung zu erhalten. Im letzten Monat betrug meine Gesamtrechnung weniger als 5 US-Dollar, wobei der Großteil davon aus mehr als 20 GB Datenspeicher stammte. Wie Sie sehen, ist es sehr, sehr billig, insbesondere wenn Sie die Vorteile in Bezug auf Leistung und Flexibilität berücksichtigen.

Richten Sie S3 und CloudFront ein

Um loszulegen, 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. Wenn nicht, müssen Sie ein Konto erstellen und sich dann für S3 und CloudFront anmelden. Bei der Anmeldung wird der Dienst einfach Ihrem Konto hinzugefügt. Es ist nichts kompliziertes beteiligt.

Klicken Sie auf jedes Bild, um zur Informations- und Anmeldeseite des Dienstes zu gelangen.

s3-signups3-signups3-signup
cloudfront-signupcloudfront-signupcloudfront-signup

Sobald Sie sich angemeldet haben, erhalten Sie eine Zugangsschlüssel-ID und einen geheimen Zugangsschlüssel, die Sie unter "Ihr Konto" > "Sicherheitsanmeldeinformationen" finden. Dies ist im Grunde Ihr Benutzername und Passwort für den Zugriff auf S3.

aws-keysaws-keysaws-keys

Einrichten des S3-Buckets für Dateien

Zuerst müssen wir einen Bucket erstellen, in dem alle unsere Dateien gespeichert werden. Weitere Informationen zu "Buckets" finden Sie unter "In einfachem Englisch beschriebene Amazon S3-Buckets".

Dazu melden wir uns zuerst mit der Access Key ID und dem Secret Access Key mit einer Anwendung wie Transmit (OS X) in unserem S3-Konto an. 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".

transmit-s3-logintransmit-s3-logintransmit-s3-login

Sobald wir angemeldet sind, erstellen wir einen Bucket, in den wir unsere Dateien einfügen können. Ich habe meinen "files.jremick.com" genannt. Buckets müssen eindeutige Namen haben, zwischen 3 und 63 Zeichen enthalten und Buchstaben, Zahlen und Bindestriche enthalten (dürfen jedoch nicht mit einem Bindestrich enden).

Mit eindeutig meinen sie eindeutig im AWS-Netzwerk. Es ist also eine gute Idee, so etwas wie eine URL oder ähnliches zu verwenden.

transmit-create-buckettransmit-create-buckettransmit-create-bucket

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 einrichten. Dazu richten wir auf unserem Webhost einen neuen CNAME-Eintrag ein.

Benutzerdefinierte S3-Subdomain einrichten

Um die Standard-URL zu verkürzen, erstellen wir einen CNAME-Eintrag wie unten beschrieben (dies ist auf Ihrem Webhost). Ich habe "Dateien" als meine Subdomain ausgewählt, aber Sie können verwenden, was Sie möchten.

s3-cnames3-cnames3-cname

Jetzt können wir unter "files.jremick.com" auf diese Bucket-Dateien zugreifen. Viel besser! Laden Sie dann einfach die gewünschten Dateien in den Bucket "files.jremick.com" hoch.

Sobald Ihre Dateien hochgeladen wurden, möchten Sie die ACL (Access Control List) festlegen, damit jeder die Dateien lesen kann (wenn Sie möchten, dass sie öffentlich sind). In Senden klicken Sie einfach mit der rechten Maustaste, wählen Sie Informationen abrufen, setzen Sie unter Berechtigungen "Read" auf "World" und klicken Sie auf "Auf eingeschlossene Elemente anwenden...". Dadurch erhalten alle Dateien in diesem Bucket Lesezugriff auf die Welt.

bucket-permissionsbucket-permissionsbucket-permissions

Standardmäßig erlauben Dateien, die in Ihr S3-Konto hochgeladen wurden, nur Lese- und Schreibzugriff auf den Eigentümer. Wenn Sie später neue Dateien hochladen, müssen Sie diese Schritte erneut ausführen oder nur für diese Dateien andere Berechtigungen anwenden.

Erstellen Sie eine CloudFiles-Verteilung

Nachdem wir 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 Latenz zu erzielen und 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 (unter dem Dropdown-Menü "Ihr Konto"). Klicken Sie dann auf die Schaltfläche "Distribution erstellen".

create-distributioncreate-distributioncreate-distribution

Wir wählen den Ursprungs-Bucket (den zuvor erstellten Bucket) aus, aktivieren die Protokollierung, wenn Sie möchten, geben einen CNAME und Kommentare an und aktivieren oder deaktivieren schließlich die Verteilung. Sie müssen keinen CNAME oder Kommentare eingeben, aber wir möchten später eine kürzere URL einrichten, wie wir es für S3 getan haben. Ich möchte "cdn.jremick.com" verwenden, also stelle ich das hier ein.

create-distribution-settingscreate-distribution-settingscreate-distribution-settings

Wie Sie sehen können, ist die Standard-URL ziemlich hässlich. Daran wollen Sie sich nicht erinnern. Lassen Sie uns nun einen CNAME für die hübsche, kurze URL einrichten.

distribution-settingsdistribution-settingsdistribution-settings

Richten Sie die benutzerdefinierte CloudFiles-Subdomain ein

Um die benutzerdefinierte CloudFiles-Subdomain einzurichten, gehen wir wie bei S3 vor.

cloudfront-cnamecloudfront-cnamecloudfront-cname

Jetzt können wir über CloudFront mit "cdn.jremick.com" auf Dateien zugreifen.

Wie funktioniert das alles?

Wenn jemand über Ihren S3-Bucket auf eine Datei zugreift, verhält sich diese wie ein normaler Datei-Host. Wenn jemand über CloudFiles auf eine Datei zugreift, fordert er die Datei von Ihrem S3-Bucket (dem Ursprung) an und speichert sie auf dem CDN-Server zwischen, der der ursprünglichen Anforderung am nächsten liegt, für alle nachfolgenden Anforderungen. Es ist etwas komplizierter, aber das ist die allgemeine Idee.

Stellen Sie sich ein CDN als ein intelligentes Netzwerk vor, das in der Lage ist, den schnellstmöglichen Weg für die Zustellung von Anforderungen zu ermitteln. Ein anderes Beispiel wäre, wenn der nächstgelegene Server mit Datenverkehr überfüllt ist, es möglicherweise schneller ist, die Datei von einem etwas weiter entfernten Server abzurufen, jedoch mit weniger Datenverkehr. Daher liefert CloudFront stattdessen die angeforderte Datei von diesem Speicherort.

Caching-Probleme

Sobald eine Datei auf den CloudFront-Netzwerkservern zwischengespeichert ist, wird sie erst nach Ablauf ersetzt und automatisch entfernt (standardmäßig nach 24 Stunden Inaktivität). Dies kann sehr schmerzhaft sein, wenn Sie versuchen, Updates sofort zu veröffentlichen. Um dies zu umgehen, müssen Sie Ihre Dateien versionieren. Beispielsweise könnte "my-stylesheet.css" "my-stylesheet-v1.0.css" sein. Wenn Sie dann ein Update vornehmen, das sofort veröffentlicht werden muss, ändern Sie den Namen in "my-stylesheet-v1.1.css" oder ähnliches.

Leistungstest

Unser Inhalt wird in unseren S3-Bucket hochgeladen, unsere CloudFront-Distribution wird bereitgestellt und unsere benutzerdefinierten Subdomains werden für den einfachen Zugriff eingerichtet. Es ist 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. Möglicherweise denken Sie, dass dies mehr Bilder sind, als die meisten Websites auf einer einzelnen Seite laden. Das mag wahr sein, aber es gibt viele Websites wie Portfolios, E-Commerce-Websites, Blogs usw., die genauso viele und möglicherweise mehr Bilder laden.

image-testingimage-testingimage-testing

Obwohl ich für dieses Beispiel nur Bilder verwende, ist die Dateigröße und die Menge für den Vergleich wichtig. Die heutigen Websites laden auf jeder Seite mehrere Javascript-, CSS-, HTML- und Bilddateien. 44 Dateianfragen sind wahrscheinlich weniger als die meisten Websites tatsächlich, sodass 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 10-15 Mal (etwa alle 2-3 Sekunden) für jeden Test umgeschaltet + aktualisiert, um einen angemessenen Durchschnitt aus Gesamtladezeit, Latenz und Dauer zu erhalten.

  • 45 Gesamtanzahl der Dateien (einschließlich HTML-Dokument)
  • 561,13 KB Gesamtgröße der kombinierten Datei

Normaler Webhost

Hier sind die Leistungsergebnisse beim Hosten über meinen regulären Webhost. Sortiert nach Latenz.

image-test-jremickimage-test-jremickimage-test-jremick
  • 1,82-1,95 Sekunden Gesamtladezeit
  • 90ms Schnellste Latenz (letzter Test)
  • 161ms Langsamste Latenz (letzter Test)
  • ~65% der Bilder hatten eine Latenz von weniger als 110ms

Sortiert nach Dauer.

image-test-jremick-durationimage-test-jremick-durationimage-test-jremick-duration
  • 92ms Schnellste Dauer (letzter Test)
  • 396ms Langsamste Dauer (letzter Test)

Amazon S3

Zum Testen von S3 wurden genau dieselben Dateien verwendet. Sortiert nach Latenz.

image-test-s3image-test-s3image-test-s3
  • 1.3-1.6 Sekunden Gesamtladezeit
  • 55ms Schnellste Latenz (letzter Test)
  • 135ms Langsamste Latenz (letzter Test)
  • ~90% der Bilder hatten eine Latenz von weniger als 100 ms

Sortiert nach Dauer.

image-test-s3-durationimage-test-s3-durationimage-test-s3-duration
  • 56ms Schnellste Dauer (letzter Test)
  • 279ms Langsamste Dauer (letzter Test)

S3 ist schneller als mein normaler Webhost, aber nur am Rande. Wenn Sie keine Lust hatten, mit einem CDN herumzuspielen, ist S3 immer noch eine großartige Option, um Ihrer Website einen anständigen Geschwindigkeitsschub zu verleihen. Ich empfehle dennoch die Verwendung eines CDN und wir werden in diesem nächsten Test sehen, warum.

Amazon CloudFiles

Zum Testen von CloudFront wurden genau dieselben Dateien verwendet.

image-test-cloudfrontimage-test-cloudfrontimage-test-cloudfront
  • 750-850ms Gesamtladezeit
  • 25ms Schnellste Latenz (letzter Test)
  • 112ms Langsamste Latenz (letzter Test)
  • ~85% der Bilder hatten eine Latenz von weniger als 55 ms.
  • Nur eine Datei hatte eine Latenz von mehr als 100ms.

Sortiert nach Dauer.

image-test-cloudfront-durationimage-test-cloudfront-durationimage-test-cloudfront-duration
  • 38ms Schnellste Dauer (letzter Test)
  • 183ms Langsamste Dauer (letzter Test)

Vergleich

Hier finden Sie eine kurze Aufschlüsselung des Leistungsvergleichs zwischen meinem regulären Webhost und denselben Dateien im CloudFront-Dienst von Amazon.

  • 1,82-1,95 Sekunden gegenüber 0,75-0,85 Sekunden Gesamtladezeit (~1,1 Sekunden schneller)
  • 90ms vs 25ms schnellste Latenz (65ms schneller)
  • 161ms vs 112ms langsamste Latenz (49ms schneller)
  • CloudFront: Nur eine Datei mit einer Latenz von mehr als 100 ms und 85% der Dateien mit einer Latenz von weniger als 55 ms
  • Normaler Webhost: Nur 65% der Dateien hatten eine Latenz von weniger als 110ms

Dauervergleich

  • 92ms vs 38ms Schnellste Dauer (54ms schneller)
  • 396ms vs 183ms Langsamste Dauer (213ms schneller)

50ms oder sogar 100ms klingen 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 sich zu Sekunden summiert.

Visueller Vergleich

Hier ist ein kurzes Video, um zu zeigen, wie spürbar die Zunahme der Ladezeit ist. Ich habe Caches deaktiviert und eine erzwungene Aktualisierung (Umschalt + Aktualisierung) durchgeführt, um sicherzustellen, dass Bilder nicht zwischengespeichert werden.

Andere Möglichkeiten zur Leistungssteigerung

Es gibt verschiedene andere Möglichkeiten, die Website-Leistung bei Verwendung eines CDN zu steigern.

  • Erstellen Sie verschiedene Subdomains für verschiedene Dateitypen, um parallele Downloads zu maximieren. Laden Sie beispielsweise Bilder von "images.jremick.com" und andere Dateien wie Skripte und CSS von "cdn.jremick.com". Dadurch können mehr Dateien parallel geladen werden, wodurch sich die Gesamtladezeit verringert.
  • Gzip-Dateien wie JavaScript und CSS
  • ETags konfigurieren

Weitere Informationen finden Sie unter Best Practices zur Beschleunigung Ihrer Website.

Bereitstellen von komprimierten Dateien aus CloudFiles

Eine der oben genannten Optionen, um die Leistung noch weiter zu steigern, war die Bereitstellung von komprimierten Dateien. Leider kann CloudFront nicht automatisch feststellen, ob ein Besucher komprimierte Dateien akzeptieren kann oder nicht, und die richtige bereitstellen. Glücklicherweise unterstützen heutzutage alle modernen Browser komprimierte Dateien.

Erstellen und laden Sie Ihre komprimierten Dateien hoch

Um komprimierte Dateien von CloudFront bereitzustellen, können wir unserer Website eine Logik geben, um die richtigen Dateien bereitzustellen, oder wir können die Inhaltscodierung und den Inhaltstyp für einige bestimmte Dateien festlegen, um die Dinge ein wenig einfacher zu gestalten. Gzipen Sie die gewünschten Dateien und benennen Sie sie um, damit sie nicht beendet werden .gz. Beispielsweise würde "filename.css.gz" zu "filename.css" werden. Um sich daran zu erinnern, dass es sich um eine komprimierte Datei handelt, nennen Sie sie "filename.gz.css". Laden Sie nun die komprimierte Datei an den gewünschten Speicherort in Ihrem S3-Bucket hoch (vergessen Sie nicht, die ACL / Berechtigungen festzulegen).

Wenn Sie nicht sicher sind, wie Sie eine Datei gzipen sollen, lesen Sie http://www.gzip.org (OS X kann dies im Terminal tun).

Stellen Sie die Inhaltskodierung und den Inhaltstyp ein

Wir müssen die Inhaltskodierung und den Inhaltstyp (falls nicht bereits festgelegt) für unsere Dateien festlegen, damit der Inhalt auf Anfrage über den Browser komprimiert wird und ordnungsgemäß dekomprimiert werden kann. Sonst sieht es so aus.

no-content-encodingno-content-encodingno-content-encoding

Wir können dies einfach mit Bucket Explorer tun. Geben Sie nach dem Herunterladen Ihren AWS-Zugriffsschlüssel und Ihren geheimen Schlüssel ein, um sich bei Ihrem S3-Konto anzumelden. Suchen Sie die zuvor hochgeladene komprimierte Datei, klicken Sie mit der rechten Maustaste und wählen Sie "MetaData aktualisieren".

gzip-update-metadatagzip-update-metadatagzip-update-metadata

Wie Sie sehen können, ist der Inhaltstyp bereits auf text/css festgelegt, sodass wir dies nicht festlegen müssen (Javascript wäre Text/Javascript). Wir müssen nur die richtige Inhaltskodierung hinzufügen. Klicken Sie auf "Hinzufügen" und geben Sie im Popup-Dialog "Inhaltscodierung" in das Feld "Schlüssel" und "gzip" in das Feld "Wert" ein. Klicken Sie auf OK und dann auf Speichern und fertig! Jetzt zeigt der Browser die Datei korrekt an.

gzip-save-metadatagzip-save-metadatagzip-save-metadata

Durch das Komprimieren einer Datei kann die Dateigröße erheblich reduziert werden. Zum Beispiel war dieses Test-Stylesheet ungefähr 22KB groß und wurde auf ungefähr 5KB reduziert. Für mein Blog habe ich alle meine jQuery-Plugins mit jQuery-UI-Registerkarten kombiniert. Nach der Minimierung wurde es auf 26,49KB reduziert, nach dem Zippen wurde es auf 8,17KB reduziert.

Abschluss

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 sogar 1 Sekunde vom Verlassen Ihrer Website entfernt sind, kann ein CDN dies verhindern. Außerdem sind die meisten von uns sowieso Geschwindigkeitsfreaks. Warum also nicht die Leistung Ihrer Website steigern, wenn Sie können? Vor allem, wenn Sie dadurch Geld sparen könnten.

Wenn Sie Fragen haben, lassen Sie es mich bitte in den Kommentaren wissen und ich werde versuchen, darauf zu antworten. Vielen Dank!

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.