O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Performance and UX

Talk @ WebTechCon 2015 in Munich

  • Entre para ver os comentários

Performance and UX

  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 
 Clock time Psychological time 
 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 
  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 
  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