Nico Steiner - Frontend-Entwicklung und -Architektur

New SenSEO version is coming

nospam@example.com (Nico Steiner) — Sun, 05 Feb 2012 01:31:56 +0100

In the next days I will finish work on a completely refactored version of SenSEO.

SenSEO will bootstrap

SenSEO will no longer integrate into Firebug but will be, what Mozilla calls, a bootstrapped add-on.

Bootstrapped add-ons are a special kind of add-on that developers can choose to use instead of normal add-ons in order to allow users to install and use the add-on without needing to restart the application.

New features will come along

SenSEO will reopen with the last active tab.
Page load time is calculated with new HTML5 Navigation Timing API.
SenSEO is taking Microdata into account.

Some preview screenshots

The refactored code in most cases is based on web technologies - don't nail me down on that, but this should make it easier to publish SenSEO on other platforms also.

If you find bugs (there will be some, the code is brand new), please report them on getsatisfaction.com/senseo.

Mini-Suchmaschine mit Frontend-Technologien

nospam@example.com (Nico Steiner) — Mon, 24 Oct 2011 20:44:56 +0200

Die SenSEO-Extension bekommt ein neues Feature "Analyze all pages". Hiermit soll es möglich sein, mit einem Klick die gesamte Website zu crawlen und sämtliche Seiten anhand vorgegebener Keywords zu bewerten. Dieses Crawlen und Bewerten wird ausschließlich mit Frontend-Technologien implementiert. Die nachfolgende Grafik zeigt die geplanten Schritte.

Der Anfang ist bereits geschafft. Mit diesem Prototypen (läuft nur im Firefox) ist es möglich, aus dem Markup einer vorgegebenen Seite sämtliche Links zu extrahieren. Es können lediglich Seiten von sensational-seo.com angegeben werden, da die Same Origin Policy nur Seiten der selben Domain für die Analyse zulässt.

Das Markup wird mit der XMLHttpRequest API abgerufen und mit der evaluate Function der Firefox XPath JavaScript API geparst.

Da die API lediglich DOM Dokumente https://developer.mozilla.org/en/DOM/document verarbeitet, wird die als String gelieferte XMLHttpRequest Response vorher einem iFrame als Inhalt zugewiesen. Der folgende Code macht dies möglich.

// create iframe

var responseTextIframeElement = document.createElement('iframe');

responseTextIframeElement.setAttribute('width', '0');

responseTextIframeElement.setAttribute('height', '0');

responseTextIframe = document.body.appendChild(responseTextIframeElement);

responseTextIframe.contentWindow.document.write(responseText);

var responseXML = responseTextIframe.contentWindow.document;

// clear iframe

responseTextIframe.parentNode.removeChild(responseTextIframe);

mse.Crawler.gotPageContentByUrl(responseXML);

Möchte man ohne XMLHttpRequest API arbeiten, kann man einem zuvor erzeugten iFrame auch einfach den URL als scr-Attribut zuweisen.

// create iframe

var responseTextIframeElement = document.createElement('iframe');

responseTextIframeElement.setAttribute('width', '0');

responseTextIframeElement.setAttribute('height', '0');

responseTextIframe = document.body.appendChild(responseTextIframeElement);

responseTextIframe.addEventListener('load', function(e) {

  var responseTextIframe = this;

  var responseXML = responseTextIframe.contentWindow.document;

  // clear iframe

  responseTextIframe.parentNode.removeChild(responseTextIframe);

  // this is not the best sollution

  mse.Crawler.gotPageContentByUrl(responseXML);

}, false);

responseTextIframe.src = url;

Die Extrahierung der href-Attribute aus sämtlichen Anker-Tags übernimmt dann der folgende Code.

var allLinksXpath = responseXML.evaluate('/html/body//a/@href', responseXML, null, XPathResult.ANY_TYPE, null);

In einem nächsten Schritt sollen all die Verlinkungen extrahiert werden, welche absolut (mit http Schema) auf die selbe Domain verweisen oder Seiten relativ referenzieren. Diese Verlinkungen werden mit der Local Storage API auf einem Stack abgelegt und sequentiell nach dem LILO-Prinzip (Last in, Last out) gecrawlt. Dabei wird die Bereinigung von Dubletten mit Hilfe des Canonical-Tag eine wichtige Rolle spielen. Im Local Storage wird neben der extrahierten URL also auch immer eine zweite kanonische URL abgelegt, welche durch einen entsprechenden Abgleich das doppelte Crawlen von Seiten verhindern soll.

Rendern von Seiten-Komponenten

nospam@example.com (Nico Steiner) — Mon, 01 Aug 2011 21:55:54 +0200

Möchte man nur Teile einer Seite neu rendern, ohne den Rest der Seite zu verändern, bedient man sich häufig der DOM-Manipulation mit JavaScript. Sind an diesem Prozess dynamische Daten beteiligt, die auf dem Server gehalten werden, kommt auch noch XHR und JSON zum Austausch der Daten hinzu. Konkret ergeben sich daraus folgende Schritte, die für gewöhnlich als AJAX bezeichnet werden:

Ein XHR-Request erfragt Daten vom Server, die dieser in einer Session hält
Der Server sendet die angeforderten Daten im JSON-Format und der Client wandelt diese in JavaScript-Objekte
Basierend auf den so entstandenen Objekten werden mit JavaScript Manipulationen am bestehenden HTML-Dokument vorgenommen

Einige Nachteile dieses Vorgehens

Der Ansatz funktioniert nur mit JavaScript - ohne JavaScript findet keine Veränderung des Dokuments statt
Eigens für die DOM-Manipulation muss JavaScript-Code geschrieben werden - auf eventuell bestehenden Code des Templatesystems auf dem Server kann nicht zurückgegriffen werden
Durch Punkt 2 besteht die Tendenz zum Duplizieren von Code in verschiedenen Sprachen auf Server- und Clientseite
Setzt man sehr massiv auf den oben beschriebenen Ansatz, sind für Suchmaschinen kaum verwertbare Inhalte verfügbar

Wie können diese Nachteile umgangen werden?

Die meisten Templatesysteme setzen das HTML-Dokument aus einer Kombination verschiedener Seiten-Komponenten zusammen - typisch hierfür sind ein Header-, Content- und Footer-Bereich - aber auch Navigation, Sidebar etc. bilden solche Komponenten. Oft werden dynamische Daten genutzt, um z. B. eine Navigation zu erzeugen, die Links zu neu erzeugten Seiten generiert, ohne weitere Veränderungen am Code vorzunehmen zu müssen.

Am Beispiel einer Kostenübersicht möchte ich demonstrieren, wie solch eine Komponente mit XHR nach jeder Veränderung des Warenkorbs ohne Neuladen der Seite aktualisiert werden kann. Der folgende Wireframe zeigt den schematisch Aufbau der Seite - links die zu aktualisierende Kostenübersicht, rechts der Bereich, über den Veränderungen am Warenkorb vorgenommen werden können.

Schritt 1 - Der initial Request

Der initiale Request ruft die Seite das erste Mal vom Server ab. Angenommen, es befinden sich zu diesem Zeitpunkt bereits zwei Artikel im Warenkorb, dann würde die Kostenübersicht von einer Komponente erzeugt werden, die für jeden der zwei Artikel eine neue Tabellenzeile mit den zugehörigen Daten generiert. Zusammen mit den übrigen Teilen der Seite entsteht ein komplettes HTML-Dokument, welches über HTTP an den Browser ausgeliefert wird.

Soweit ist dies der klassische Ansatz, wie er von den meisten Frameworks verfolgt wird.

Schritt 2 - Ein Artikel wird hinzugefügt

