Performance and UX

If you like this presentation – show it...

Slide 0

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

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

Knowing your destination and being lost @webinterface

Slide 8

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

Slide 9

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

Slide 10

 is a essential 
 design feature @webinterface

Slide 11

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

Slide 12

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

Slide 13

Project Timeline Sales Strategy Concept/Design Build Roll-out Performance! @webinterface

Slide 14

Performance is a part of conception and design Sales Strategy Concept/Design Performance! @webinterface Build Roll-out

Slide 15

Performance are not simply a development issue @webinterface

Slide 16

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

Slide 17

Where performance 
 need to happens Sales Strategy Concept/Design Performance! @webinterface Build Roll-out

Slide 18

Client understands the benefits Sales Strategy Concept/Design @webinterface Build Roll-out

Slide 19

Advocate performance as a priority Sales Strategy Concept/Design @webinterface Build Roll-out

Slide 20

Concept and Design is committed
 within a performance budget Sales Strategy Concept/Design @webinterface Build Roll-out

Slide 21

Development is prepared to 
 successfully integrate performance as a priority Sales Strategy Concept/Design @webinterface Build Roll-out

Slide 22

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

Slide 23

Set one goal
 with metrics @webinterface

Slide 24

 what, how and why @webinterface

Slide 25

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

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

Jacob Nielsen:
 Website Response Times @webinterface

Slide 31

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

Slide 32

Load the page mobile within 
 5 seconds @webinterface

Slide 33

Important Metrics: Page weight Start render Fully loaded @webinterface

Slide 34

@webinterface Source: Radware_SOTU_Report_Spring_2015.pdf

Slide 35

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

Slide 36

Above the fold criterion @webinterface

Slide 37

Make the page usable within 
 less 1 seconds @webinterface

Slide 38

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

Slide 39

49% use there Mobilephone everyday and everytime. @webinterface

Slide 40

@webinterface Image: bradfrost.com

Slide 41

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

Slide 42

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

Slide 43

Work as a team and determine the budget @webinterface

Slide 44

 ON EDGE @webinterface = 150 kb AND 220 kb

Slide 45

 ON 3G @webinterface = 350 kb AND 400 kb

Slide 46

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

Slide 47

Core JS Experience Experience @webinterface

Slide 48

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

Slide 49

Core experience 
 has the priority @webinterface

Slide 50

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

Slide 51

Performance design reviews What value does this provide? @webinterface

Slide 52

Identify core content @webinterface

Slide 53

Red Flags Carousel Video @webinterface Video What has 
 priority? Alternate 

Slide 54

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

Slide 55

Do not block the page rendering @webinterface

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

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> @webinterface

Slide 60

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> @webinterface

Slide 61

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

Slide 62

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

Slide 63

On mobile redirects are more painful. @webinterface

Slide 64

Load Javascript Asynchronous @webinterface

Slide 65

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

Slide 66

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

Slide 67

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

Slide 68

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

Slide 69

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

Slide 70

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

Slide 71

Responsive Image „respimage“ or „picturefill" for cross browser-support <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> @webinterface

Slide 72

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

Slide 73

Last words @webinterface

Slide 74

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

Slide 75

Set goal Communicate Repeat @webinterface

Slide 76

Include performance into the project documents @webinterface

Slide 77

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

Slide 78

Measure Optimise Repeat @webinterface

Slide 79

Leadership in Performance @webinterface

Slide 80

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

Slide 81

Design the Priority 
 not the Layout @webinterface

Slide 82

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

Slide 83

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

Slide 84


Slide 85

Thanks …dear Ellen @webinterface

Slide 86

peter.rozek@ecx.io @webinterface

Slide 87