Content Distribution Network: Dank Google für jederman

Aug 27th, 2010 @ 02:30 pm › Mainboarder
↓ Zu den Kommentaren

Content Distribution Network (CDN) bezeichnet das Auslagern von Dateien auf andere Server. Es ergibt sich daraus ein Vorteil: die Seite wird performanter und schneller geladen. Der Browser erhält von dem einen Server den Websitencode und CSS, von einem anderen Server Bilder und JavaScripts.

Das ist insofern vorteilhaft, da der erste Server den Code erstellt und an den Browser ausliefert. Dieser fragt nun diesen nach dem CSS-Dateien und den zweiten Server nach Bildern und JavaScripts. Diese benötigen (wie auch CSS) keine Cookies und können lange gecached werden, was hingegen bei dem Quelltext der Website nur mäßig anwendbar ist.

Vorbereitungen und -optimierungen

Es ist darauf zu achten, dass die Anordnung von Styles (CSS) und Skripts (Javaskript) nicht beliebig sein sollte. Es sollten erst alle Skipts oder CSS-Dateien geladen werden, da CSS parallel gedownloadet werden kann und sich somit die Geschwindigkeit wieder erhöht.

Zudem sollten soweit möglich CSS und Javaskripte in wenigen Dateien verteilt werden. Es ist also ratsamer eine style.css zu haben als main.css, nav.css, footer.css.

Auch Leerzeichen und Umbrüche sind unnötiger Ballast, da die Dateien aber dann unformatiert sind, ist es schwer sich darin zurecht zu finden. Dafür gibt es minify. Es ist ein Skript, was auf den eigenen Server geladen wird und eine URL erzeugt, die die Dateien automatisch kürzt. So wird aus diesem langen Skript ein kürzeres und kleineres, welches 18% der Dateigröße einspart.

Los geht´s

Die Google App Engine eignet sich hervorragend zum Verteilen der Daten, denn Googleserver sind schnell, haben kurze Zugriffszeiten und der Dienst ist kostenlos. Das Einrichten kann am Anfang etwas knifflig sein, aber das Tutorial von eBiene hilft enorm.

Wenn man nun noch persönliche Fehlerseiten und eine Startseite erstellen möchte, so kann man das mit folgendem Code in der app.yaml machen:

Code block

.
.
.
- url: /.*
 static_files: index.html
 upload: index.html

Die drei Punkte am Anfang bedeuten, dass die Zeilen nur ergänzt werden und die Einträge darüber erhalten bleiben.

Nun legt man in das Wurzelverzeichnis des Projektes einfach die Datei index.html lädt die Datei mit der App Engine hoch und voilà, nun müsste beim Aufrufen des Projektes via Browser die Seite erscheinen. Auch die Serverlast und Traffic gehen nun zurück und man kann im besten Falle noch Geld sparen.