Jens Jacobsen
benutzerfreun.de
@benutzerfreund
Lahme Websites 

– ein Konzepter-Problem
ux congress 2015

Frankfurt, 19.10.2015
Lade Folie 2 von 299…
Lade Folie 3 von 299…
Lade Folie 12 von 299…
Lade Folie 299 von 299…
Schöne neue Technikwelt
Fortschritt
Courtesy of Ray Kurzweil and Kurzweil Technologies, Inc.
Stillstand & Rückschritt
Nov 2010
Titel
0 %
25 %
50 %
75 %
100 %
0–1 1–2 2–3 3–4
1 %4 %15 %
79 %
Seitengröße bei archive.org in MB
Titel
0 %
25 %
50 %
75 %
100 %
0–1 1–2 2–3 >3
17 %14 %
28 %
41 %
Okt 2015
Nov 2010
Titel
Bilder
68 %
Sonstige
4 %
Scripts
18 %
CSS
4 %
HTML
6 %
Anteil der Seitenelemente an Gesamtgröße bei archive.org
Okt 2015
Titel
Video
8 %
Bilder
63 %
Fonts
5 %
Scripts
17 %
CSS
4 %
HTML
3 %
0,7 MB 2,0 MB
Website
Ladedauer
(DSL) [Sek]
visuell vollständig
(DSL) [Sek]
Ladedauer
(3G) [Sek]
visuell vollständig
(3G) [Sek]
ebay.de 6,8 3,1 27,8 10,9
amazon.de 9,9 4,8 28,5 15,9
de.wikipedia.org 1,4 1,1 4,9 5,5
faz.net 11,1 10,0 39,0 34,9
spiegel.de 8,8 5,8 26,1 19,9
paypal.com 7,9 6,9 25,7 25,7
Ladezeit Webseiten
0
5
10
15
20
Alles nicht so schlimm?
Warum Geschwindigkeit zählt
• Yahoo: 0,4 Sekunden schneller = 9% mehr Traffic
• Amazon: 0,1 Sekunden schneller = 1% mehr Umsatz
• Shopzilla: 5 Sekunden schneller = 25% mehr
Seitenaufrufe, bis zu 12% mehr Umsatz
• AOL: schneller = mehr Seitenaufrufe/Besuch
• Aberdeen Group: 1 Sekunde langsamer = 11% weniger
Seitenaufrufe, 7% weniger Konversion
• Google: 2% langsamer = 2% weniger Nutzung der Suche
• Ladegeschwindigkeit = Rankingfaktor
Wahrnehmungsschwelle:
0,1 Sekunden
Wartezeit:
>2 Sekunden
Neue Aufgabe:
10 Sekunden
Was können Konzepter tun?
Abwarten?
Die Technik soll’s richten.
• Netzwerktechnologie/Endgeräte/-Anschlüsse
• Kompression
• Caching
• Content Delivery Network
• http2
Mithelfen!
1. Schritt zur Besserung:
Erkenntnis
• webpagetest.org
• YSlow
2. Schritt:Wissen schaffen
Lara Hogan: 

Designing for Performance. 

Weighing Aesthetics and Speed
The RAIL Performance Model
Web Fundamentals, Google
Developers
3. Schritt: Konzeption ändern
Erst Nachdenken.
Dann Bilder &Video vorsehen.
Programmierer so früh wie
möglich einbinden
So früh wie möglich Prototypen
mit echtem Code testen
Unter Real-Bedingungen testen
4. Schritt: Performance-Budget
Twitter: @benutzerfreund
Blog: www.benutzerfreun.de
Danke schön.

Lahme Websites - ein Konzepterproblem. ux congress 2015