Turbo für Deine Webseite – Teil 2: AWS CloudFront

Schnelle Webseiten sorgen für mehr Umsatz. Ian Lurie hat in einer aktuellen Studie sechzehn E-Commerce Webseiten untersucht und erneut bewiesen, dass minimale Ladezeiten für eindeutig mehr Umsatz sorgen.

In der Abbildung 1 kann man erkennen, dass Webseiten mit einer Ladezeit von weniger als 1 Sekunde über 100% mehr Page Value, also Seitenwert, haben als langsamere Seiten.

Abbildung 1: Verhältnis von Ladezeit zu Seitenwert - Quelle

Schnelle Ladezeiten scheinen eine Kleinigkeit bei der Optimierungsarbeit zu sein, denn es geht ja nur um Sekunden oder Millisekunden.

Unterbewusst nimmt es allerdings jeder User war und entscheidet daraufhin, ob er weitere Seiten aufruft und sich durch Deine Seite klickt oder gar ob er kauft oder nicht. Im ersten Teil dieser Blogreihe wurde das hauseigene CDN von Google unter die Lupe genommen und gezeigt, wie man es für die eigene Webseite einsetzen kann. Amazon, der auch als bekannter Anbieter der Cloud-Lösungen agiert, bietet mit “CloudFront” ebenfalls einen solchen Service an, der zwar nicht kostenlos zur Verfügung steht, aber viele andere Vorteile mit sich bringt.

Die Einrichtung von AWS CloudFront und die Verknüpfung mit Deiner Webseite ist sehr einfach. Einmal eingerichtet, bezieht sich CloudFront die notwendigen Dateien von selbst und aktualisiert diese dann gemäß den Cache-Einstellungen Deiner Webseite automatisch.

Amazon CloudFront vs. Google CDN

Googles Lösung, zur Auslagerung der statischen Dateien, ist zwar kostenlos und bietet enorme Server-Leistungen, stellt allerdings die verfügbaren Server lediglich in den USA bereit. Amazon CloudFront besteht hingegen aus einem weltweiten Netzwerk an leistungsstarken Servern. Somit wird der eigentliche Gedanke eines CDN, die Dateien dem Endbenutzer auf dem kürzesten Weg zur Verfügung zu stellen, hier noch besser umgesetzt. Die Abrechnung bei CloudFront erfolgt anhand der übertragenen Datenmenge.

Mit dem zur Verfügung gestellten Preis-Rechner, kannst Du einfach berechnen, wie viel Dich der Service im Monat voraussichtlich kosten kann. Laut der aktuellen Preisliste (Stand: 30.01.2019) kosten 1 GB übertragene Daten in Europa derzeit 0,085 USD.

Amazon Web Services (AWS) Konto erstellen

Um CloudFront nutzen zu können, benötigst Du ein Amazon Web Services Konto, das kostenlos erstellt werden kann. Bereits bei der Registrierung muss eine Kreditkarte hinterlegt werden, die allerdings erst dann belastet wird, wenn Du auch wirklich Leistung in Anspruch genommen hast. Damit die Anmeldung abgeschlossen werden kann, wird eine telefonische Identitätsbestätigung durchgeführt. Dabei erhältst Du einen automatisierten Anruf von Amazon, bei dem Dir eine PIN mitgeteilt wird.

Diese trägst Du dann in das dafür vorgesehen Formularfeld ein. Solltest Du Probleme mit der telefonischen Identitätsbestätigung haben, empfiehlt es sich im Support-Bereich ein neues Ticket zu eröffnen. Beschreibe dort die Problematik und klicke auf den Button “Call me”. Du erhältst dann umgehend einen Anruf des Support-Teams, welcher dann Deine ebenfalls Deine Identität bestätigen kann. Nach der Aktivierung Deines Accounts, wird der Dienst freigeschalten und die Funktionen stehen Dir im vollen Umfang zur Verfügung. Nach Anmeldung wird Dir im Dashboard eine Übersicht sämtlicher AWS-Dienste angezeigt. Mit einem Klick auf CloudFront, startest Du diesen Service.

CloudFront Distribution anlegen

Im CloudFront-Startfenster werden Dir sämtliche Distributionen angezeigt, die bisher angelegt wurden. Eine Distribution ist für das Verteilen der statischen Dateien Deiner Webseite im weltweiten Server-Netzwerk verantwortlich, so dass Deine Besucher diese Dateien, auf dem kürzesten Weg zur Verfügung gestellt bekommen. Es empfiehlt sich für jede Webseite eine eigene Distribution anzulegen. Wird der Service zum ersten Mal genutzt, ist die Distributionsübersicht leer. Klicke auf “Create Distribution” um einen neuen Verteiler anzulegen. In Schritt 1 wird die “Delivery Method” ausgewählt. Für die Verwendung innerhalb von Webseiten muss hier die Methode “Web” ausgewählt werden. Die “RTMP”-Methode (Real Time Messaging Protocol) ist für das Streamen von Videos oder Musik zu nutzen.

