. .
CREATE OR DIE Special Downloads Shop webinale

Schauplatz

Artikel
  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

August 2010

Performance als Schlüssel zum Erfolg

Was Nachrichten-Portale wie Spiegel und Bild besser machen können

(Link zum Artikel: http://www.createordie.de/cod/artikel/3249)

Welche Faktoren beeinflussen Ihre Entscheidung, ob Sie eine Webseite gut oder schlecht finden bzw. wie lange Sie auf dieser Seite verweilen? Einerseits ist es natürlich der Inhalt der auf dieser Webseite angeboten wird – und ob dieser Inhalt für Sie von Interesse ist. Andererseits ist es die Geschwindigkeit mit der Sie durch die einzelnen Seiten navigieren können. Ich habe die zwei größten deutschen Nachrichtenportale auf Performance hin überprüft.

Text: Andreas Grabner

High-Speed-Internet und geschwindigskeitsoptimierte Seiten bringen uns den Vorteil, dass wir schneller als je zuvor Zugriff auf unsere E-Mails, Tweets, Sportergebnisse, Suchergebnisse oder die aktuellsten Nachrichten haben. Wir wurden in den letzten Jahren regelrecht verwöhnt und daher ist es auch verständlich, dass wir ungeduldiger werden, wenn eine Webseite länger lädt, als wir es von anderen Seiten gewohnt sind. Google hat aus eben diesem Grund seine Suchergebnissberechnung angepasst. Die Geschwindigkeit einer Seite – d.h.: wie lange es dauert von der Eingabe der URL bis zum vollständigen Laden – ist nun einer der Faktoren die entscheiden, ob eine Webseite weiter oben oder weiter unten im Suchergebnis zu finden ist.

Aus diesem Grund stand die diesjährige Velocity 2010 Conference unter dem Motto „fast by default“. Dort wurde deutlich, wie sehr Web Site Performance Auswirkungen auf das Nutzerverhalten und somit auch auf den Erfolg einer Webseite hat. Im letzten Jahr wurden erstmals konkrete Zahlen zum Thema Auswirkung von Performance auf Businesserfolg veröffentlicht: Sowohl Microsoft (bing), Yahoo als auch Google präsentierten Ihre Studienergebnisse, in denen es deutlich wurde, das langsamere Seiten automatisch weniger Klicks auf Werbebanner und daher weniger Umsatz bringen. Darüber hinaus hat Shopzilla seinen internen Resultate präsentiert: sie belegen, wie positiv sich eine schnellere Webseite auf deren Verkäufe auswirkte.

Wer ist schneller? Wer ist besser? Bild.de oder Spiegel.de?

Diese beiden Seiten sind laut Alexa die zwei beliebtesten Nachrichten-Webseiten Deutschlands. Beide haben mit Sicherheit eine unterschiedliche Leserschaft; beruhend auf der Aufbereitung der Nachrichten. Basis meiner Analysis ist daher nicht der konkrete Inhalt sondern die Art und Weise wie beide Seiten mit allgemeinen Best Practices zum Thema Web Performance Optimization umgehen. Es handelt sich in beiden Fällen um Seiten mit multimedialen Inhalten. Beide Seiten machen Geld mit Online-Anzeigen; daher liegt es in ihrem Interesse, dass viele User die Webseiten besuchen, lange auf der Webseite bleiben und regelmässig auf die Werbebanner klicken. Und wie wir gelernt haben, ist die Geschwindigkeit ausschlaggebend für die Verweildauer der Benutzer.

Es stehen uns 3 sehr gute und freie Tools für unsere Analyse zur Verfügung:

Alle 3 Tools analyiseren einzelne Webseiten auf Basis der Best Practices Dokumente von dynaTrace, Yahoo und Google und liefern eine gute Übersicht über Regeln die eingehalten bzw. nicht eingehalten wurden. Für meine Analyse verwende ich dynaTrace.

Das Testszenario

Sowohl bei www.bild.de als auch www.spiegel.de habe ich mir zweit konkrete Seiten angesehen: die Startseite und die Übersichtsseite für Politthemen. Wichtig für mein Testszenario war es, den Browser-Cache zu leeren, um zu testen, wie schnell diese Seiten für "Erstbenutzer" sind. Es ist ratsam, den selben Test ein zweites Mal durchzuführen – dann mit einem bereits gefüllten (aka Primed) Cache.

Kommen wir im Folgenden also zu den Resultaten.

 

Kommentare
Gravatar KMB 03.08.2010
um 16:46 Uhr
Die Screenshots zeichnen sich durch eine gewisse "Nicht-Größe" aus. Ist das beabsichtigt? #zitieren
Gravatar Andreas Grabner 03.08.2010
um 18:00 Uhr
Sorry das die Screenshots hier nicht in voller Grösse zur Verfügung stehen. Der Artikel ist auch auf Englisch unter http://blog.dynatrace.com/2010/08/03/performance-as-key-to-success-how-online-news-portals-could-do-better/ verfügbar. Auf diesem Blog kann man auf die Bilder klicken um eine grössere Version davon zu sehen #zitieren
Gravatar Trepper 04.08.2010
um 13:10 Uhr
Probleme wie die beschriebenen bekommt man, wenn sich Entwickler zu weit vom zugrunde liegenden Protokoll (HTTP) entfernen. Man kann nur hoffen, dass REST von immer mehr Entwicklung beachtet wird. #zitieren
Gravatar Daniel 26.08.2010
um 11:01 Uhr
Neben mergen kann man die css- / js - Dateien noch komprimieren und ggf. gzipped ausliefern. Die modernen Browser unterstützen das meist ohne Probleme. Zusätzlich kann man Bilder auch einfach als data-Element in css setzen. Dadurch dass sich Text leichter komprimieren lässt als Bilder hat man auch hier einen Vorteil. Problem ist nur dass (wie so oft) der IE nicht mitspielt.
Es gibt noch zig andere Ansätze. Der Bericht ist aber super aufgegliedert und sollte helfen das Thema bei vielen etwas zu sensibiliseren.
#zitieren
Gravatar Anni 08.10.2010
um 00:23 Uhr
Mir will nicht einleuchten, warum ich js dateien mergen soll. 4 js dateien á 5kb das stück machen zusammen eine á 20kb. warum sollte es einen unterschied machen, 20kb aufgeteilt und nur bei bedarf auszuliefern oder direkt gleich alles in einem runterladen zu müssen? ich binde die css- und js dateien nur auf den seiten ein, auf denen sie benötigt werden. ist das nicht eher sinnvoll? #zitieren
Top Kommentar der Woche
Gravatar Andreas Grabner 08.10.2010
um 07:27 Uhr
Das mergen von js-dateien bringt vorteile - muss aber genau geprüft werden. Mergen reduziert zum ersten mal die anzahl der HTTP Roundtrips. Weiters kann die JS-Engine auf einen schlag das JS verarbeiten anstatt das in mehreren schritten zu tun. Bei jedem JS File das geladen und ausgeführt wird muss der Browser sicherstellen das keine anderen aktivitäten die ausführung des JS beinflussen, z.b.: muss sichergestellt werden das das DOM in der zwischenzeit nicht geändert wird. Diese "Context Switches" sind zwar nur bedingt aufwendig - trotzdem sind sie nicht zu vernachlässigen.
In punkto deployment haben sie aber recht. mehrere files haben den vorteil gezielt codeteile auszutauschen. daher muss man hier gezielt entscheiden ob merging sinn macht. In meiner arbeit mit web 2.0 unternehmen hab ich seiten angetroffen die bis zu 50 js files auf einer seite hatten. hier hat sie das merging definitiv eine performanceverbesserung gebracht
#zitieren
Top Kommentar der Woche
Gravatar Tino B. 11.10.2010
um 12:39 Uhr
Hallo, ich bin Webentwickler speziell für Joomla!-basierte Websites. Ich kann bestätigen, dass zumindest die Komprimierung von CSS- und JS-Dateien einen spürbaren Unterschied in der Ladezeit der Seite ausmacht. Allerdings handle ich es auch so, dass nur die im jeweiligen View benötigten CSS- und JS-Dateien vom diesem View eingebunden und deployed werden. Im globalen CSS stehen nur Regeln, die sich über die gesamte Seite erstrecken. So meine ich, zu verhindern, dass jedes Mal ein gigantisch großes CSS verarbeitet werden müsste, was vermutlich längern dauern würde - analog für JS.

Interessant war beim Test von z.B. YSlow, dass empfohlen wurde, die insgesamt 20 CSS und 30 JS zu mergen. Diese liegen jedoch nur auf dem Server, sind aber niemals gleichzeitig eingebunden. YSlow überprüft also scheinbar die Verzeichnisinhalte und nicht die im Dokumentenkopf registrierten CSS und JS und erteilt seine Empfehlungen folglich auf dieser Grundlage statt auf Basis einer Messung. Das halte ich für fragwürdig.

Was mir nicht verständlich erscheint ist, wie gzip komprimierte Dateien, welche doch auch mit dieser Endung gespeichert werden, vom Dokument wieder entpackt werden sollen, um damit arbeiten zu können!?
#zitieren
Neuer Kommentar
  • Gute Kommentare werden belohnt.
  •   (optional)
  •   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
  •    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
  • -+
Tags
Werbung
performance,ie,firefox,yslow,dynarace,pagespeed,chrome,