Mein Beitrag zu den Links der Woche im T3N

Juhu! Mein Artikel über Ladezeiten internationaler Markenseiten hat es auch in die Links der Woche im bekannten deutschsprachigen T3N Magazin geschafft. Freut mich :)

Auch bei Dr. Web gab es in dieser Woche interessante Zahlen. Analysiert wurden hier die Ladezeiten großer Webseiten im internationalen Vergleich. Die Website von Amazon braucht in London mit 3,5 Sekunden nur etwa ein Viertel der Zeit wie in China. Browser spielten scheinbar keine Rolle, sie wurden zumindest nicht erwähnt. Nutzen die in China etwa schon den IE 8?

Dr. Web Artikel

Heute ist ein Artikel auf Dr. Web online gegangen, an dem ich schon länger gearbeitet habe. Nun bin ich schon gespannt, ob und welche Kommentare zum Post hinzugefügt werden :)

Übrigens: Bei den Web-Charts von Mister-Wong, dem deutschsprachigem Delicious-Klon, wird Dr. Web sogar vor - dem renommierten IT Magazin - Heise auf Platz 1 aufgelistet.

Wie wars auf der Aufschwung Messe?

Übers Wochenende haben Anton und ich die Aufschwung-Messe in Frankfurt besucht und gelernt:

• Bahnreisen mit Nachtzügen ist sehr angenehm (wir hatten zu zweit einen 4er Schlafwagon)
• In Deutschland isst man sehr gern Grillwürste (und da ziehen wir natürlich mit)
• Mit etwas Kreativität kann man Essen zu einem Erlebnis in Afrika machen
• vom Titel lässt sich nicht immer auf die Qualität des Inhalts schliessen :)
  

Drei Vortragende waren super und haben die kleine Reise durch Mitteleuropa bezahlt gemacht:

• Gerhard Gieschen über Honorare und Neukundengewinnung
• Thomas Gronenthal, der mit seiner PR Agentur dripke unter anderem die Samwer Brüder unterstützt. Und dies schon seit ihrem Versteigerungsportal Alando, das damals angeblich recht teuer an Ebay verkauft wurde.
• Günter Faltin, dessen Buch "Kopf schlägt Kapital" ich zuvor schon gelesen hatte und der als Papst für Entrepreneurship im deutschsprachigem Raum auftritt.

Würdest du 20 Sekunden auf eine Webseite warten?

Physiker und Mathematiker geben, wenn man sie nach der Geschwindigkeit fragt, gerne die bekannte Formel wieder: Geschwindigkeit = zurückgelegter Weg / Zeit.

Internetuser kürzen diese Formel so circa auf: Geschwindigkeit = 1 / vergangene Zeit bis zur Darstellung der gewünschten Seite.

Theoretisch braucht das Signal bei Lichtgeschwindigkeit von Europa ans andere Ende der Welt - zum Beispiel nach China - weit unter einer Sekunde. In der Praxis werden Seiten bedeutend langsamer geladen: Durchschnittlich 50 Objekte müssen transferiert werden - wobei meist schon das HTML Gerüst mit einer Grösse von 312 kB aufwartet. Bedenkt man dann auch, dass die HTTP/1.1 Spezifikation vorschlägt, lediglich 2 Objekte parallel zu laden, so wundert es nicht, dass beim Testen Ladezeiten von über 20 Sekunden keine Seltenheit waren.

Aber wen interessiert das?

Und überhaupt: ein paar Sekunden hab' ich doch schon öfter auf Seiten warten müssen - könntest du jetzt entgegnen.

Naja, man nehme zum Beispiel den bekannten Sportartikelhersteller Nike. Dieser buhlt weltweit um Kunden und somit auch um Internetnutzer. Somit müssen sich internationale Marken auch damit befassen, wie schnell bzw. langsam deren Seiten - zum Beispiel - in China geöffnet werden.

Speziell wer einen Onlineshop betreibt, sollte sich Gedanken zum Thema Geschwindigkeit machen, da Veröffentlichungen von Google und Amazon ein ähnliches Bild zeichnen:

• Um 0,9 Sekunden langsamer Seitenaufbau geht bei Google mit einem Traffic- und auch Werbeinnahmenverlust von 20% einher.
• Amazon's Experimente zeigen, dass pro 0,1 Sekunden das Geschäft um 1% zurückgeht.

Quelle: O'Reilly Media, Inc. (15.Juli 2008) - Website Optimization (ISBN: 978-0-596-51508-9) - Web Performance Optimization

Und wie schnell sind Seiten internationaler Marken wirklich?

Um dies herauszufinden, habe ich in den letzten Tagen einige Messungen durchgeführt und mir die Ergebnisse notiert.

Marke	Seitenaufruf in Europa (London)	Seitenaufruf in China (Kanton)
Dolce & Gabbana	9,2 sec	39,8 sec
Gucci	5,9 sec	82,0 sec
Nike	1,9 sec	2,1 sec
Oakley	6,6 sec	40,0 sec
Rolex	11,4 sec	21,9 sec

Die ermittelten Werte habe ich mit Hilfe des Webdienstes Gomez messen lassen: jeweils drei mal an unterschiedlichen Tagen und zu unterschiedlichen Zeiten von einem Server in London und einem in Kanton.

Das Ergebnis sind die Ladezeiten der Startseiten bzw. der Mittelwert der Ladezeit.

Da ich eingangs Beobachtungen von Amazon und Google zitiert habe, sollen zum Vergleich auch deren Startseiten dem gleichen Prozedere unterzogen werden:

Seite	Seitenaufruf in Europa (London)	Seitenaufruf in China (Kanton)
Google	0,2 sec	0,1 sec
Amazon	3,5 sec	14,6 sec

Die Moral von der Geschicht'?

Gott sei Dank sind die Seiten in Europa schnell :)

Nach meiner Erfahrung mangelt es am Verständnis, dass auch das Internet - auch wenn dies der Name anders suggeriert - gar nicht so "inter" und komplett ortsungebunden ist. Daten brauchen Zeit um von einem Ort zum anderen zu gelangen und sogar Lichtgeschwindigkeit ist manchmal nicht schnell genug. 

Um diesem Problem zu begegnen sollte man zu allererst die eigenen Webseiten analysieren. Dies geht lokal mit dem beliebten Firefox Plugin "Firebug" und den Addons "YSlow" und "Hammerhead" oder auch dem hervorragendem Windows Tool "Fiddler".

Nach den ersten Tests sollte man sich das eigene Werk noch einmal zur Brust nehmen und nach den von Yahoo! veröffentlichten "Best-Practices" für schnellere Webseiten Schritt für Schritt verbessern.

Dabei sollte man sich vorerst mit den ersten beiden Regeln ernsthaft auseinandersetzen, denn witzigerweise haben 3 der 5 Seiten sogar die 2te Regel "Auf ein Content Delivery Network (CDN) zurückzugreifen" implementiert. Jedoch nutzt lediglich die Nike Seite das Potential dieser zugekauften verteilten Serverlandschaft, was auch an den hervorragenden weltweiten Werten erkennbar ist.

Für Tests aus entfernteren Regionen eignen sich Webservices wie Gomez oder Watchmouse. Manchmal sind aber die Seiten, die getestet werden sollen, nicht öffentlich erreichbar. Dies gilt zum Beispiel für Intranet Applikationen, die die Mitarbeiter aus dem chinesischen Tochterunternehmen nutzen sollen, jedoch ständig über langsame Seiten klagen. Für derartige Situationen bietet sich ein zuverlässigen Proxy Server bei den Endnutzern an, mit dem man anschliessend beobachten kann, wie langsam sich die Seiten tatsächlich aufbauen, nachdem sie um den halben Globus gejagt wurden. Nach dieser vermeintlichen Grenzerfahrung lässt sich vermutlich so manches leidvolles Klagen aus dem entfernten Land besser verstehen und hoffentlich auch für die Zukunft verhindern.

Feature Requests: Source Code Explorer & Web Browser

Heute nur 2 kurze Ideen zur Verbesserung gängiger Software:

Texboxeingaben gelöscht?