Für das hinzufügen eines Artikels existiert ein Anker-Tag, welches einem Server-Script den neuen Artikel als GET-Paramter übergibt. Um das Neuladen der Seite zu verhindern, wird das Verhalten des Anker-Tags mit JavaScript unterbunden und statt dessen der Artikel über einen Webservice-Call mit XHR an den Server kommuniziert. Somit haben wir ein korrektes Verhalten für aktiviertes und deaktivertes JavaScript sichergestellt.

In beiden Fällen wird dem Warenkorbsystem auf dem Server der ausgewählte Artikel hinzugefügt. Bei deaktiviertem JavaScript würde erneut ein HTML-Dokument mit dem neuen Artikel in der Kostenübersicht erzeugt und über HTTP an den Browser ausgeliefert werden. Das interessante Verhalten ergibt sich bei aktiviertem JavaScript. Nachdem der Webserivce-Call erfolgreich verarbeitet wurde, gilt es die Kostenübersicht zu aktualisieren. Beim klassischen AJAX-Ansatz würde die Response die neuen Warenkorb-Artikel enthalten und per DOM-Manipulation würde die Tabelle der Kostenübersicht um eine weitere Zeile ergänzt werden. Dies kann bei komplexeren Problemen schnell sehr aufwändig werden. Eine elegantere Lösung besteht darin, das HTML-Fragment der Kostenübersicht auf dem Server neu erzeugen zu lassen und anschließend das bestehende Fragment mit JavaScript durch das neu erzeugte zu ersetzten. Die folgende Grafik soll diese Lösung veranschaulichen.

Welche Probleme gibt es hierbei zu lösen

Es muss eine Verbindung vom alten zum neuen HTML-Fragment hergestellt werden können. Am einfachsten ist dies mit einer Element-ID möglich, über welche das Fragment identifiziert und durch das neue ersetzt werden kann. Weiterhin muss das serverseitige Templatesystem/Framework eine entsprechende Funktionalität zum selektiven Neurendern von Seitenkomponenten bereitstellen. Komponentenbasierte Frameworks bieten hier die besten Chancen für einen solchen Support. Eine weitere Herausforderung stellt das Erzeugen und Entfernen von Event-Listenern auf Elemente des Fragments dar - auch hier sollte das Framework eine entsprechende Unterstützung bieten.

Hühnersuppe ala Mama

nospam@example.com (Nico Steiner) — Mon, 01 Aug 2011 18:07:30 +0200

Bei Erkältung hilft nur eins - die Hühnersuppe ala Mama. Die Zubereitung ist einfach und der Erkältung fällt dann auch nix mehr ein.

Folgende Zutaten werden für eine große Portion Hühnersuppe benötigt (bei einer kleineren Portion die halbe Menge oder fertig abgepacktes Suppengemüse kaufen):

1 großes Suppenhuhn vom Markt oder aus dem BIO-Laden
250g Suppennudeln
1 Kohlrabi
1 Butterrübe
1 Knolle Sellerie
2 mittelgroße Möhren
1 Stange Lauch
1 Bund Petersilie
Salz
Gemahlener schwarzer Pfeffer

Das Huhn ggf. auftauen und dann mit viel Wasser und reichlich Salz in einem großen Topf bei halb aufgelegtem Deckel zum Kochen bringen. Danach auf mittlere Hitze zurückschalten und weiter kochen lassen.

Das Gemüse schälen und grob in größere Stücke zerteilen. Das Kleinschneiden kommt später. Beim Lauch gibt es zu beachten, dass auch die oberen, grünen Teile mitgekocht werden. Die Gemüsestücke zum Huhn in den Topf geben und ca. 20-30 Minuten gar kochen. Danach mit einer Schöpfkelle wieder aus dem Topf fischen (das Huhn kocht weiter), in eine Schüssel geben, klein schneiden und beiseite stellen. Je nach Geschmack nicht das gesamte Gemüse kleingeschneiden - von der Menge her ist das eher zu viel.

Wenn das Huhn nach 1-2 Stunden gar gekocht ist (das Fleisch sollte sich ganz leicht vom Knochen lösen lassen) aus dem Topf nehmen, die Haut und die Knochen entfernen und das Hühnerfleisch in kleine Stücke schneiden. Parallel dazu Wasser mit einer Prise Salz in einem separaten Topf zum Kochen bringen und die Suppennudeln darin nach Anleitung kochen. Die Nudeln danach in ein feinmaschiges Sieb abgießen und zusammen mit den Fleischstücken und dem geschnitten Gemüse zurück in den Topf geben.

Die Suppe mit Salz und Pfeffer abschmecken. Zum Schluss die Petersilie mit einem Wiegemesser klein schneiden und über die fertige Suppe streuen.

Ein paar Tipps

Suppe braucht viel Salz. Wenn trotzdem mal zu viel Salz an die Suppe gerät, hilft es, eine Kartoffel mitzukochen. Diese saugt das Salz auf und kann später weggeworfen werden.

Wer die Suppe nicht ganz so fett mag, kann sie auch erst erkalten lassen, dann in den Kühlschrank stellen und nach einigen Stunden die Schicht Fett abziehen, die sich auf der Suppe bildet.

Hühnersuppe läßt sich prima einfrieren. Größere Mengen am besten in Portionen aufteilen, da jedes erneute Aufkochen den Nudeln schadet.

SenSEO Infografik

nospam@example.com (Nico Steiner) — Tue, 05 Apr 2011 17:33:21 +0200

Zum 200.000sten Download von SenSEO habe ich als kleines Dankeschön eine Infografik mit interessanten Fakten zur Firefox-Extension zusammengestellt.

Gastartikel im Webstandard-Blog

nospam@example.com (Nico Steiner) — Tue, 19 Oct 2010 16:50:43 +0200

Gestern erschien im Webstandard-Blog der erste von 3 Artikeln zur Verbesserung der Website-Performance mit Expires-Headern. Die Artikel basieren auf Steve Souders Veröffentlichungen und den praktischen Erfahrungen, die ich mit dem Content Delivery Server gesammelt habe. Der zweite und dritte Teil folgen die nächsten Tage.

CSS3 Redesign abgeschlossen

nospam@example.com (Nico Steiner) — Sun, 17 Oct 2010 13:59:03 +0200

So - jetzt bin ich zufrieden. Ohne eine Zeile HTML zu ändern und mit vielen neuen CSS3 Regeln hat das Blog einen neuen Look bekommen. Das Redesign war ein Versuch, dass Wissen aus Dan Rubins CSS3 Workshop praktisch anzuwenden.

Halb zwei - uff...

nospam@example.com (Nico Steiner) — Sat, 16 Oct 2010 01:28:52 +0200

Bin immer noch nicht zufrieden, gehe jetzt aber erstmal ins Bett.

CSS3 Redesign startet jetzt

nospam@example.com (Nico Steiner) — Fri, 15 Oct 2010 21:58:29 +0200

Für die nächsten Stunden wird die Seite übel aussehen - danach hoffentlich nicht mehr...

Vortrag auf der WebTechCon 2010

nospam@example.com (Nico Steiner) — Wed, 13 Oct 2010 23:49:22 +0200

Ich bin wieder zurück von der WebTechCon 2010. Neben einigen interessanten Vorträgen und jeder Menge Socializing habe auch ich einen Vortrag gehalten. Es ging um die Frontend-Architektur unserer Abteilung.

"Frontend-Architektur der 1&1 Bestellsysteme" bei Slideshare

Es gab einige interessante Fragen und jede Menge positives Feedback (zwitscher, zwitscher, zwitscher).

Einige Dinge, die ich aus den Gesprächen mitnehme:

