Der Taubenvergraemer – das Konzept und die Gestaltung

Geschrieben von kingalca am 25. Juli 2013
Dieser Post ist über ein Jahr alt. Eventuell haben sich die Details mittlerweile geändert, oder Links sind nicht mehr verfügbar.

Der Taubenvergraemer – das Konzept und die Gestaltung

Aktuell arbeite ich an einem neuen Design für den werten Herrn Jan-Uwe Fitz (former known as @vergraemer – kauft sein Buch!). Ich war auf 3 seiner Lesungen und bekam bei der zweiten sein Buch geschenkt. Als Dankeschön bot ich Ihm auf der Dritten an, seinen Blog zu managen, falls er denn einen hätte. Wir sprachen kurz und nach 2 Tagen hatte ich die Zugangsdaten zum Backend.

Was ich sah war der reinste Horror. Veraltete Schnittstellen und Plugins, fast 800 Spamkommentare in der Datenbank, unnötige Revisions gespeichert, nicht optimiert, nicht responsive und eigentlich sah alles ziemlich ziemlich schräg aus. Ein Seitencheck auf Pingdom ergab, dass die Seite im Durchschnitt knapp 11 Sekunden zum Laden brauchte, was wirklich sehr sehr langsam ist.

Für Blogbetreibende ist das Thema „Geschwindigkeit“ immer wichtig. Google nutzt es als signifikanten Indikator für den Pagerank und die generelle Erreichbarkeit via Suchmaschineneinträge. Bei SEO zählt aber nicht ein Gesichtspunkt mehr und ein anderer weniger (ok, doch, eigentlich schon… aber dennoch:), sondern es werden alle Sachen in einen Topf geworfen – das Endergebnis zählt.

Um die Performance zu steigern installierte ich ein Profiler Tool (P3 Plugin Profiler) mit dem ich untersuchte, welche Plugins am meisten Ihren Teil zur Ladezeit beitragen. Als Ich das Ergebnis hatte überprüfte Ich, ob das Plugin zwangsläufig notwendig ist und ob es dafür lightere Alternativen gibt.

Allein durch diese Methode konnte ich 2 Sekunden einsparen, obwohl ich noch nichts am Template oder der Datenbank verändert hatte.

Der nächste Schritt war das Deaktivieren von Modulen, die zwar „Nice to have“ sind, aber absolut nichts zum operativen Blogbetrieb beiträgt. Hierdurch konnte fast noch mal eine Sekunde eingespart werden. Viele Plugins bieten außerdem ähnliche oder bessere Funktionen, die man gern hätte. Davon sollte man grundsätzlich auch gebrauch machen.

Die Datenbank

Am wichtigsten für die Ladegeschwindigkeit ist, wie vermüllt die Datenbank ist. In WordPress werden beim Erstellen von Artikeln Revisions angelegt, quasi Zwischenentwürfe – sollte man ausversehen den Beitrags-Tab oder den Browser schliessen ohne zu speichern, so findet sich eine frühere Version in der Datenbank, also eine Auto-Sicherung. Solche Sicherungen sind aber grundsätzlich nutzlos, wenn der Artikel fertig geschrieben wurde und man auch nicht verschiedene Versionen des Textes angelegt hat. Zusätzlich dazu müssen Datenbanktabellen von Zeit zu Zeit optimiert werden, um performanter zu arbeiten.

Um die Arbeiten an der Datenbank vorzunehmen installierte ich das Tool W3 Total Cache sowie Simple Optimizer. W3 Total Cache ist an sich zwar ein Caching Tool, erspart meinem Server aber Datenbankabfragen, was logischerweiße die Ladezeit erneut verkürzt, da statische HTML Seiten statt dynamische PHP Seiten aufgerufen werden (Stichwort: HTTP-Requests).

Das Tool Simple Optimizer ermöglicht es mir Einträge in den Datenbanken automatisch zu löschen.

Das Design

Das Design – ja – wie kann das Design denn zur Geschwindigkeit und Erreichbarkeit der Seite beitragen? Nun, als erstes ist quasi der wichtigste Punkt die Anzahl der HTTP-Requests. Je geringer, desto besser. Ein unsauber programmiertes Design kann viele HTTP Anfragen an euren Server stellen (es gibt ein Maximum für gleichzeitige Downloads => längere Ladezeit bei mehreren Requests). Oft wird auch dummerweiße von der @import-Funktion in CSS gebraucht gemacht, was ebenfalls nicht gut ist. Für alle Designer: verwendet _NIEMALS_ außer vielleicht in Frameworks diese Funktion. Das ist ein extremer Zeitverlust, den man sich damit ins Haus holt.

Im Beispielfall Vergraemer installierte ich ein kostenloses Responsive Design mit ein paar Funktionen. Die Seitenladegeschwindigkeit war nach diesen paar Optimierungen nun nur noch auf knapp 5,7 Sekunden, was immer noch sehr viel ist.

benefitz

Die Auswertung zeigte außerdem, dass Requests an die Amazon-Server zu extremen Verzögerungen (fast 1 Sekunde pro Requests) zusätzlich erzeugen. Es war also von anfang an klar: weg von Amazon-Widgets – ich bau mein eigenes. Der Check ergab außerdem, dass Javascript-Dateien nicht zusammengefasst waren. Auch das W3-Tool konnte hier keinen besseren Wert erzeugen, was nicht zuletzt auch dem zwar super programmiertem, aber schlecht optimiertem Design geschuldet war. Die Idee von einem komplett eigenen Design für benefitz.de wuchs und wuchs.

Das NEUE Design

Beneiftz.de wird in den nächsten Wochen ein Design verpasst bekommen, welches folgendem Lastenheft entsprechen soll:

  1. Ladezeit von unter 4 Sekunden
  2. Performance Grade von über 90
  3. SEO Optimiert
  4. eigene Share Buttons
  5. Social-Plugin zum besseren verbreiten der Nachrichten
  6. Responsive
  7. Weg von Amazon
  8. Combined CSS/JS + HTMLtidy
  9. Page Size von maximal 2 MB
  10. Requests unter 100

Als ich überlegte, wie ich die Artikelanzeige am besten gestalte stoß ich auf ein mir bis dato unbekanntes Framework. Dieses Framework sah zum einen sehr gut aus, war nicht Bootstrap (ich bin ein großer Freund von Bootstrap, klasse Framework!) und somit auch ein wenig „kleiner“, und brachte eine Beispielseite mit sich. Die Beispielseite alleine sah bereits sehr gut aus und nach ein paar Änderungen und Anpassungen gings auch los.

Das Design wird eine One-Column Site mit Google Fonts, 2 kleinen Javascripts und anderen Featrues, wie zum Bleibstift Sprite-Images für geringe Requests, eine eigene Kommentarfunktion + einer hübschen Platzierung der Pingbacks, eine Einheitsfarbe (hellblau übrigens, siehe Screenshot) und dem unverkennbaren Zeichen des Vergrämers – sein Stofftier.

Der Header ist, wie man sehen kann, sehr groß. Die Artikel sind in einzelnen vertabbten Boxen angezeigt. Ich arbeite noch stark an der Gestaltung, aber hier könnt Ihr euch schon mal einen ungefähren Eindruck von dem Design machen: