Talk @ WebTechCon 2015 in Munich

1. WebTechCon 2015
Performance and UX
Image: flickr.com/.../projectapolloarchive/@webinterface

2. Peter Rozek
Work at ecx.io (Digital Agency)
Skills:
UX
Usability
Accessibility
Frontend
@webinterface

3. @webinterface
We have slow
connection
speeds
Image: http://conservativepost.com/

4. @webinterface
Slow pages lose users!
„If a page load takes more than
two seconds, 40% are likely to
abandon that site.“
Source: Data Monday: E-commerce Performance

5. @webinterface
„When Shopzilla decreased load
time by 4 sec, they saw a 25%
increase in page views, and
conversion rates went up 7-12%.“
Source: Mobilism: High Performance Mobile

6. @webinterface
1007 kb
86 Resources
1354 kb
108 Resources
Spring 2013 Spring 2015
grown by
26%
Source: Radware_SOTU_Report_Spring_2015.pdf

7. @webinterface
Houston we have a
problem!
Bild: http://jasonrenshaw.typepad.com/

8. @webinterface
Knowing your
destination and
being lost

9. @webinterface
Do you know
your why?
Does your client know
its why?
Source: The Six Elements of Focus to Improve Your Craft

10. @webinterface
Clarity Focus
Source: The Six Elements of Focus to Improve Your Craft

11. @webinterface
Performance
is a essential
design feature

12. @webinterface
Performance is
design´s best friend,
not its enemy

13. @webinterface
Performance is
everyone’s problem
1. Understand the importance
2. Advocate with clients
3. Help maintain the performance budget

14. @webinterface
Performance!
BuildSales Concept/Design Roll-out
Project Timeline
Strategy

15. @webinterface
Performance!
Performance is a part of
conception and design
BuildSales Concept/Design Roll-outStrategy

16. @webinterface
Performance are not
simply a development
issue

17. @webinterface
Discuss performance in
sales not development
1. What is the performance budget?
2. What is this project budget?

18. @webinterface
Performance!
Where performance
need to happens
BuildSales Concept/Design Roll-outStrategy

19. @webinterface
Client understands the benefits
BuildSales Concept/Design Roll-outStrategy

20. @webinterface
Advocate performance as a priority
BuildSales Concept/Design Roll-outStrategy

21. @webinterface
Concept and Design is committed
within a performance budget
BuildSales Concept/Design Roll-outStrategy

22. @webinterface
Development is prepared to
successfully integrate
performance as a priority
BuildSales Concept/Design Roll-outStrategy

23. @webinterface
Everyone must be
envolved by baking
performance into your
workflow from day one.

24. @webinterface
Set one goal
with metrics

25. @webinterface
Communicate
what, how and why

26. @webinterface
The perception of fast
What is fast?
Image: www.srf.ch

27. Chuck Norris
doesn’t wear a
watch. He decides
what time it is.
@webinterface Image: http://www.mrctv.org/

28. No one likes to suffer the
frustration of waiting.
@webinterface

29. @webinterface Image: http://www.mrctv.org/

30. @webinterface
User’s perception
of time
Time to interact
Load Time
Objective time
or
Clock time
Psychological time
or
Brain time
vs.

31. @webinterface
Jacob Nielsen:
Website Response
Times

32. @webinterface
0,1 - 0,2s 0,5 - 1s 2 - 5s 5 - 10s
Instant Immediate User Flow Keeping the user´s
attention

33. @webinterface
Load the page
mobile within
5 seconds

34. @webinterface
Important Metrics:
Page weight
Start render
Fully loaded

35. @webinterface Source: Radware_SOTU_Report_Spring_2015.pdf

36. @webinterface Source: http://www.webpagetest.org/
WebPageTest.org

37. @webinterface
Above the fold
criterion

38. @webinterface
Make the page
usable within
less 1 seconds

39. @webinterface Source: https://developers.google.com/speed/docs/insights....

40. @webinterface
49% use there Mobilephone
everyday and everytime.

41. @webinterface Image: bradfrost.com

42. @webinterface
Responsive web design
requirement:
Support broad range
of devices.

43. @webinterface
Set a perfomance
budget
Image: https://en.wikipedia.org/wiki/Lunar_Roving_Vehicle