Viele Entwickler sitzen auf zwei Stühlen - PHP und das bißchen Frontend gleich noch mit. Den meisten ist bewußt, dass das alles andere als optimal ist
Sehr gewachsene, heterogene Infrastrukturen - Konsolidierung nicht in Sicht (Zeit- oder Geldmangel)
Uneinsichtige Chefs blockieren Innovationen
Gute Kollegen trösten über vieles hinweg
Kicker sind Mangelware
Großraumbüros sind definitiv keine Option für Entwickler

Das macht mir mal wieder deutlich klar, wie gut wir eigentlich mit Personal und Systemen aufgestellt sind und wie viel Nachholbedarf andere Firmen da noch haben.

Letzte Woche war ich zusammen mit Andi und Mathias auf der Fronteers in Amsterdam. Chris Heilmann hat die Talks der Konferenz sehr gut zusammengefasst. Bleibt nur noch hinzuzufügen, dass der CSS3 Workshop von Dan Rubin sehr lehrreich und kurzweilig war.

Die Webseite

nospam@example.com (Nico Steiner) — Sat, 02 Oct 2010 15:06:06 +0200

Inspiriert durch dieses Meisterwerk von Jochen Malmsheimer (unbedingt vorher ansehen, sonst kommt der Witz nicht rüber) habe ich versucht, diesen Gag auf ein anderes Thema zu übertragen.

Die Webseite

Wie geht eine Webseite? Fangen wir unten an. Da ist das valides HTML. VALIDES HTML! Mit einer richtigen Semantik, damit die Elemente der Seite auch eine anständige Bedeutung haben. Richtiges HTML, semantisch, suchmaschinenoptimiert. Nicht diese zusammengeschusterte Tagsuppe, die ihr Layout in Tabellen presst und von Headlines noch nie etwas gehört hat!

Da drauf - extern, minimiert und komprimiert - gutes CSS! Man kann auch Stylesheets oder Layout dazu sagen. Und das CSS rendert von oben über das HTML, und dann lernen sie sich kennen und dann tun sie sich zusammen - denn sie wissen, gleich gibt's noch richtig was auf's Dach.

Und dann! Das ist jetzt ganz wichtig, Zettel raus, Stifte und mitschreiben - BITTE! Und dann...! Unobtrusive, buchstabiert U-N-O-B-T-R-U-S-I-V-E, JavaScript! Die Zeiten von Inline-Events sind vorbei!

Die müssen sauber voneinander getrennt sein! HTML und CSS bilden Gerüst und Layout der Seite und JavaScript fügt eine Logik-Schicht hinzu. Und dann gibt das eine Technologieexplosion, die einem die Zähne aus dem Hals bläst, wenn sie nicht ordentlich verschraubt sind!

DAS IST GUT! Seit Jahren ist das so gut! Das sind Webstandards!

Bis... zu diesem furchtbaren Tag... an dem so ein mental verotteter Grafiker (sorry, Jungs) DA FLASH DRAUFGEMACHT HAT, UND GRAFISCHE HEADLINES, UND VERLÄUFE UND OHNE ENDE SCHLAGSCHATTEN! DU HAST DAS GEFÜHL, DU BLICKST AUF EINE SCHIESSBUDE! DAS HAT DOCH MIT EINER WEBSEITE NICHTS ZU TUN! ICH WERDE NOCH WAHNSINNIG!

ICH... ich bin für den Einsatz des Militärs im eigenen Land! Die Soldaten sollen die Grafiker unter vorgehaltener Waffe dazu zwingen, ihre eigenen Webseiten mit einem Screenreader zu bedienen! Ein Grafiker soll morgens ins Büro kommen, eine anständige Webseite layouten und wieder nach Hause gehen - ist das denn so schwer ?!?

Das mache ich fast jeden Tag - könnt ihr euch das vorstellen? Das ich das gesundheitlich überhaupt mitmache! Auf der anderen Seite finde ich, dass ein so durchaus technologielastiges Blog wie dieses so einen Hauch von Emotion durchaus verträgt. Auf der anderen Seite fragt sich der eine oder andere Leser diese Artikels jetzt vielleicht... Was - hat - der - Mann?

RECHT HAT ER!!!

Danke an Andi und Matthias, die zum Teil unter dem Einsatz alkoholischer Getränke ihren Beitrag geleistet haben

Content Delivery Server online!

nospam@example.com (Nico Steiner) — Thu, 30 Sep 2010 17:21:54 +0200

Seit gestern werden auf der United Internet AG Website sämtliche Grafiken über einen Content Delivery Server ausgeliefert. Dieser komplettiert das Puzzle an Optimierungen, welches die Performance unserer Shops verbessern soll.

Folgende Features wurden in der ersten Phase implementiert:

- Far Future Expires Header (mehr Infos bei Yahoo!)
- Umschreiben der Grafikpfade auf eine Hashtag-Version
- Cookiefreie Domain (mehr Infos bei Yahoo!)
- Mehr parallele Downloads dank verschiedener Subdomains (mehr Infos bei Yahoo!)

Zum zweiten Feature habe ich keine gute Quelle im Netz gefunden. Es geht hierbei um das Problem, dass eine Grafik mit Expires Header ohne Conditional GET aus dem Cache geladen wird. Was prinzipiell erwünscht ist wird zu einem Problem, wenn eine veränderte Version dieser Grafik gepublished wird. Um dann trotzt des Expires Headers ein Neuladen zu erzwingen, ist eine veränderte Grafik-URL nötig. Für gewöhnlich kann man sich zwischen einer Versionierung und einem Hash Tag entscheiden. Letzteres erschien uns praktikabler, da ein Hash Tag vergleichsweise einfach implementiert werden kann. Facebook hat das gleiche Verfahren gewählt, Amazon dagegen setzt auf eine Versionierung der Dateinamen.

Eine Vorher-Nachher-Analyse belegt die Verbesserungen eindrucksvoll. Obwohl auf der Website vergleichsweise wenige Grafiken eingebunden werden, werden die Seiten beim 1. Request (dank 8 statt 2 parallelen Downloads) 25% schneller geladen. Beim 2. Request ist dank des optimalen Cache-Verhaltens eine Zeiteinsparung von fast 40% messbar. Es gibt diverse Studien, die eine verbesserte User Experience durch schnelle Ladezeiten belegen. Beispielhaft sei auf einige Statistiken der letzten Velocity verwiesen.

Im Verlauf der nächsten Monate werden wir den CDS in die sehr viel grafiklastigeren Shops integrieren und die Verbesserungen in diesem Umfeld dokumentieren. Man darf gespannt sein.

Für die Zukunft sind weitere Features geplant. So soll mit den Daten des CDS ein "selbstlernendes" Image Prefetching gebaut werden. In einem weiteren Schritt könnte der CDS zu einem Content Delivery Network ausgebaut werden, um statische Ressourcen weltweit mit möglichst geringer Latenz auszuliefern.

Darauf hoch die Tassen!

1&1 DSL - Performance-Optimierungen

nospam@example.com (Nico Steiner) — Sun, 18 Oct 2009 12:10:13 +0200

Das DSL-Projekt ging letzte Woche mit dem neuen Jasmin-Servlet 2.1 online. An diesem Beispiel möchte ich zeigen, wie eine weitere Optimierung dieses Projekts aussehen könnte.

Der erste Request

In der nachfolgenden Grafik sind sämtliche Requests in Form ihrer Bestandteile, Downloadzeiten und Latenzen beim ersten Aufruf der DSL-Startseite zu sehen. Die Latenzen werden dabei von der Software simuliert, stimmen aber in ihren Relationen zueinander.

