Mini-Suchmaschine mit Frontend-Technologien
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.
Gastartikel im Webstandard-Blog
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.
Vortrag auf der WebTechCon 2010
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.
Content Delivery Server online!
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!
Speaker auf dem PHP World Kongress 2010
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.
Speaker auf der WebTech 2010
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
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
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 
Archive
- Oktober 2011 (1)
- Oktober 2010 (2)
- September 2010 (4)
- August 2010 (3)
- Juli 2010 (2)
- Juni 2010 (3)
- Mai 2010 (7)
- April 2010 (4)
- März 2010 (10)
- Februar 2010 (7)
- Januar 2010 (4)
- Dezember 2009 (5)
- November 2009 (3)
- Oktober 2009 (8)
- September 2009 (2)
- August 2009 (9)
- Juli 2009 (7)
- Das Neueste ...
- Älteres ...
