Google CDN – Turbo für Deine Webseite – Teil 1

Die Bereitschaft, sich dann durch weitere Seiten des Projekts zu klicken, sinkt. Content Delivery Networks sind eine sehr gute Möglichkeit Wartezeiten für Deine Besucher zu minimieren. In diesem Artikel kannst Du lernen wie Du Googles hauseigenes CDN (Content Delivery Network) als Turbo für Deine Webseite benutzen kannst.

CD…was?

Stell Dir vor, Du gehst am Morgen Semmeln holen. In Deiner Stadt gibt es fünf Back-Shops einer Kette. Alle Brötchen schmecken also gleich gut. Zu welchem gehst Du? Wenn Du nicht zufällig ein Fan von langen Morgen-Spaziergängen bist, wirst Du wahrscheinlich den nehmen, der Dir am nähesten ist. Genau das ist das Prinzip von Content Delivery Networks. Ein Server hat die originalen und aktuellen Inhalte. Andere Server, die auf der ganzen Welt verteilt sind, beziehen von diesem Server ihre Daten. Sie spiegeln diese und fragen in regelmäßigen Abständen nach, ob es neue oder aktualisierte Dateien gibt. Der Webseiten-Besucher bezieht automatisch die Daten des Servers, der sich am nähesten von seinem Standort befindet.

Abbildung 1: Funktionsweise Content Delivery Network

Ein weiteres Geschwindigkeits-Plus wird durch die Hochleistungs-Server der CDN-Anbieter erzeugt.

In diesem Artikel geht es im besonderen um die Möglichkeit der Nutzung der Google-Server-Strukturen. Standard-Webhoster haben nicht die entsprechenden Hardware-Ressourcen, um eine vergleichbare Geschwindigkeit, wie die Google-Server, zur Verfügung zu stellen.

Welche Daten sollten im CDN verfügbar gemacht werden?

In Content Delivery Networks können statische Dateien verfügbar gemacht werden. Beispielsweise CSS- und JavaScript-Dateien oder auch Bilder. Sobald diese im Server-Netzwerk hochgeladen sind, können sie in HTML-Dateien von dort bezogen werden.

Abbildung 2: Beispiel Einbindung in den Quelltext

Nicht alle Bild-Dateien sollten im CDN verfügbar gemacht werden. Empfehlenswert sind beispielsweise große Hintergrundbilder oder jegliche Bilder, die mit dem Design zusammenhängen. Lass Bilder, die zu Inhalten Deiner Webseiten gehören, auf Deinem eigenen Server. Du willst ja schließlich in den Bilder-Suchergebnissen oben erscheinen.

Was kostet die Nutzung des Google Content Delivery Network

Die Nutzung dieses Google-Services ist für bis zu fünf Millionen Aufrufe im Monat kostenlos. Anfragen darüber hinaus werden entweder per Stunden oder per Gigabyte abgerechnet. Die Kosten dafür befinden sich allerdings lediglich im Cent-Bereich. Weitere Informationen dazu können in der Preistabelle eingesehen werden.

Google CDN – Anmeldung und Einrichtung Schritt-für-Schritt

Bereit? Denn jetzt geht es ans Eingemachte! Die Anmeldung erfolgt über die Google App Engine. Dort musst Du Dich mit Deinem Google-Account anmelden. Klicke dort auf den Button “Create Application”.

Abbildung 3: Startseite Google App Engine

Im nächsten Schritt musst Du Deine Application anlegen. Wähle zunächst eine Namen. Dieser Name wird gleichzeitig als Subdomain von AppSpot.com (deinname.appspot.com) erreichbar sein. Die Auswahl des Namens kann eine Weile in Anspruch nehmen, denn hier ist Kreativität gefragt. Jeden Namen darf es lediglich einmal geben und Du wirst schnell merken, hier waren schon eine vor Dir da :) Im nächsten Feld musst Du einen Titel für Deine App vergeben. Diesen Titel wird in unserem Fall niemand zu Gesicht bekommen, da Du die Application lediglich als Speicherplatz für die statischen Dateien Deiner Webseiten verwenden wirst. Bestätige nun noch, dass Du mit dem Nutzungsbedingungen einverstanden bist, in dem Du den Haken entsprechend setzt. Nun kannst Du wieder auf den Button “Create Application” klicken.