Gleich die ersten Requests (1) wären Kandidaten für eine Optimierung. Das Pustefix-Framework macht ihr diverse Redirects, bevor es die eigentlichen Inhalte ausliefert. Ideal wäre natürlich wenn dies bereits mit dem ersten Request geschehen würde. Somit könnte die Zeit bis zum ersten Rendern der Seite (die grüne, vertikale Linie) deutlich verkürzt werden. Auch die mit (2) gekennzeichneten Requests beeinflussen den Zeitpunkt des ersten Renderns negativ. Diese Requests fordern die Stylesheets des Dokuments an. Die Platzierung der Requests ist optimal, je eher die Stylesheets geladen werden, desto besser. Allerdings ist die Größe der Daten ein Problem. Dies beeinflußt nicht nur die Downloadzeit sondern auch die Zeit der Interpretation der Stylesheets (3). Insgesamt dauert es in dieser Simulation mehr als eine Sekunde, diesen Prozess abzuschließen. Das ist immerhin 1/7 der Zeit, die der Browser mit der kompletten Darstellung des Dokuments beschäftigt ist. Zukünftig wird es dank des PMT möglich sein, diverse veraltete Selektoren aus den Stylesheets zu entfernen, was an dieser Stelle eine deutliche Verbesserung bringen sollte.

Im Anschluß an die Stylesheets werden die Grafiken der Startseite angefordert. Hier lassen sich für den ersten Request kaum Optimierungen finden. Eventuell sind einige weitere Hintergrundgrafiken Kandidaten für CSS-Sprites.

Interessant wird es wieder bei den JavaScript-Requests (4). Auch hier wird deutlich, dass der Umfang der Scripte recht groß ist, was wiederum zusätzlich zu einer Verzögerung bei der Interpretation des JavaScript-Codes (5) führt. Hier werden wir in Zukunft auf eine asynchrones Laden der Scripte mit einem Managed XHR setzen. Wem das nichts sagt, dem sei das Buch Even Faster Web Sites von Steve Souders empfohlen. Den Teil zum asynchronen Laden von JavaScript finde ich in diesem Buch neben den JavaScript-Code-Optimierungen am interessantesten.

Den Abschluß bilden jede Menge Tracking-Pixel-Requests. Diese stellen eine Besondere herausforderung dar, da sie nicht Teil der eigenen Infrastruktuer sind, sondern oftmals von fremden Servern, mit all den Nachteilen die so etwas hat, bezogen werden. Gerade heute morgen hatte ich eine Idee, wie wir dieses Problem mit einer zentralisierten Lösung für solche Requests in den Griff bekommen könnten - mal sehen, was mein Chef dazu meint

Der zweite Request

Dieser Request wird maßgeblich davon beeinflußt, dass der Browser bestimmte Daten bereits im Cache zwischengespeichert hat. Nur unter gewissen Umständen fordert dieser Daten erneut vom Server an.

Hier wirken sich die Redirects bis zur Auslieferung des HTML-Codes (1) in Relation noch massiver aus. Ein wesentlicher Teil der zeit bis zum ersten Rendern der Seite wird dafür beansprucht.

Ein viel größeres Problem wird durch die Bereiche (2), (3) und (4) sichtbar. Diese Bereich stellen sogeannte Conditional GET-Requests dar. Dabei wird beim Server erfragt, ob sich die bereits beim ersten Request abgerufenen Daten in der Zwischenzeit verändert haben. Bei den hier dargestellten Daten handelt es sich ausschließlich um Grafiken. Da sich das System, welches Grafiken zentral ausliefert und diese nur bei Veränderungen entsprechend neu versioniert, noch in der Planung befindet, müssen wir mit diesem Problem leider noch eine Weile leben. (Nachtrag: Der Content Delivery Server ist mittlerweile fertig implementiert.)

Als Fazit kann man sagen, dass wir mit unseren bisherigen Bemühungen schon große Schritte in Richtung eines performanten Frontends gegangen sind. Die hier beschriebenen Ansätze werden noch einmal eine deutliche Verbesserung bringen. Mit dem Ende dieser zweiten Phase wird das Thema Performance-Optimierung architektonisch abgehakt sein. Natürlich müssen wir während des Entwicklungsprozess bestehender und neuer Projekte darauf achten, Optimierungen am JavaScript-Code und an dem Umfang der ausgelieferten Ressourcen nicht aus dem Auge zu verlieren und als kontinuierlichen Teil unserer Arbeit zu sehen.

Die komplette Analyse ist bei webpagetest.org zu finden.

Expires Header besser verstehen

nospam@example.com (Nico Steiner) — Sun, 07 Feb 2010 16:14:46 +0100

Anhand eines unserer aktuellen Projekte möchte ich zeigen, wie die genannte Technologie in Hinblick auf die Performance einer Website zu verstehen ist.

Folgende Statistik habe ich mit der Firefox Extension YSlow erstellt. Oben ist die Verteilung der Ressourcen bei einem ersten Request mit leerem Cache zu sehen. Der Bereich darunter zeigt die Verteilung bei einem zweiten Request unter Ausnutzung des Caches.

Der obere Bereich zeigt die typischen Ressourcen einer Seite. Etwas ungewöhlich sind die 2 XML-HTTP-Requests. Dahinter verbergen sich JavaScripte, welche asynchron mit der Managed XHR Technik von Steve Souders in die Seite integriert werden.

Interessanter in Bezug auf die erwähnte Technologie ist der untere Bereich, nutzt man Expires Header doch, um das Caching-Verhalten einer Seite positiv zu beeinflussen. Hier ist zu sehen, dass Scripte und Stylesheets nicht mehr aufgeführt werden. Dies ist wenig verwunderlich, da wir diese bereits mit Far Future Expires Headern versehen haben.

Das Neuladen des HTML-Dokuments ist gewollt und wird mit einem in der Vergangenheit liegenden Expires Header erzwungen. Wir erzwingen für diesen Fall das Neuladen, da das Dokument dynamisch generiert wird und sich von einem Aufruf zum nächsten verändern kann.

Neben dem HTML-Dokument erzeugen sämtliche Grafiken der Seite erneut Requests. Bei diesen steht die Auslieferung eines Expires Header momentan noch aus. Was im ersten Moment nur nach einer Einstellung in den Apache-Konfigurationen klingt, wird auf den zweiten Blick sehr viel komplexer, möchte man durch eine möglichst transparente Versionierung der Grafiken ein Neuladen bei Veränderungen erzwingen. Zumindest ist durch korrekte ETags sichergestellt, dass lediglich Requests in Form eines Conditional GET gemacht werden - die Daten selbst werden also nicht erneut übertragen. Allerdings braucht solch ein Request für den gesamten Roundtrip auch etwas Zeit - bei 40 Requests macht das in einem modernen Browser wie dem Firefox immer noch ganze 2 Sekunden aus!

Nachtrag: Die Grafiken werden mittlerweile mit Hilfe des Content Delivery Server mit Expires Header ausgeliefert.

Speaker auf dem PHP World Kongress 2010

nospam@example.com (Nico Steiner) — Wed, 29 Sep 2010 17:38:54 +0200

Ich werde am 9. November auf dem PHP World Kongress einen Vortrag zur Verbesserung der Website Performance halten.

Abstract
Wie verbessere ich die Ladezeiten meiner Websites und welche Vorteile ergeben sich daraus? Auf der Basis allgemeingültiger Regeln werden in diesem Vortrag Lösungen vorgestellt, wie sie im Umfeld der 1&1 Shopsysteme entstanden sind. Es wird weiterhin erläutert, wie zentralisierte Technologien dafür sorgen können, dass diese Optimierungen projektübergreifend angewendet werden, Kennzahlen erhoben und mögliche Schwachstellen identifiziert werden können.

Promote JS! Better Docs For Us, By Us!

nospam@example.com (Nico Steiner) — Sun, 26 Sep 2010 22:32:26 +0200

Speaker auf der WebTech 2010

nospam@example.com (Nico Steiner) — Sun, 19 Sep 2010 17:38:42 +0200

Am 13. Oktober werde ich auf der WebTech 2010 einen Vortrag zum Thema "Frontend-Architektur der 1&1-Bestellsysteme" halten.