Wem ist das noch nicht passiert? Ich gebe auf einer Webseite in ein Textformular meine Meinung ab - wohl formuliert, schön formatiert und mit jeder Menge Herzblut.

Und nach dem Abschicken Klick - NICHTS. Irgendeine windige und genauso kryptische Fehlermeldung berichtet mir, dass etwas scheif gelaufen ist.

Aber kein Problem, einfach den Backbutton benutzen und schon ist alles wiederhergestellt - oder nicht? Manchmal ist der Content einfach nur verloren. Dies kann zum Beispiel passieren, wenn Ajax im Spiel ist:

Helfen würde eine kleine Funktion, die meine Eingaben in Textfelder zwischenspeichert - irgendwo in den Untiefen meines Browsers; so wie er es auch mit meinen besuchten Seiten tut.

Und wenn dann wieder etwas schiefgelaufen ist, öffne ich einfach die Textbox History, suche mir den eben geschriebenen Text und übermittle ihn nochmal.

Wär ziemlich banal, oder?

Visualisierung: Wo wird gerade am fleissigsten programmiert?

Subversion ist für mich beim Einarbeiten in fremden Code eine unschätzbar wertvolle Unterstützung - sofern mein Kollege die Commits auch in kleinen, logisch getrennten Happen gemacht hat.

Wurde diese Regel eingehalten, so kann man relativ einfach herausfinden, wie der Code entstanden ist und welche Teile zusammengehören.

Eine Idee wie ich beim Stöbern in fremden Code auf einen Blick erkennen könnte, an welchen Teilen gerade gearbeitet wird, wäre eine vom letzten Commit abhängige Heatmap:

dh. Jeder Datei/Verzeichnis wird eine Farbe zugeordnet, abhängig von ihrer letzten Änderung. Das Farbspektrum geht von Rot (aktuellste Datei nach Grün).

Ein Screenshot von TortoiseSVN (= absolute Empfehlung) macht vielleicht einiges klarer.

Offener Brief an einen Webdesigner

Image via Wikipedia

"Hab dir die Designs schon geschickt", höre ich regelmässig am Beginn eines Projekts. Und zurück an meinem Arbeitsplatz entdecke ich dann meistens in meiner Mailbox ein kurzes Schreiben à la "Designs 2009 das-aktuelle-projekt" mit einem Zip Archiv als Anhang.

Im Archiv befinden sich einige PNG oder JPG-Dateien, die den Gedanken meines Kollegen wiederspiegeln sollen - und aus denen ich nun meine Templates bastle.

Um den Anspruch der "pixelperfect Templates" gerecht zu werden, wie wir Missverständnisse vermeiden und unsere Zusammenarbeit verbessern könnten, habe ich einige Vorschläge:

Übergabe

Wie bereits erwähnt, bekomme ich die Designs meist als Bildersammlung in beliebiger Auflösung als Mail.

Dabei gehen viele Ideen und Konzepte von dir verloren: ein kurzes persönliches Gespräch kann da schon helfen.

Wunsch: Schick mir deine Kontaktadresse (Mobiltelefon, Skypeusername, was auch immer) oder am besten einen Vorschlag für ein "zeitnahes" persönliches Treffen um die Bilder kurz durchzugehen.

Oft hat man als Programmierer eine andere Sichtweise auf Designs. Und auch - zumindest manchmal :) - einen Überblick mit welchem Aufwand sich etwas umsetzen lässt und ob es bereits vorgefertigte Komponenten gibt, die man verwenden könnte.

Wunsch: Suche bereits während der Designphase Kontakt zu Programmierern und hol andere Sichtweisen ein.

Bemerkung: ein tolles System, das ich empfehlen kann, ist leider mittlerweile kostenpflichtig: Conceptshare ermöglicht es Bilder hochzuladen, Veränderungsvorschläge zu markieren und zu kommentieren.

Wunsch: Schickt mir auch die PSD Dateien.

Bilder sind zwar schöner zum Durchsehen und Überblick verschaffen - oft benötige ich aber einen freigestellte kleine Grafik. Dich dafür jedesmal kontaktieren zu müssen, ist mühsam.

Wunsch: Wenn wir eine Editieransicht brauchen - her damit!

Falls es einen Edit-Modus gibt, wie soll er sich ins Design einfügen.
"Action Icons" wären toll, wenn du mir sie als solche - freigestellt und bereits gesammelt - abspeicherst.

Auflösung

Erste Entscheidung: Genügt eine statische Breite der Seite? Soll die Webseite beim Vergrössern dynamisch mitskalieren und den Platz ausnutzen?

Am einfachsten ist es mit festen Seitenbreiten zu arbeiten. Dies wird auch noch weiter vereinfacht durch sogenannte CSS Grid Layouts, wie Blueprint, dessen Fork BlueTrip oder auch 960Grids. Dabei stehen je nach Framework circa 960px für den Inhalt zur Verfügung. Die Frameworks können aber mit etwas Aufwand auf andere Breiten konfiguriert werden.

Bevor man die Seite festlegt sollte man sich jedoch Gedanken machen, für wen die Seite optimiert sein soll - auf einschlägigen Seiten kann man dazu recht gute Informationen finden, oder - noch besser - du erkundigst dich beim Webmaster der bestehenden Seite.

Bestehst du auf ein sogenanntes Liquid Design, so kann auf ein System wie Yaml zurückgegriffen werden. Wobei erwähnt werden soll, dass es um einiges länger braucht sich in diesem System zurechtzufinden und der Aufwand für qualitativ hochwertiges Liquid Design oft unterschätzt wird.

Wunsch: Überleg dir, für welche Seitenbreite das Design ausgelegt sein soll und arbeite damit. Schick mir eine Angabe der statische Breite oder für Liquid Design minimale und maximale Breiten.

Schriftarten

Wenn ein Design vor mir liegt, bin ich mir immer sicher, dass viel Arbeit in die Auswahl der Schrift geflossen ist. Leider habe ich jedoch ein äusserst schlechtes Auge beim Erkennen der Schriftarten. Deshalb wäre es super, wenn du mir die Schriftarten, die du verwendet hast, in Prosaform zuschicken könntest.

Bei der Auswahl des Fontstacks kann dir übrigens folgendes Dokument von Unit Interactive weiterhelfen.

Wunsch: Angaben wie "font-family: Ideal, Alternative, Common, Generic;" für Text und Überschrift, sowie die Schriftgrösse anhängen.

Farbpalette

Ähnlich wie bei Schriften, so habe ich auch kein gutes Auge für Farben und mit Angaben wie "lachsfarben" meiner Freundin hatte ich schon jeher Probleme. Programmierer leben tendenziell in 16-256 Farben :)

Wunsch: Farbcodes sind super!

- black #000
- white #fff
- green #49B649
- light-grey #ebebeb
- dark-grey #999


Icons

Wie schon erwähnt, träume ich immer davon, Icons freigestellt zu bekommen. Ich kann zwar auch mit Photoshop oder Gimp umgehen, aber das sicher nicht in deiner Geschwindigkeit.

Wenn wir unseren Nutzern etwas gutes Tun willst, könntest du Standardbilder in einer Datei zusammenfassen. Dies nennt sich dann CSS Sprites. Programmierer mögen CSS Sprites, weil die meiste Zeit beim Laden vieler kleiner Dateien verloren geht und die gesammelten Bilder schon ab dem ersten Seitenaufruf für die restlichen Seiten gecacht vorliegen.

Apropos Icons: Wäre es nicht lässig, auch so ein cooles Fav-Icon beizulegen, dass beim Seitenaufruf in der Adressleiste erscheint?

Aufschwung 2008 - Soeben angemeldet

Am 13. und 14.März findet in Frankfurth der Aufschwung Kongress statt. Als Keynote Speaker tritt Günter Faltin auf - dessen Buch "Kopf schlägt Kapital" ich schon seit einigen Wochen in Arbeit habe.

Wer auch hin möchte, kann sich mit dem Codewort "BLOGGER" angeblich gratis anmelden.

Wer von Wien aus an einer Fahrgemeinschaft interessiert wäre, bitte bei mir melden :)