Abbildung 4: Installation einer Google App

Das war der erste Streich und der zweite folgt zugleich. Deine Application wurde nun erfolgreich angelegt. Du hast jetzt bereits die Möglichkeit das Dashboard einzusehen und neue Administratoren für Deinen Speicherplatz zu registrieren.

Abbildung 5: Erfolgreiches registrieren einer Google App

Nun ist es zunächst allerdings wichtig, dass Du auch Dateien hochladen kannst. Dies geht lediglich mit dem GoogleAppEngineLaunchen, der selbstverständlich kostenlos von Google bereitgestellt wird. Gehe dazu auf die Downloadseite und lade Dir die entsprechende Software für Dein Betriebssystem herunter. Öffne das Programme und installiere es auf Deinem Rechner. Klicke dann auf “File -> New Appliction”. Trage im Feld Application ID den davor festgelegten eindeutigen Namen Deiner App ein. Unter Application Directory kannst festlegen, in welchem Ordner auf Deinem Computer die Dateien liegen, die dann hochgeladen werden sollen. Klicke danach auf den Button “Create”.

Abbildung 6: Einrichtung einer neuen App im GoogleAppEngineLauncher

Automatisch werden nun im von Dir festgelegten Ordner drei Systemdateien erstellt und ein Favicon hinterlegt.

Abbildung 7: Systemdateien GoogleAppEngineLauncher

Jeden neuen Ordner, den Du zur Synchronisation freigeben möchtest, musst Du nun einmalig in der Datei “app.yaml” registrieren und hinterlegen.

Öffne die Datei dazu in einem Texteditor. In unserem Beispiel haben wir nun drei Ordner registriert:

• font

• js

• styles

Wie Du gut sehen kannst, sind zum Registrieren eines neuen Ordners lediglich zwei Zeilen Code nötig, die sich von selbst erklären.

Abbildung 8: Registrierung neuer Ordner in der app.yaml.

Nun bist Du bereit zum ersten Synchronisieren Deiner Dateien. Füge Deine Dateien einfach in die entsprechenden Ordner und klicke dann im GoogleAppEngineLauncher auf “Deploy”. Nun öffnet sich die Konsolen-Ansicht Deines Computers und Du kannst mitverfolgen, wie die Dateien auf den Server hochgeladen werden.

Abbildung 9: Konsolen-Ansicht des GoogleAppEngineLauncher

Congrats, it’s done!

Ändere nun im Quelltext Deiner Webseite, wie in Abbildung 1 bereits dargestellt, die Referenzierung der Dateien, die Du nun auf den superschnellen Google-Server ausgelagert hast.

Bonustipp: das Chiptuning für Deine Webseite

In modernen Webseiten werden immer häufiger so genannte JavaScript-Libraries verwendet. jQuery beispielsweise dürfte der ein oder andere schon einmal gehört haben. Google stellt diese Web-Standards auf ihrem Server zu freien Verwendung bereit. Alle unterstützen Dateien findest Du bei Google Hosted Libraries. Stelle fest, welche von diesen Dateien in Deiner Webseite verwendet werden und ändere die Referenz auf den entsprechenden Speicherplatz bei Google. Der Vorteil hier ist, dass sehr viele Webseiten diese Dateien verwenden. Hat also ein Besucher bereits eine Webseite besucht, die die jQuery-Datei ebenfalls vom Google-Server beziehen, befindet sich die Datei bereits im Browser-Cache des Users. Somit wird Deine Webseite noch schneller geladen.

Glückliche Besucher machen glückliche Webmaster

Wenn Deine Besucher glücklich sind, wirst auch Du als Webseiten-Betreiber glücklich sein. Die Ladezeit spielt hierbei eine wichtige Rolle. Denn schnelle Webseiten zeigen nicht nur Google, dass sie es mit einem Profi zu tun haben, sondern eben auch den Besuchern. Somit spielt Webseiten-Perfomance auch in die Vertrauensgewinnung mit ein und erhöht die Verweildauer und verbessert gegebenenfalls Conversion-Rates. In den nächsten Woche kannst Du, in einem Artikel für Fortgeschrittene, noch weiter in die Materie Content Delivery Networks einsteigen. Noch mehr Speed für Deine Webseite ist die Devise ;-)