Abstract
Die Anforderungen an eine Frontend-Architektur sind vielfältig. Neben der Organisation und Modularisierung von HTML, XML, CSS, JavaScript und Grafiken stellen Performance- und Suchmaschinenoptimierung, Ermittlung von Kennzahlen, Coding Guidelines und Qualitätssicherung ganz besondere Herausforderungen dar. In der Session wird gezeigt, wie 1&1 ihre Bestellsysteme darauf ausgerichtet hat.

Gast-Beitrag im Webstandard-Blog

nospam@example.com (Nico Steiner) — Wed, 01 Sep 2010 00:35:02 +0200

Im Webstandard-Blog ist heute mein Gast-Beitrag Onpage-Optimierung - Möglichkeiten und Grenzen erschienen. Ich versuche darin zu verdeutlichen, dass Onpage-Optimierung keine Ranking-Wunder vollbringen kann, sondern eher als Basis einer vielmehr besucherzentrierten, informativen und relevanten Website zu verstehen ist.

Zoompf 2010 State Of Web Performance Report

nospam@example.com (Nico Steiner) — Mon, 30 Aug 2010 22:20:22 +0200

Ich hatte den Link gestern bereits getwittert, möchte aber auch hier nochmal auf diesen interessanten Report hinweisen (es ist die Angabe einer E-Mail-Adresse nötig). Zoompf hat nicht nur die 1000 populärsten US-Websites auf typische Performance-Kriterien hin untersucht, sondern auch lesenswerte Schlüsse aus den daraus enstandenen Statistiken gezogen. Ursachen für die schlechte Performance von großen Websites sind laut dem Report zum einen fehlende Lösungen für eine durchgängige Anwendung von Optimierungen auf die gesamte Infrastruktur und zum anderen fehlende Werkzeuge, um sämtliche Webseiten eines Top-1000-Unternehmens auf mögliche Schwachstellen zu durchleuchten und nachhaltig zu überwachen.

Ich hatte auf diese Punkte bereits vor ca. einem Jahr in einem Blog-Post hingewiesen und wir haben seit damals kontinuierlich an der Lösung dieser Probleme gearbeitet. Wenn ich mir die Liste von damals jetzt durchlese, stelle ich erfreut fest, dass viele der Dinge schon geschafft sind - einige wirklich große Brocken stehen noch aus. Mal sehen, was die nächsten Wochen so bringen

Vortrag auf dem 1&1 Developer Day

nospam@example.com (Nico Steiner) — Mon, 30 Aug 2010 21:21:09 +0200

Ich werde nächsten Dienstag auf dem 1&1 Developer Day einen Vortrag zu unserer Frontend-Architektur halten. Dieser Vortrag dient unter anderem als Vorbereitung auf die WebTech Conference in Mainz, auf der ich zu einem ähnlich Thema reden werde. Diese Woche wird wohl komplett für die Vorbereitungen draufgehen. Eine Story steht schon - analog auf einem großen Blatt Papier. Jetzt geht es an das Zurechtschneiden von Screenshots, Anfertigen von Statistiken, Suchen passender Fotos und Grafiken etc. Zum Schluß steht dann die Übertragung in Powerpoint an. An dieser Stelle sei nochmals auf die Bücher slide:ology, ZEN oder die Kunst der Präsentation und Bekenntnisse eines Redners hingewiesen - in diesen Büchern findet man viel Wissenswertes zum Thema Vorträge und Präsentationen.

Außerdem geht es nächsten Montag zum 5. Webmontag Talk nach Mannheim. Björn Seibert hat mich mit einer Einladung über XING darauf aufmerksam gemacht.

Im Oktober steht vor der WebTech noch eine Reise nach Amsterdam zur Fronteers 2010 an. Der Veranstaltungsort ist wie immer total beeindruckend. Diesmal haben PPK und seine Jungs das Pathé Tuschinski ausgewählt - das Gebäude ist schon von außen eine Wucht - aber drinnen wird's dann richtig abgefahren!

Unit Tests mit XPath

nospam@example.com (Nico Steiner) — Tue, 03 Aug 2010 22:33:27 +0200

Seit einigen Tagen setzen wir ein neues System zur Verbesserung der Qualität unserer Source-Codes ein. Wir testen mit Hilfe eines Saxon-Processors unsere Apache Maven-Module auf Verstöße gegen interne Coding Richtlinien. Genauer wenden wir auf alle XML-Dokumente eines Shops XPath-Ausdrücke an, welche sich grundsätzlich in eine der Kategorien notAllowed und isNeeded unterteilen lassen.

So sind beispielhaft folgende XPath-Ausdrücke der Kategorie notAllowed zugeordnet:

//@style (Inline-Styles sind nicht erlaubt)
//pfx:blank (Template zum Erzeugen eines Blank-Gifs ist nicht erlaubt)
//br/br (Breaks zum Erzeugen von "Absätzen" sind nicht erlaubt)

Weitere Unarten wie Inline-Events und die Verwendung von Attributen wie clear oder align fallen durch eine sukzessive Umstellung aller Projekte auf den DOCTYPE HTML 4.01 Strict mit Hilfe der HTML Validator Extension auf.

Kandidaten für die Kategorie isNeeded sind interne Link-Parameter wie

//shop:button/@linkId
//shop:button/@linkType

Dabei sind diese Tests nicht auf valides Markup ausgerichtet, sondern setzen auf einem höheren Level des Markupdesigns und der richtigen Verwendung von internen Templates an.

Generell lassen sich die XPath-Regeln pro Shop individuell festlegen. Integriert ein Shop Templates aus einem Modul, integriert dieses Modul die Regeln zur richtigen Verwendung seiner Templates automatisch.

Popups im Browserfenster mit Rahmen öffnen

nospam@example.com (Nico Steiner) — Thu, 22 Jul 2010 22:02:16 +0200

Wenn Popups über das Kontextmenü in einem neuen Tab geöffnet oder über Suchmaschinen gefunden werden, kann es zu dem Problem kommen, dass keine Verlinkung zur Startseite der Website existiert und das Popup somit eine Sackgasse darstellt. Besonders im Fall der Suchmaschinen-Verlinkung kann dies sehr ärgerlich sein, da einem potentiellen Kunden der Weg zum Angebot der Website versperrt bleibt.

Wir haben dieses Problem gelöst, indem wir mit JavaScript die Existenz von window.opener prüfen. Ist dieses Objekt nicht vorhanden, wurde die Webseite nicht im Popup geöffnet sondern wird im Browserfenster angezeigt. Über eine zusätzliche Klasse auf dem body-Element wird in diesem Fall ein umgebender Rahmen eingeblendet, welcher das ursprüngliche Popup als Webseite mit Hauptnavigation erscheinen läßt.

1&1 SmartPad als Popup

1&1 SmartPad als Webseite

Dies setzt vorraus, dass die Popups eine einheitliche Struktur aufweisen und im Idealfall die selben Dimensionen besitzen. Zur Demonstration habe ich das entsprechende Popup direkt verlinkt und eine Google Suchanfrage formuliert, welche das Popup (hoffentlich an erster Stelle) als Treffer anzeigt.

Mobile Internet Redesign

nospam@example.com (Nico Steiner) — Thu, 01 Jul 2010 08:28:33 +0200

