Vor einigen Monaten hatte ich ein Webtemplate in Photoshop gestaltet und einige Zeit ist bis zur Umsetzung vergangen, einerseits wenig Zeit gehabt andererseits hat es auch nicht geeilt und wenn berufliche/studentische Aufgaben anstehen sind diese wichtiger gewesen. Doch was lange währt wird endlich gut.
Das Design zum Blog war bereits im September halbwegs fertitg, man kann die damalige Version auf DeviantArt betrachten: “Kreativschwein Blog Template”. Ich hatte mich jedoch erst im November dazu entschieden nebenher es vielleicht doch um zu setzten. Durch mein Masterstudium und Nebenberuflichen Aufgaben hatte ich natrülich nicht die entsprechende Zeit mich jede Woche damit zu beschäftigen und einige features haben es nötig gemacht auch zu forschen und zu recherchieren. Die Zeit im Januar über habe ich mit Optmierungen verbracht.
Der Look der Site ist dabei recht minimalistisch, nur die nötigsten Informationen werden angezeigt. Für die User Experience ist es interessant, da nur ein grober Überblick auf der Startseite geliefert wird, was auch reicht für den Typos von Benutzer der immer nur kurz auf die Site schaut. Wer die Zeit und das Interesse hat, wird weiter gehen um mehr Informationen/Bilder zu bekommen.
Features im Template sind:
- Bilder Voransicht auf der Startseite mit Animation
- Möglichkeit Link zu Twitter & Facebook zu schicken
- Cufon FontReplacement (Nur Javascript kein Flash!)
- Twitter Feed Reader
- Flexible Einteilung der Inhaltskisten auf der Startseite
- sehr performant programmiert
- Twitter & Facebook Link werden optisch versteckt
- erster Absatz wird automatisch Fett dargestellt
Die Seite ist an sich im Sourcecode sehr optimiert gebaut. Das HTML-Markup z.b. verzichtet möglichst auf unnötige Verschachtelungen und Klassen- oder ID-Zuweisungen. Eine Inhalts Box besteht so z.B. nur aus 3 Layern:
- rahmengebender Layer für die Form
- einen Layer für das Bild
- Layer für die Links zu Twitter & Facebook
die Perfomance-Features im Überblick:
- keine MarkUp Fehler (kommt bei anderen Seiten oft vor)
- nur eine CSS File
- CSS Code wurde komprimiert
- möglichst keine inhaltlich doppelten CSS Zuweisungen
- Javascript innerhalb von 2 Datein
- JS Code an richtig eingesetzt
- verschiedene Optimierungen im PHP Code
- Seiten Grafik wird aus nur einer Sprite File gelesen
Dadurch kann die Website bei einem 2000er DSL ohne Cache in 1.61ms gelanden & rendert werden. Hier der Überblick aus Google Chromes Developer Tools:
Wer sich einwenig auskennt wird bemerkten wie wunderschön sich die einzelnen Elemente nach einander mit Fortlaufenden HTTP-Requests Staffeln. Wenn der Browser die Dateien zwischen gespeichert hat, sie also im Cache lagern beträgt die Lade und Render Zeit nur ca 800ms. Ohne das Twitter Modul wären es sogar 500ms weniger noch! Im Vergleich dazu wie es sonst bei einigen Websites aussieht:
Man beachte die die 4 Fehler im Markup auf der Startseite, das 12 CSS Dateien geladen werden und 8 verschiedene Javascript Dateien - und diese auch noch völlig wirr und Zufällig verteilt. So etwas ist Gift für Performance!
Für meine Performance bekomme ich vom Firefox PlugIn ySlow die Note B mit 88 von 100 Punkten. Es ist leider nur ein B da ich kein gZip auf meinem Server installieren kann und dafür ein F bekommen habe, das mich Punkte mäßig etwas drückt:
Ich hoffe es gefällt sonst trotzdem (: