Nervende Webseiten

Webseiten nerven. Jedenfalls dann, wenn man zwischen dem Klick und dem Anzeigen der Seite auch gerne mal einen Spaziergang mit dem Hund um den Block machen könnte.

34 Prozent aller Internet-Surfer (Consumer) geben einer Webseite ganze zehn Sekunden, bevor sie wegklicken und sich bei der Konkurrenz bedienen. Ungeduldige sechs Prozent laufen schon nach drei Sekunden Wartezeit über.

Nun ja, ich weiss zwar nicht, warum es dazu einer neuen Studie bedurfte, denn diese Tatsache ist seit den Urzeiten des Webs bekannt. Aber falsch ist das heute trotzdem immer noch nicht. Webseiten, die gefühlte Ewigkeiten brauchen, bis sie geladen sind, nerven einfach. Webseiten wurden schon immer voll gepackt mit den neuesten Spielsachen, nur damit der Webdesigner zeigen konnte, dass er das auch kann. Der Webdesigner suggeriert Fachkompetenz und beeindruckt arglose Kunden. Das fing spätestens an, als man mit HTML 2.0 auch Bilder in Webseiten integrieren konnte. Da musste plötzlich Jeder zeigen, dass er dieses ganz neue Feature auch schon drauf hatte. Unabhängig davon, was zur Informationsübermittlung nötig war, wurden Bilder sehr schnell auch rein dekorativ eingesetzt, weil es ja so cool aussieht. Daran hat sich bis heute Nichts geändert, nur, dass es heute noch mehr sein muss, und nicht nur Bilder, sondern auch Flash, Filme, Musikgedudel, Animationen und was auch sonst immer Aufmerksamkeit beschert. Man argumentiert damit, dass das Internet heute doch gegenüber früher sehr viel schneller geworden ist, und vergisst dabei, dass die benötigte Bandbreite dabei überproportional gewachsen ist.

Dabei gibt es ein paar Hilfsmittel, mit denen man das Laden einer Seite drastisch beschleunigen kann. Und es gibt Designrichtlinien des W3C, mit denen das Laden überflüssiger Dekoration auch ganz unterbleiben kann, was das Laden der Seite weiter dramatisch beschleunigt. Denn was soll zum Beispiel das ganze aufwendige visuelle Design einer Seite, wenn diese von einem Blinden aufgerufen wird? Trotzdem muss der ganze Mist auch für einen Blinden geladen werden, egal, ob der damit was anfangen kann oder nicht. Das muss nicht sein. Deshalb gibt es die Designrichtlinie vom W3C, die besagt, dass in die HTML Datei nur Inhalt und Bedeutung (Semantik) kommt, das ganze Aussehen (also auch die Dekoration) kommt in die CSS Datei. Das Laden dieser Datei kann ein Browser auch komplett unterlassen. Daneben haben CSS Dateien noch weitere Vorteile. So halten sie das Design einer Seite zentral, so dass bei einer Änderung nur noch diese Seiten geändert werden müssen, und nicht mehr die HTML Dateien. Und solch eine CSS Datei muss nur ein mal geladen werden und kann danach bei den Folgeseiten aus dem Cache geholt werden. Auch das beschleunigt nochmals sehr.

Cache

Um eine beliebige Datei (auch ein Bild, eine Animation, ein Flash oder was auch immer) aus dem Cache holen zu können, muss diese Datei allerdings auch dort sein. Und der Browser muss wissen, wie schnell sich das Original ändert. Also angenommen, die Datei, um die es geht, wäre z.B. ein Hintergrundbild. Sowas ändert sich normalerweise nicht so arg schnell. Per Defaulteinstellung gehen die Browser und ggf. auch die Server davon aus, dass sich so eine Datei wohl etwa eine Stunde lang nicht ändert. Eine Stunde? Also, bei mir ändert sich dieses Hintergrundbild wenigstens 1 Jahr lang nicht. Kann man das dem Browser mitteilen? Man kann! Für den Apache gibt es dazu die .htaccess Datei. In dieser kann man für jedes Verzeichnis und für jede Datei und/oder jeden Dateityp angeben, wie lange sich diese Datei voraussichtlich nicht ändern wird. Meine sieht z.B. so aus:

