'

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

Performance 
 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

Communicate
 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 
 or 
 Clock time Time to interact
 Load Time @webinterface vs. Psychological time 
 or 
 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

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


Слайд 45

3G SOMEWHERE BETWEEN 5 SECONDS 
 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 
 solutions?


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

@webinterface


Слайд 85

Thanks …dear Ellen @webinterface


Слайд 86

peter.rozek@ecx.io @webinterface


Слайд 87


×

HTML:





Ссылка: