WordPress CDN – Oder: Was ist dieses verdammte Thesis Framework?

Gerade eben habe ich den Artikel von Pat Flynn gelesen, der da heißt Why I siwtched to the thesis framwork…. Und Pat ist natürlich wieder ganz euphorisch, auf dieses neue Produkt, welches sich Thesis Framework nennt. Wie man seine Website schneller macht und man z.B. WordPress als CDN nutzt, das lest ihr in folgendem Beitrag.

Einleitung: Geld verdienen im Internet: Ein neuer Hype mit Theme-Plugins?

Ich frage mich, ob es einfach nur wieder “Geschäftemacherei” unter den Internet-Marketern ist oder ob es wirklich so gut funktioniert, wie viele schreiben. Vor ein paar Tagen habe ich etwas ähnliches bei Geldschritte.de gelesen. Dort hat Gordon etwas über das Headway geschrieben, was mir ziemlich ähnlich dem Thesis-Framework erscheint.

Ich habe bis heute nicht wirklich festgestellt, um was es bei diesen “Plugins” oder “Themes” oder wie immer man sie nennen mag, genau handelt. Ein guter Grund dem mal auf den Grund zu gehen.

In erster Linie findet man auf der Website von DYIThemes, dass das Thesis Framework es eigentlich “nur” erlaubt, sein bestehendes Design maßgeblich zu verändern. Ich glaube, ich muss nicht erwähnen, dass es natürlich wichtig ist, dass man ein schönes Design auf seinem Blog verwendet, das möglichst nicht frei erhältlich ist. Man versucht ja immer seinen eigenen Charakter durchschimmern zu lassen. Trotzdem finde ich es ein bisschen Zweifelhaft, ob man sich dann selbst wieder als Designer ausgeben soll? Ein mehr als 20 Minütiges Video auf der Website von DYI zeigt, wie man das macht. Dabei greift der Tutor teilweise auch massiv in CSS ein… Hmm… Wie soll jemand, der keinen blassen schimmer von HTML oder CSS hat, da durchsteigen und dann Geld für so etwas ausgeben? Da scheint mir das Headway in der Version 3, die bald kommen soll, etwas besser gelöst. Trotzdem wahrscheinlich sehr zeitaufwändig.

Sinn und Zweck von uns Lifestyle-Designern, die ihr Geld online verdienen, ist es doch, dass wir uns Zeit sparen. Klappt das über solche Themes überhaupt?

1. Schnelligkeit der Website verbessern (= SEO?)

Was ich viel interessanter finde, und das ist eigentlich das, was nirgends auf der Website steht sondern was ich über den Beitrag von Pat Flynn erfahren habe: Das Thesis-Framework hat einige Funktionen, die die Website schneller machen. Pat Flynn beschreibt (natürlich wieder ganz euphorisch) wie er nun von Platz 2 auf Platz 1 bei der Suchmaschinenanfrage “passive income” gekommen ist. Er gibt dem Thesis-Framework die “Schuld” dafür. Dabei hat er jetzt den Wikipedia-Eintrag überholt.

Wie man aus seinen Screenshots lesen kann, macht das Thesis-Framwork folgendes hinter den Kulissen:

• Es generiert sauberen XHTML-Code. Somit spuckt der W3C-Validator tatsächlich 0 Fehler aus
• Es werden viele Objekte zu einem einzigen zusammengefasst (nennt sich CSS-Sprites)
• Es werden mehrere CSS-Dateien zu einer zusammengefasst
• Bilder werden verkleinert
• Javascripte werden zusammengefasst

Ganz klar: Pat Flynn konnte so seine Ladezeit von 7 Sekunden auf 3 drücken, was schon ziemlich gut ist. Das soll auch Schuld sein an der Aufwertung gegenüber Wikipedia. Wobei man auch bedenken muss, dass Wikipedia ja fast keine Bilder oder Scripte lädt. Dort befindet sich ja eigentlich nur Text und Wiki hat zudem ein hohes Ansehen bei Google.

2. Hangout-Lifestyle Ladezeit: 3 Sekunden

Ich glaube, dass man den selben Effekt erreichen kann ohne ein spezielles Framework einzukaufen. Ich habe vor nicht allzulanger Zeit meine Website-Ladezeit von 14 auf jetzt 2,7 Sekunden verkürzen können (so zumindest laut Pingdom-Test). Und das obwohl doppelt so viele Objekte ausgeliefert werden wie bei Pat’s Website und meine Javascripte nicht zusammen gefasst werden (können).

Pingdom-Test

Man muss natürlich auch sehen, dass Pat eine ganz andere Auslastung hat als mein kleiner Server auf der anderen Seite der Welt Von daher liegt er schon ziemlich gut mir 3 Sekunden. Wobei mich die Reaktionszeit seiner Website immer noch etwas stört.

3. Alternativen um WordPress schneller zu machen

Für WordPress gibt es jede Menge alternative Plugins, die alle kostenlos erhältlich sind. Folgende Schritte hatte ich selbst durchgeführt und mache ich eigentlich immer bei Einreichung eines Blogs:

• Kauf eines geeigneten Themes. Ich kaufe seit Monaten nur noch bei Elegantthemes ein. Für 39 USD kann man absolut nichts verkehrt machen und man erhält ausnahmslos Zugriff auf ALLE Themes. Support und Updates gibts dann jeweils für ein Jahr. BuyMyDay, social2business, die 4hwwsuccess.com und die Website meiner Freundin (meinhamster.com) laufen über Elegant-Themes.
  Vorteile:
  - Sehr guter Quellcode.
  - Shortcodes sind anwendbar (damit kann man individuelle Elemente designen).
  - Eingebauter Image-Resizer. Das heißt: alle Bilder werden immer passend genau zugeschnitten. Man braucht sich keine Gedanken über Bildgrößen machen.
• Download von WP-Super-Cache
  Daran kommt man wohl nie vorbei. Das gute daran ist, dass dieses Plugin auch gleich CDNs unterstützt. Mehr dazu später. WP-Super-Cache legt diverse Seiten, die oft aufgerufen werden, in den Cache. Somit werden diese schneller aufgerufen, verbraucht aber auch nicht all zu viel Speicher.
• Download Yoast WordPress SEO
  Eigentlich DAS Seo-Plugin, welches jeder auf seiner WordPress-Seite laufen haben muss. Ich glaube, da kann ich gar nichts mehr dazu sagen. Kostenlos und absolut geniales Ding. Es sorgt sich auch gleich sofort um die Erstellung der XML-Sitemaps, der Permalinks, den RSS-Feed, den Titeln und so weiter.
• Download Javascript to Footer
  Man glaubt gar nicht, wie viel Javascript man eigentlich schon in der eigenen Website verwendet. Diverse Plugins setzen voll darauf. Deswegen wollte man sicher gehen, dass die Javascript-Dateien erst am Ende der Website geladen werden. Das gibt einen unglaublichen Performance-Schwung, funktioniert aber nicht bei allen Themes. Beim Hangout-Lifestyle-Blog musste ich dieses Plugin deaktivieren, weil das obere Menü Javascript-basiert ist und sonst nicht mehr funktioniert.
• Browser-Caching und Komprimierung aktivieren
  Wenn man das Google-Tool “Speedtest” befragt, bekommt man sehr gute Hilfestellung für die eigene Website. Ich habe sehr lange das Browser-Caching vernachlässigt, wodurch die Website ständig aktuell vom Server geladen wurde. Man kann die Serverlast deutlich reduzieren, wenn man dem Server mitteilt, er soll bestimmte Dateien, die sich wenig bis nie ändern (z.B. CSS-Dateien oder Bilder) in den Browser-Cache des Users speichern. Dadurch hat der Server mehr Zeit weitere Websites auszuliefern. Zusätzlich sollte der Server alle Daten komprimiert verschicken. Das benötigt zwar beim User etwas länger Zeit zum “Entpacken”, aber das merkt man in der Regel nicht mehr in unserem schnellen Computerzeitalter

WordPress mit CDN ausstatten

CDN bedeutet, dass man einzelne Dateien seiner Website (z.B. Bilder, CSS-Dateien, Javascript-Dateien, Icons, und so weiter) auf eine andere Domain legt. Das kann natürlich auch die eigene Subdomain sein. Bei mir sind das:

• cdn1.hangout-lifestyle.de
• cdn2.hangout-lifestyle.de
• cdn3.hangout-lifestyle.de

Das hat den Vorteil, dass der Webbrowser mehrere Verbindungen herstellen kann und darf. Im Normalfall ist es ja so, dass zuerst das HTML geladen wird und dann alle Bilder und Dateien. Das dauert allerdings relativ lange, weil die meisten Browser nur maximal 10 Verbindungen zulassen und damit nur 10 Dateien von einer Domain gleichzeitig laden können. Nutzt man CDN, kann man das komplett umgehen, weil die Anfrage über mehrere Domains verteilt wird. So wird zuerst die HTML-Datei von der eigentlichen Domain abgerufen und dann die Bilder unterschiedlich und zufällig jeweils von einer anderen Domain. Schaut euch einfach mal den Quellcode meiner Website an:

Hangout-Lifestyle Quellcode Schnippsel

Ihr seht, dass sogar das Favicon von einer anderen Domain ausgeliefert wird. Damit habe ich es geschafft, die Ladezeit von 14 auf 7 Sekunden zu drücken. Weitere Optimierungen halfen dann, damit ich auf 3 Sekunden kam.

Im WordPress-Plugin WP-Super-Cache könnt ihr die Einstellungen für euren eigenen CDN selbst eintragen. Ihr könnt euch ganz einfach Subdomains bei eurem Provider einrichten, die auf das Unterverzeichnis wp-content zeigt. Fertig.

CDN in WordPress einstellen mit WP-Super-Cache

Für alle, die Lighttpd als Webserver nutzen (und nicht Apache), die können folgenden Quellcode nutzen:

$HTTP["host"] =~ "^cdn(.*)\.hangout\-lifestyle\.de$" {
  $HTTP["url"] =~ "\.(jpg|gif|png|css|js|jpeg|mp3|pdf|ico)$" {
    server.document-root        = "/path/to/website/"
  }
}

Die Domain müsst ihr natürlich selbst an eure Einstellungen anpassen.