Heute ist 1&1 Mobile Internet in einem neuen Gewand online gegangen. Damit sind fast alle 1&1 Neukundenshops auf das neue Layout umgestellt. Nicht nur optisch hat sich einiges getan - wir haben die Umstellung dazu genutzt, Benennungen und Ordnerstrukturen für Grafiken und CSS zu vereinheitlichen. Dadurch konnten jede Menge alte Grafiken und Styles gelöscht werden. Auch bei diesem Design wurde darauf geachtet, gesharte Ressourcen modular vorzuhalten und zentral als Maven-Modul für alle Shops bereitzustellen. Obwohl die neuen Layouts sehr grafiklastig sind, findet sich unter der Haube schlankes, semantisches, zugängliches Markup, das mit einem Strict-Doctype valide ausgeliefert wird. Die grafischen Headlines wurden mit Image Replacement und die Buttons und Tabs mit der Sliding Doors Technik realisiert. Die Seiten sind trotz der Größe ihrer Ressourcen sehr performant. Das CSS ist modular aufgebaut, setzt gespritete Grafiken sinnvoll ein und kommt zu einem Großteil ohne Hacks und !important Regeln aus.

Mobile Internet (neu)

Mobile Internet (alt)

Vortrag auf dem nächsten PHP Usergroup Treffen

nospam@example.com (Nico Steiner) — Sun, 13 Jun 2010 18:22:23 +0200

Ich werde mit Frank am 29. Juni noch einmal den Vortrag Frontend-Performance mit PHP halten. Wer Interesse hat, kann sich im PHP Usergroup Forum über das Treffen informieren und sich dort auch anmelden.

Thema: Frontend-Performance (mit PHP) von Nico Steiner & Frank Kleine
Datum: Dienstag den 29. Juni 2010, 19 Uhr
Location: Hochschule Karlsruhe
Gebäude M, 3. Obergeschoss, Raum 302

Die Veranstaltung ist kostenlos.

International PHP Conference Spring Edition

nospam@example.com (Nico Steiner) — Thu, 03 Jun 2010 23:16:04 +0200

Die letzten Tage nahm ich zusammen mit Stephan und Frank an der IPC in Berlin teil. Parallel dazu fand die Webinale statt, die wir ebenfalls besuchen konnten. Nach Shopping, Hooters, Sonne, Bier und Lena am Samstag ging es am Sonntag nach einer Stadtrundfahrt mit einem Workshop los. Am Montag startete dann die eigentliche Konferenz - die Session zu Augmented Editorial Design war an diesem Tag für mich das Highlight - Julian Koschwitz hat sehr anschaulich vermittelt, wie diese Technik eingesetzt werden kann. Anhand von Markern in Print-Magazinen (ähnlich einem QR-Code) werden digital Zusatzinformationen in das Magazin eingebettet, sobald man dieses mit Hilfe einer Webcam durch einen Flash-Film betrachtet. Am Montag hielt ich zusammen mit Frank eine Session zur Performance von Websites und entsprechenden Möglichkeiten in PHP. Am Abend gings dann zur obligatorischen Konferenz-Party. Da ich am nächsten Morgen kaum aus dem Bett kam, schaffte ich es nur mit Verspätung zur Präsentation von Stefan Fischerländer zu Kennzahlen der Suchmaschinenoptimierung. Die von ihm erwähnten Fakten waren für mich zum Großteil komplett neu und sehr interessant. Ich hatte mich bisher immer nur auf das für meinen Job relevante Gebiet der On-Page-Optimierung konzentriert. Was es da jedoch für tolle Möglichkeiten der Messung von eventuellen Verbesserungen gibt, war mir nicht bewußt.

Enttäuschend waren Ich® – Die eigene Identität als Marke und die Session zu zukünftigen Features von CMS. Da hatte sehr viel mehr erwartet.

Frontend-Performance mit PHP (IPC Spring Edition, Berlin)

nospam@example.com (Nico Steiner) — Thu, 03 Jun 2010 14:34:15 +0200

View more presentations from Nico Steiner.

301 Redirects für gelöschte Seiten

nospam@example.com (Nico Steiner) — Fri, 21 May 2010 23:25:53 +0200

Durch neue Möglichkeiten der internen Fehleranalyse war es uns in der letzten Woche möglich, viele 404-Seiten mit 301 Redirects auf existierende Seiten umzuleiten. Neben den internen Analysen halfen uns vor allem die Google Webmaster Tools, dort insbesondere der Bereich Crawl errors. Die Tools werden von Google kostenlos zur Verfügung gestellt - es ist lediglich eine einmalige Verifikation der Websites nötig. Die Probleme können bis zu 2 Wochen zurückverfolgt werden. Neben den aufgetretenen Fehlern werden auch Zusatzinformationen bereitgestellt.

Hilfreich ist z. B. die Aufzählung der verlinkenden Seiten, durch welche es zu 404-Fehler kommt.

SenSEO bekommt den Famous Software Award

nospam@example.com (Nico Steiner) — Thu, 20 May 2010 23:32:49 +0200

Your product "SenSEO" has been granted the "Famous Software Award" by Download.FamousWhy.com. The Famous Software Award has been initiated by Download.FamousWhy.com to recognize "Famous Software", which come up with innovative and efficient ways to reflect the best relationship with users assuring their satisfaction. [...]

Xmarks - Top 10 Site

nospam@example.com (Nico Steiner) — Fri, 21 May 2010 21:31:05 +0200

SenSEO Firefox Extension - Official Website is a Top Site in Firebug Extensions.

SenSEO - Neue Features

nospam@example.com (Nico Steiner) — Thu, 20 May 2010 23:09:43 +0200

In der neuen Version von SenSEO habe ich die Überprüfung der Keyworddichte anhand von Prozentwerten ersetzt. Statt dessen wird lediglich überprüft, ob die Keywords einige Male im Inhalt der Seite zu finden sind. Die Prozentwerte waren das mit Abstand umstrittenste Feature von SenSEO. Im Netz lassen sich diesbezüglich viele gute Quellen finden (z.B. Aaron Wall, Aarron Walter). Die neue Überprüfung orientiert sich an der Aussage von Matt Cutts zu dem Thema (0:12:40).

Weiterhin ist ein kleines Twitter Gimmick enthalten. Liefert die Bewertung der Seite ein A (mehr als 90 von 100 Punkte) wird ein Link mit einer Twitter-Message angezeigt.

Neue SenSEO Rich Snippet Vorschau

nospam@example.com (Nico Steiner) — Thu, 20 May 2010 22:59:28 +0200

Etwas später als bei Twitter angekündigt, kommt heute der Artikel zur Implementierung der Rich Snippet Vorschau in SenSEO.

Das Feature
Das Google Webmaster Central Blog hat in letzter Zeit immer wieder die Darstellung neuer Mikroformate in den Google SERPs beworben (der offizielle Name ist Rich Snippets). Zu den unterstützen Mikroformaten zählen unter anderem Personen, Ereignisse, Bewertungen oder auch Rezepte. Wie das dann aussehen kann, zeigt sich am Beispiel der Suche nach "thai green mango salad".

Das zusätzliche Bild und die Bewertungs-Skala werden von Google dargestellt, weil die Macher von about.com ihre Rezepte mit speziellen Auszeichnungen versehen haben. Um diesen und anderen Entwicklern im Vorfeld eine Möglichkeit zu bieten, diese Daten zu testen, bietet Google das Rich Snippets Testing Tool als Google Webmaster Tool an. Vor einigen Tagen hatte ich nun die Idee, dieses Tool in SenSEO 1.4.0 zu integrieren. Ein solche Vorschau bietet sich an, da SenSEO als Extension auf On-Page Optimierungen ausgerichtet ist. Läßt man von SenSEO eine Rich Snippet Vorschau der erwähnten Rezept-Seite generieren, sieht diese so aus:

Die Umsetzung
Die Umsetzung der Vorschau basiert im Wesentlichen auf dem Yahoo-Service YQL. Mit YQL ist es möglich, Inhalte einer fremden Seite zu extrahieren und in die eigene Website (oder Extension) zu integrieren. Diese Möglichkeit habe ich genutzt, um von der aktuell im Browser angezeigten Seite im Hintergund eine Vorschau mit dem Rich Snippet Testing Tool zu erstellen und diese in SenSEO zu integrieren. Die gesamte Umsetzung geschieht mit JavaScript direkt im Browser - serverseitige Scripte sind nicht nötig.