44. @webinterface
Work as a team and
determine the budget

45. @webinterface
5
SECONDS
ON EDGE
150 kb
220 kb
SOMEWHERE BETWEEN
AND
EDGE
=

46. @webinterface
5
SECONDS
ON 3G
350 kb
400 kb
SOMEWHERE BETWEEN
AND
3G
=

47. @webinterface
400 kb =
Performance budget example:
100 kb fonts
50 kb css
200 kb images
50 kb javascript

48. @webinterface
Core
Experience
JS
Experience

49. @webinterface
Core
Experience
Mobile First
Content First
Accessibility First
Device First
Responsive First
Performance First

50. @webinterface
Core experience
has the priority

51. @webinterface
1. Core Content should be delivered first
2. Core Content should render with 1000ms
3. Every feature must fail gracefully

52. @webinterface
Performance design
reviews
What value does this
provide?

53. @webinterface
Identify core content

54. @webinterface
Red Flags
Carousel
Video Video
What has
priority?
Alternate
solutions?

55. @webinterface
1. Mockup designs in code
2. Run performance tests early
3. Quick iterations
4. Enhance
5. Work as a team
Prototype early

56. @webinterface
Do not block the
page rendering

57. @webinterface
Make fewer HTTP
Requests
Source: http://www.sitepoint.com/

58. @webinterface
Use CDN (Content
Delivery Network)
Source: http://www.sitepoint.com/

59. @webinterface
Load Balancing
Source: http://www.sitepoint.com/

60. @webinterface
Do not add JS Files into the head
<html>
<head>
<link href=“styles.css“/>
<script src=“script-lib.js“></script>
<script src=“script-custom.js“></script>
</head>
<body>
… Content …
</body>
</html>

61. @webinterface
Javascipt Files
at the bottom of body
<html>
<head>
<link href=“styles.css“/>
</head>
<body>
… Content …
<script src=“script-lib.js“></script>
<script src=“script-custom.js“></script>
</body>
</html>

62. @webinterface
Minify CSS and JavaScript
GZIP (13% - 25%)
Compress Images (Strip Image
Metadata)

63. @webinterface
Development concept:
Ajax content in to
anhance page.

64. @webinterface
On mobile redirects are
more painful.

65. @webinterface
Load Javascript
Asynchronous

66. @webinterface
Font Performance
with Subsetting
and Local Storage
Source: http://www.sitepoint.com/

67. @webinterface
Local Storage
windows.localStorage:
setItem()
getItem()
removeItem()
clear()
all popular browsers, 5MB max
http://dev.w3.org/html5/webstorage/
http://diveintohtml5.org/storage.html

68. @webinterface
Web / Icon fonts
using web/icon fonts
on larger displays

69. @webinterface
@media screen and (min-width: 48em) {
body {
font-family: webfont, fallback, sans-serif;
}
}
Faster connection

70. @webinterface
Most sites fail to take
advantage of core
image optimization
techniques.

71. @webinterface
Images typically
comprise between 50%
to 60% of a page’s total
weight

72. @webinterface
Responsive Image
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 2x">
<img src="fallback.jpg">
</picture>
„respimage“ or „picturefill" for cross browser-support

73. @webinterface
Lazy load for
responsive image
lazysizes is a lazyloader
for responsive images
Source: https://github.com/aFarkas/lazysizes

74. @webinterface
Last words

75. @webinterface
Everyone must be
envolved by baking
performance into your
workflow from day one.

76. @webinterface
Set goal
Communicate
Repeat

77. @webinterface
Include performance
into the project
documents

78. @webinterface
Deviler core content
first, then progressively
enhance the extras.

79. @webinterface
Measure
Optimise
Repeat

80. @webinterface
Leadership in
Performance

81. @webinterface
„Great minds discus principles.
Average minds discus
technologies.
Small minds discus tools.“
Brad Frost
https://www.youtube.com/watch?v=nE0CRMm59BY

82. Design the Priority
not the Layout
@webinterface

83. @webinterface
The goal is to create a
stunning, flexible,
lightning-fast
experience.

84. Performance and UX
is a requirement
Bild: flickr.com/.../projectapolloarchive/@webinterface

85. @webinterface

86. Thanks
@webinterface
…dear Ellen

87. @webinterface
peter.rozek@ecx.io