Warum werden Websites immer langsamer? Weil wir Konzepter sie langsamer machen.

1. Jens Jacobsen
benutzerfreun.de
@benutzerfreund
Lahme Websites
– ein Konzepter-Problem
ux congress 2015
Frankfurt, 19.10.2015

2. Lade Folie 2 von 299…

3. Lade Folie 3 von 299…

4. Lade Folie 12 von 299…

5. Lade Folie 299 von 299…

6. Schöne neue Technikwelt

7. Fortschritt

16. Courtesy of Ray Kurzweil and Kurzweil Technologies, Inc.

17. Stillstand & Rückschritt

18. 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

19. 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

24. 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

25. Ladezeit Webseiten
0
5
10
15
20

26. Alles nicht so schlimm?

27. 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

28. • Google: 2% langsamer = 2% weniger Nutzung der Suche
• Ladegeschwindigkeit = Rankingfaktor

30. Wahrnehmungsschwelle:
0,1 Sekunden

31. Wartezeit:
>2 Sekunden

32. Neue Aufgabe:
10 Sekunden

33. Was können Konzepter tun?

34. Abwarten?

35. Die Technik soll’s richten.
• Netzwerktechnologie/Endgeräte/-Anschlüsse
• Kompression
• Caching
• Content Delivery Network
• http2

36. Mithelfen!

37. 1. Schritt zur Besserung:
Erkenntnis

38. • webpagetest.org
• YSlow

39. 2. Schritt:Wissen schaffen

41. Lara Hogan:
Designing for Performance.
Weighing Aesthetics and Speed

42. The RAIL Performance Model
Web Fundamentals, Google
Developers

43. 3. Schritt: Konzeption ändern

44. Erst Nachdenken.
Dann Bilder &Video vorsehen.

47. Programmierer so früh wie
möglich einbinden

48. So früh wie möglich Prototypen
mit echtem Code testen

49. Unter Real-Bedingungen testen

50. 4. Schritt: Performance-Budget

53. Twitter: @benutzerfreund
Blog: www.benutzerfreun.de
Danke schön.