Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performance and UX


Published on

Talk @ WebTechCon 2015 in Munich

Published in: Design, Technology
  • Login to see the comments

Performance and UX

  1. WebTechCon 2015 Performance and UX Image:
  2. Peter Rozek Work at (Digital Agency) Skills: UX Usability Accessibility Frontend @webinterface
  3. @webinterface We have slow connection speeds Image:
  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:
  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:
  27. Chuck Norris doesn’t wear a watch. He decides what time it is. @webinterface Image:
  28. No one likes to suffer the frustration of waiting. @webinterface
  29. @webinterface Image:
  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:
  37. @webinterface Above the fold criterion
  38. @webinterface Make the page usable within 
 less 1 seconds
  39. @webinterface Source:
  40. @webinterface 49% use there Mobilephone everyday and everytime.
  41. @webinterface Image:
  42. @webinterface Responsive web design requirement: 
 Support broad range 
 of devices.
  43. @webinterface Set a perfomance budget Image:
  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:
  58. @webinterface Use CDN (Content Delivery Network) Source:
  59. @webinterface Load Balancing Source:
  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:
  67. @webinterface Local Storage windows.localStorage: setItem() getItem() removeItem() clear() all popular browsers, 5MB max
  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:
  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
  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:
  85. @webinterface
  86. Thanks @webinterface …dear Ellen
  87. @webinterface