Für die Details, was man da wie konfigurieren kann, verweise ich auf die Apache Dokumentation. Damit die Seiten dieses Blogs hier auf dem Bildschirm des Surfers etwas zügiger aktualisiert werden, gibt es in dem Verzeichnis eine eigene .htaccess, die dann diesen Inhalt hat:

Also alle 2 Stunden könnte ein neuer Artikel erscheinen. In dem Verzeichnis werden aber nur die (X)HTML und RSS Dateien neu eingestellt, die Bilder bleiben bei einer sechsmonatigen Ablaufzeit. Mit diesen Einstellungen erreiche ich trotz des graphisch nicht ganz und gar trivialen Designs sehr flotte Ladezeiten.

All diese schönen Beschleunignungsmöglichkeiten (es gibt noch mehr, z.B. Wiederverwendung von Graphiken) kann ein Webdesigner oder ein Webmaster natürlich auch torpedieren. Für jede Datei, die dynamisch erzeugt wird (aus einer Datenbank zum Beispiel) gilt, dass die Ablaufzeit Null ist. Solch eine Datei kann also gar nicht gecachet werden. Für die üblichen Blogs bedeutet, das, dass die jeweiligen HTML Dateien jedes einzelne Mal neu generiert und neu über die Leitung geschickt werden. Selbst der Artikel vom letzten Jahr, der sich mit nahezu 100% Wahrscheinlichkeit nie mehr ändern wird, selbst dieser wird immer noch als so hochdynamisch erachtet, dass er immer noch dynamisch aus der Datenbank erzeugt wird und dynamisch über die Leitung geschickt wird. Solche Dynamik torpediert jede Cache-Strategie und verlangsamt das Surfen.

Eine weitere Rolle spielt natürlich die Belastung des Servers. Hoch belastete Server wie die Gravatar Server brauchen nun mal Zeit, bis sie die Anfrage bedienen können. Das ist in diesem Fall aber nicht unbedingt schlimm, da subjektiv dieser Langsamkeitseindruck nur bis zu dem Punkt entsteht, ab dem man die Seite nutzen kann. Wenn während des Lesens die Gravatare irgendwann nachgereicht werden, ist das nicht schlimm. Es sei denn, durch das Rendern des Gravatars springt der Inhalt der Seite woanders hin. Um das zu vermeiden, muss nur in der HTML Datei die Größe des Bildes mit angegeben werden. So kann, bis der Gravatar verfügbar ist, ein Platzhalter in der richtigen Größe angezeigt werden. Dadurch muss der Text nicht mehr neu gerendert werden, die Seite bleibt während des Ladens der Gravatare nutzbar.

Entscheidend ist, ab wann die Seite nutzbar ist. Nehmen wir einmal ein sehr krasses Beispiel an. Nehmen wir an eine Seite mit einem schwarzen Hintergrund und einer weissen Schrift. Nehmen wir an, der schwarze Hintergrund wird durch eine Graphik erreicht. Was ist zu sehen, nachdem die HTML Datei geladen wurde, aber noch nicht die aufwendige Graphik? Nun, weisser Text auf weissem Hintergrund. Hier wird die Seite also erst nutzbar, wenn die Hintergrundgraphik auch vollständig geladen ist. Das muss nicht sein. Man kann zusätzlich auch den Hintergrund per CSS einfach als schwarz definieren. Dann wird anfangs nicht die aufwendig gestaltete schwarze Hintergrundgraphik gezeigt, die Seite sieht anfangs nicht ganz so toll aus, aber sie ist bereits nach dem Laden der HTML und CSS Datei nutzbar. Und nur diese Zeit bestimmt das subjektive Timeout des Surfers. Ein Nachreichen der schönen Hintergrundgraphik stört dann nicht mehr.