Abbildung 2: Neue Distribution anlegen in CloudFront

Im nächsten Schritt werden die Einstellungen der Distribution vorgenommen. In das Feld “Origin Domain Name” wird die Hauptdomain der Webseite ohne “http://” eingetragen. Die “Origin ID” dient lediglich als interne Bezeichnung der Distribution und kann frei gewählt werden. Alle anderen Einstellungen, die in Abbildung 3 zu sehen sind, können “Default” bleiben und müssen nicht geändert werden.

Abbildung 3: Einstellungen einer neuen CloudFront Distribution

Damit die Dateien, die später per CloudFront zur Verfügung gestellt werden, keine langen und nichts-aussagenden URLs haben, können die Einstellungen unter “Alternate Domain Names” angepasst werden. Hier empfiehlt es sich eine Subdomain Deiner Hauptdomain einzutragen. Beispielsweise:

cdn.deinedomain.de

Diese Subdomain wird in einem späteren Schritt auf die CloudFront-URL umgeleitet. Für kleine Webseiten reicht es, wenn eine Subdomain genutzt wird, da die Anzahl der statischen Dateien in der Regel begrenzt ist. Im nächsten Teil der Blogreihe werden wir erklären und näher darauf eingehen, warum es sich für größere Webseiten lohnen kann, weitere alternative Domain-Namen anzugeben. Alle anderen Punkte können in den Standardeinstellungen übernommen werden. Die Distribution kann nun angelegt werden.

Abbildung 4: Anlegen von Alternate Domain Names

Im CloudFront-Dashboard wird die Distribution nun angezeigt. Bis diese aktiv ist, kann es einige Minuten dauern. Mit einem Klick gelangst Du dann auf die Detailansicht und kannst unter “General” > “Domain Name” die URL Deiner CloudFront-Distribution einsehen. Der “Distribution Status” zeigt Dir an, ob sie bereits aktiv ist oder noch nicht.

Abbildung 5: Abfragen des CloudFront-Domain-Name

Subdomain auf CloudFront umleiten

Die Subdomain, die im Feld “Alternate Domain Names” (siehe Abbildung 3) eingetragen wurde, muss nun auf die CloudFront URL (Abbildung 5 > “Domain Name”) umgeleitet werden. Dafür muss der CNAME-Eintrag der Subdomain auf diese geändert werden. Bei Deinem Webhoster solltest Du eine Anleitung finden, die diesen Vorgang beschreibt. Ansonsten hilft Dir sicherlich der Support Deines Anbieters gern weiter.

Referenzen im HTML anpassen

Ändere nun im HTML die Referenzen der Dateien, die Du über das CDN bereitgestellt haben möchtest. CloudFront bezieht sich beim ersten Aufruf der Seite dann genau die Dateien, die wirklich benötigt werden - Nicht mehr und nicht weniger. Diese Dateien werden dann auf den Amazon-Servern gecached und Deinen Besuchern bereitgestellt. Gemäß Deiner Chaching-Einstellungen werden die Dateien dann regelmäßig geupdatet und aktualisiert.

Abbildung 6: Referenzierungen im HTML ändern

Aufgrund der hohen Leistung der Amazon-Server und der Menge an Server-Standorten in ganz Europa, werden sich die Ladezeiten für Deine Webseiten-Besucher spürbar verringern. Jegliche statischen Dateien wie Bilder, CSS- und JavaScript-Dateien können nun hierhin ausgelagert werden.

Mit wenig Aufwand viel mehr Speed

Das Einrichten von Amazons CDN-Lösung ist relativ einfach, bringt jedoch große Wirkung mit sich. Während Googles CDN die Dateien Deiner Webseite lediglich auf Servern in den USA verteilt, kannst Du mit CloudFront auf das weltweite Server-Netzwerk von Amazon zurückgreifen. AWS bietet zudem den Vorteil, dass die Dateien nicht seperat auf einen anderen Server geladen werden müssen. CloudFront holt sich automatisch die Dateien, die wirklich benötigt werden, auf Amazons Server-Infrastruktur. Gemäß der Caching-Einstellungen werden die Dateien dann regelmäßig aktualisiert. Im nächsten Teil dieser Blogreihe wirst Du lernen, wie Du mit einigen Tricks das Maximum an Ladegeschwindigkeit für Deine Webseite erreichen kannst.