Performance and UX

Понравилась презентация – покажи это...

Слайд 0

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

Слайд 1

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

Слайд 2

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

Слайд 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

Слайд 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

Слайд 5

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

Слайд 6

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

Слайд 7

Knowing your destination and being lost @webinterface

Слайд 8

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

Слайд 9

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

Слайд 10

 is a essential 
 design feature @webinterface

Слайд 11

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

Слайд 12

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

Слайд 13

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

Слайд 14

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

Слайд 15

Performance are not simply a development issue @webinterface

Слайд 16

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

Слайд 17

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

Слайд 18

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

Слайд 19

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

Слайд 20

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

Слайд 21

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

Слайд 22

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

Слайд 23

Set one goal
 with metrics @webinterface

Слайд 24

 what, how and why @webinterface

Слайд 25

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

Слайд 26

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

Слайд 27

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

Слайд 28

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

Слайд 29

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

Слайд 30

Jacob Nielsen:
 Website Response Times @webinterface

Слайд 31

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

Слайд 32

Load the page mobile within 
 5 seconds @webinterface

Слайд 33

Important Metrics: Page weight Start render Fully loaded @webinterface

Слайд 34

@webinterface Source: Radware_SOTU_Report_Spring_2015.pdf

Слайд 35

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

Слайд 36

Above the fold criterion @webinterface

Слайд 37

Make the page usable within 
 less 1 seconds @webinterface

Слайд 38

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

Слайд 39

49% use there Mobilephone everyday and everytime. @webinterface

Слайд 40

@webinterface Image: bradfrost.com

Слайд 41

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

Слайд 42

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

Слайд 43

Work as a team and determine the budget @webinterface

Слайд 44

 ON EDGE @webinterface = 150 kb AND 220 kb

Слайд 45

 ON 3G @webinterface = 350 kb AND 400 kb

Слайд 46

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

Слайд 47

Core JS Experience Experience @webinterface

Слайд 48

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

Слайд 49

Core experience 
 has the priority @webinterface

Слайд 50

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

Слайд 51

Performance design reviews What value does this provide? @webinterface

Слайд 52

Identify core content @webinterface

Слайд 53

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

Слайд 54

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

Слайд 55

Do not block the page rendering @webinterface

Слайд 56

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

Слайд 57

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

Слайд 58

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

Слайд 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

Слайд 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

Слайд 61

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

Слайд 62

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

Слайд 63

On mobile redirects are more painful. @webinterface

Слайд 64

Load Javascript Asynchronous @webinterface

Слайд 65

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

Слайд 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

Слайд 67

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

Слайд 68

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

Слайд 69

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

Слайд 70

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

Слайд 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

Слайд 72

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

Слайд 73

Last words @webinterface

Слайд 74

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

Слайд 75

Set goal Communicate Repeat @webinterface

Слайд 76

Include performance into the project documents @webinterface

Слайд 77

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

Слайд 78

Measure Optimise Repeat @webinterface

Слайд 79

Leadership in Performance @webinterface

Слайд 80

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

Слайд 81

Design the Priority 
 not the Layout @webinterface

Слайд 82

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

Слайд 83

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

Слайд 84


Слайд 85

Thanks …dear Ellen @webinterface

Слайд 86

peter.rozek@ecx.io @webinterface

Слайд 87