Zu Beginn wird ein XHR-Request erzeugt, welcher mit Hilfe von YQL aus dem Google Tool die Vorschau für das Rich Snippet extrahiert:

var req = new XMLHttpRequest();

req.open('GET', "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.google.com%2Fwebmasters%2Ftools%2Frichsnippets%3Furl%3D" + encodeURIComponent(content.window.location) + "%22%20and%20xpath%3D'%2F%2Fdiv%5B%40class%3D%22onebox%22%5D'", true);

Als Response wird ein XML-Dokument geliefert, in dem der Code-Schnipsel der aufgerufenen Webseite verpackt ist. Um an diesen Schnipsel zu kommen, nutze ich die XPath-Implementierung des Firefox:

var xmlDoc = req.responseXML;

var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);

var nodesSnapshot = xmlDoc.evaluate('/query/results/node()', xmlDoc, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );

Um die so entstandenen XML-Knoten in das Dokument integrieren zu können, müssen diese im letzten Schritt in einen String serialisiert werden:

var xmlString = (new XMLSerializer()).serializeToString(nodesSnapshot.snapshotItem(0));

SENSEO.Panel.panelDocument.getElementById('snippet-container').innerHTML = xmlString;

Fazit
Durch diese Lösung erspare ich mir das "Nachprogrammieren" des Rich Snippet Testing Tools. Die Generierung der Vorschau wird somit weiterhin von diesem Tool erledigt. Unterstützt Google in Zukunft neue Mikroformate, werden diese auch sofort in SenSEO angezeigt. Ein Schwachpunkt dieser Lösung ist die Selektion des Code-Schipsels anhand von HTML-Elementen. Sollten die Entwickler von Google den Aufbau ihres Dokuments ändern, könnte die Selektion von einer Minute zur Nächsten scheitern und die Vorschau wäre hinüber. In einem solchen Fall ist eine neue Version von SenSEO mit angepasster Selektion nötig.

Twitter-Multikulti

nospam@example.com (Nico Steiner) — Mon, 10 May 2010 20:34:33 +0200

Die letzten Tage hat es Twitter-Followers gehagelt. Schön zu sehen, dass es bei den SenSEO-Interessierten international zugeht. Allein die Follower der letzen Tage kommen aus Deutschland, USA, Indien, Holland, Israel und Japan.

Auch bei der Alexa-Statistik geht es multikulturell zu:

Die Besucher-Landkarte von Google Analytics zeigt, dass sich die Besucher von www.sensational-seo.com auf die ganze Welt verteilen:

whats wr6ng w5th 0y 2eyb6ard

nospam@example.com (Nico Steiner) — Sun, 09 May 2010 22:57:13 +0200

Nein, ich hab nicht zu viel getrunken. Gerade eben habe ich mit dieser Suche bei Google in einem Forum die Lösung für die spontan aufgetretenen Probleme mit meiner Tastatur gefunden. Neben einigen erwartbaren Kommentaren war dort auch die Lösung zu finden:

> Turn off your numlock, faggit.

Highcharts - Diagramme mit JavaScript erstellen

nospam@example.com (Nico Steiner) — Mon, 03 May 2010 00:44:42 +0200

Ich habe eben die Bücher Presentation Zen und Slide:ology durchgeblättert. Highcharts ist eine JavaScript-Library, welche es erlaubt, Diagramme in dem Stil zu erstellen, wie er von den Büchern empfohlen wird.

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Rezension: Bekenntnisse eines Redners

nospam@example.com (Nico Steiner) — Sun, 02 May 2010 20:04:12 +0200

Ich habe das Buch von Scott Berkun in der deutschen Übersetzung von Peter Klicman in Vorbereitung auf die International PHP Conference gelesen.

Scott warnt bereits im Prolog davor, dass sein Buch für all jene ungeeignet sein könnte, die nicht immer gern die Wahrheit hören. Dieser Warung läßt er 10 Kapitel folgen, die persönlich und eigenwillig seine Erfahrungen und Erlebnisse als Redner schildern. Daraus leitet er zahlreiche Ratschläge für Neulinge und Profis ab, die sich, wie er, auf ein Podium begeben. Scott nimmt die Angst vor Anfängerfehlern, indem er an Beispielen zeigt, dass Fehler ständig passieren und diese nur allzu natürlich sind ("Vermeiden Sie den Fehler, keine Fehler machen zu wollen."). Er gibt Tipps, wie man mit der Nervosität umgehen kann, die sich in Konfrontation mit einer großen Menschenmenge (auch bei ihm) einstellt. Auf amüsante Weise unternimmt er dabei einen Ausflug zu den Höhlenmenschen und der Organisation unseres Gehirns. Er schreibt über häßliche Kronleuchter und großartig konzipierte Amphitheater, wenn er über schwierige Räume aufklärt. Auch mit der Höhe seines Jahreseinkommens hält er nicht hinterm Berg, und zeigt, was andere in diesem Business verdienen. Der Leser erfährt weiterhin, wie er als Redner den Kontakt zum Publikum aufbaut und aufrecht erhält und welche wichtige Rolle der Aufbau der Präsentation dabei spielt. Amüsante Einblicke in Auftritte beim Fernsehen, persönliche Bekenntnisse des Autors und "handwerkliche" Tipps zu Fernbedienung, Kamera und Mikrofon runden das Buch ab.

"Bekenntnisse eines Redners" ist schonungslos ehrlich, unkompliziert und mit viel Witz geschrieben. Neben zahlreichen Fakten und sehr hilfreichen Einblicken und Ratschlägen erfährt der Leser viele persönliche Einblicke in die Arbeit und das Leben eines Redners. Diese Kombination macht meiner Meinung nach die Stärke des Buchs aus. Scotts Humor hat mir nicht nur einmal irritierte Blicke eingebracht, wenn ich kichernd und glucksend in der Ecke eines Cafes in dem Buch gelesen habe.

Erfolgreiche Ladezeiten-Optimierung

nospam@example.com (Nico Steiner) — Wed, 28 Apr 2010 06:49:01 +0200

Es ist schön zu sehen, wie unsere Bemühungen, die Ladezeiten unserer Webseiten zu verkürzen, Wirkung zeigen. Dies zeigen nicht nur Tools wie YSlow oder Page Speed, sondern auch Tools wie die Google Webmaster Tools. Diese analysieren in ihrem Lab-Bereich die Ladezeiten von Webseiten und veröffentlichen neben einer Statistik der vergangenen Monate auch Empfehlungen für weitere Optimierungen. Diese Statistiken zeigen über die letzten Monate für sämtliche unserer Projekte eine deutliche Verbesserung der Ladezeiten.

Die Statistik geht nur bis zum Dezember des letzten Jahres zurück. Einige Optimierungen fanden schon vorher statt, der initiale Wert dürfte also noch sehr viel größer als 3 Sekunden sein. Und wie die Zahlen des Artikels The performance business pitch von Stoyan Stefanov zeigen, haben solche Verbesserungen einen großen Einfluß auf die User Experience und das Kaufverhalten des Besuchers einer Website.

Wie wir das geschafft haben, läßt sich in diversen Artikeln hier im Blog nachlesen.

GWT - Top search queries

nospam@example.com (Nico Steiner) — Mon, 26 Apr 2010 23:27:55 +0200

Google hat in den Webmaster Tools die Statistik zu den Top search queries ordentlich erweitert. Statt weniger, wager Daten stehen jetzt detaillierte Statistiken zu Impressions und Clickthroughs in Abhängigkeit zur Position in den SERPs zur Verfügung. Wer hätte gedacht, dass Google solche Daten eines Tages in dieser Genauigkeit so bereitwillig veröffentlicht?

Xsticky-Addon - Sticky Notes für den Firefox

nospam@example.com (Nico Steiner) — Sun, 25 Apr 2010 23:41:14 +0200

Das Xsticky-Addon erlaubt im Firefox das Platzieren von Sticky Notes auf einer beliebigen Webseite. Ich schreibe darüber, da mir diese Idee vor einiger Zeit auch durch den Kopf ging (wir hatten vor 2 Jahren etwas ähnliches als Teil unserer Entwicklungsumgebung implementiert). Von der Entwicklung eines entsprechenden Firefox-Addons habe ich dann aber abgesehen - der Aufwand schien mir einfach zu groß. Das Xsticky-Addon steht in der aktuellen Version erst am Anfang einer denkbar aufwändigen Entwicklung. Die Todo-Liste auf der Mozilla Addon-Seite läßt erahnen, wo die Reise hingehen könnte. Ich bin gespannt, ob Swen Burdack das nötige Durchhaltevermögen zeigt.

Hier eine kleine Liste von Gedanken/Problemen, die mir damals vor allem in Hinblick auf den Austausch der Notes durch den Kopf gingen:

Wie bestimme ich, wer die Note zu lesen bekommt? (Organisation von Teams/Projekten/Zuständigkeiten)
Wie findet diese Organisation statt? (Weboberfläche, Autorisierung, Rechtervergabe)
Wie gehe ich mit unterschiedlichen Seitenzuständen um? Welchen Identifier für den Zustand einer Seite kann ich nutzen? Was mache ich mit Seiten, die sich innerhalb eines Flows befinden (Kundendaten etc.)?
Wie kann ich solch ein Addon monetarisieren? (Bis zu 3 Projekte/Personen/Teams kostenlos, dann zahlen?) Wie stelle ich dann eine 100%ige Verfügbarkeit sicher? Und die ganze Zahlungsabwicklung

Ich fänd' es toll, wenn der Entwickler hierfür Lösungen finden würde. Dann wird Xsticky vermutlich ein großer Erfolg.

Mozilla HeadsUpDisplay

nospam@example.com (Nico Steiner) — Sun, 25 Apr 2010 21:44:24 +0200

Mozilla plant die Fehlerkonsole durch die interaktive Konsole HeadsUpDisplay zu ersetzen. Damit soll Entwicklern im Firefox ein sehr genauer Blick auf die Vorgänge während des Aufbaus der Webseite und auf nachfolgende Veränderungen der Seite ermöglicht werden.

Unter anderem soll das Tool folgende Informationen anzeigen:

Alle Arten von Fehlern (Error Console)
Netzwerkaktivitäten (LiveHTTPHeaders)
JavaScript Events
DOM/HTML Manipulation (Firebug)

Weitere geplante Features sind:

Interaktive Kommandozeile zur Ausführung von JavaScript
Logging-API ähnlich der Firebug Konsole
Inspizieren von Objekten

Momentan verteilen sich viele der Features auf verschiedene Extensions. Es sieht so aus, als wollte Mozilla diese im HeadsUpDisplay nativ vereinen.

Mozilla war mit Entwickler-Tools in der Vergangenheit oftmals Vorreiter. Allerdings hat Apple diesmal mit der neuen Version des WebKit Inspector in beeindruckender Weise vorgelegt. Auch Google Chrome hat mittlerweile sehr ausgereifte Extensions zu bieten.

Es bleibt abzuwarten, ob Mozilla den Ruf des Firefox als besten Browser zum Entwickeln von Webseiten gegen Apple und Google in Zukunft verteidigen kann.

Nachtrag zum JavaScript Error Tool

nospam@example.com (Nico Steiner) — Sun, 25 Apr 2010 21:01:18 +0200

Es gibt nun auch einen Online-Service ExceptionHub, welcher JavaScript-Fehler trackt und über eine Weboberfläche, per E-Mail oder als RSS-Feed kommuniziert. Weitere Features des Service sind ein stack trace (feine Sache, aber wie in den Kommentaren zu lesen ist, nicht ganz unkritisch implementiert), die Gruppierung von Fehlern und eine Unterscheidung zwischen Entwicklungs- und Produktionsbetrieb. Das Prinzip ähnelt dem des J.E.T., welches wir für die Analyse von JavaScript-Fehlern einsetzen.

Unsere Erfahrungen seit Einführung des J.E.T. im Dezember des letzten Jahres sind durchaus positiv. Nach einer anfänglichen Bugfix-Phase haben sich die Fehler auf ein moderates Maß eingependelt. Viele der jetzt noch auftretenden Fehler sind auf vorzeitig abgebrochene Ladevorgänge und ähnliche, nicht behandelbare Fehler, zurückzuführen. Sehr hilfreich ist das unmittelbare Feedback über neu auftretende Fehler nach Onlinegängen. Hier können wir entsprechende Maßnahmen sehr viel schneller als früher ergreifen.

Ein stack trace, wie ihn ExceptionHub bietet, wäre auch für das J.E.T. wünschenswert. Momentan ist es sehr frustrierend, die Ursache für so ungenaue Fehler wie "target is null" zu finden.

Grillsaison geht los

nospam@example.com (Nico Steiner) — Sun, 25 Apr 2010 19:50:11 +0200

Der Chef heizt nächsten Dienstag den Grill wieder an. Höchste Zeit nach passenden Rezepten zu schauen. Letztes Jahr haben mich die Rezepte für Polenta-Paprika und für gegrillte Feigen besonders begeistert. Beide Rezepte sind bei kulinario.org zu finden. Bei EatSmarter! gibt es ebenfalls jede Menge Anregungen für die nächste Grillparty.

Joggen - erste Bilanz

nospam@example.com (Nico Steiner) — Mon, 19 Apr 2010 09:00:29 +0200

Jetzt hab ich ein paar Runden hinter mir und es wird Zeit für eine erste Bilanz. Das Laufen macht riesig Spass. Morgens bei Sonnenaufgang vor der Arbeit ins Grüne und bei Vogelgezwitscher und klarer Luft durch den Park - großartig! Jedes Mal geht's ein Stück weiter - heute von meiner Wohnung zum Schloss und wieder zurück. Das sind immerhin fast 5 Kilometer. Dafür, dass ich das noch nicht mal einen Monat mache, und vorher 15 Jahre keine 100 Meter am Stück gelaufen bin, ist das bestimmt nicht übel. Mit dem Gmaps Pedometer habe ich die Strecke mal markiert - dabei ist schön zu sehen, dass ein Großteil der Route durch Parks führt. Nördlich vom Schloss schließt der Hardtwald an - da ist also noch ordentlich Luft und ich kann die Distanz beliebig verlängern.

Mathematisches Ende des IE6 und IE7

nospam@example.com (Nico Steiner) — Fri, 16 Apr 2010 11:10:43 +0200

Pingdom hat Statistiken zum Update der häufigsten Browser veröffentlicht. Meine besondere Beachtung galt den Zahlen der verschiedenen Internet Explorer Versionen.

Wenn man die einfache Annahme trifft, dass die Zahl der IE6 und IE7 weiterhin linear abnimmt, kommt man beim IE6 auf eine Steigung von -0,23 und beim IE7 auf -0,32. Das würde bedeuten, dass das mathematische Ende des IE6 noch in diesem Jahr im Dezember gekommen wäre. Der IE7 würde nach dieser Formel im März 2013 von der Bildfläche verschwinden.

Leider zeigen die Statistiken der übrigen Browser, dass die Zahlen gegen Ende exponentiell abnehmen - bleibt zu hoffen, dass sie vorher in den Bereich vernachlässigbarer Werte sinken.