Download as PDF, PPTX
Uploaded byPeter Rozek
Performance and UX
Peter Rozek gave a presentation at WebTechCon 2015 about performance and user experience. Some of the key points from the presentation include: - Slow page loads can cause 40% of users to abandon a site. Decreasing load times by 4 seconds for one site led to a 25% increase in page views. - Performance needs to be considered from the beginning of a project in the concept and design phases, not just in development. It is important to set performance budgets and priorities. - Users' perception of speed depends on how quickly a page is interactive, not just how long it takes to fully load. The goal should be for above-the-fold content to be usable within 1 second. - Images
More Related Content
![How slow load times hurt UX (and what you can do about it) [FluentConf 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/2016-fluent-even-more-abridged-tammyeverts-160310192653-thumbnail.jpg?width=640&height=640&fit=bounds)
Performance and UX
- 1. WebTechCon 2015 Performance andUX Image: flickr.com/.../projectapolloarchive/@webinterface
- 2. Peter Rozek Work atecx.io (Digital Agency) Skills: UX Usability Accessibility Frontend @webinterface
- 3. @webinterface We have slow connection speeds Image:http://conservativepost.com/
- 4. @webinterface Slow pages loseusers! „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 decreasedload 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 1354kb 108 Resources Spring 2013 Spring 2015 grown by 26% Source: Radware_SOTU_Report_Spring_2015.pdf
- 7. @webinterface Houston we havea problem! Bild: http://jasonrenshaw.typepad.com/
- 8.
- 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: TheSix Elements of Focus to Improve Your Craft
- 11. @webinterface Performance is aessential design feature
- 12. @webinterface Performance is design´sbest 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.
- 15. @webinterface Performance! Performance is apart of conception and design BuildSales Concept/Design Roll-outStrategy
- 16. @webinterface Performance are not simplya development issue
- 17. @webinterface Discuss performance in salesnot development 1. What is the performance budget? 2. What is this project budget?
- 18. @webinterface Performance! Where performance needto happens BuildSales Concept/Design Roll-outStrategy
- 19. @webinterface Client understands thebenefits BuildSales Concept/Design Roll-outStrategy
- 20. @webinterface Advocate performance asa priority BuildSales Concept/Design Roll-outStrategy
- 21. @webinterface Concept and Designis committed within a performance budget BuildSales Concept/Design Roll-outStrategy
- 22. @webinterface Development is preparedto successfully integrate performance as a priority BuildSales Concept/Design Roll-outStrategy
- 23. @webinterface Everyone must be envolvedby baking performance into your workflow from day one.
- 24.
- 25.
- 26. @webinterface The perception offast What is fast? Image: www.srf.ch
- 27. Chuck Norris doesn’t weara watch. He decides what time it is. @webinterface Image: http://www.mrctv.org/
- 28. No one likesto suffer the frustration of waiting. @webinterface
- 29.
- 30. @webinterface User’s perception oftime Time to interact Load Time Objective time or Clock time Psychological time or Brain time vs.
- 31.
- 32. @webinterface 0,1 - 0,2s0,5 - 1s 2 - 5s 5 - 10s Instant Immediate User Flow Keeping the user´s attention
- 33. @webinterface Load the page mobilewithin 5 seconds
- 34. @webinterface Important Metrics: Page weight Startrender Fully loaded
- 35.
- 36.
- 37.
- 38. @webinterface Make the page usablewithin less 1 seconds
- 39.
- 40. @webinterface 49% use thereMobilephone everyday and everytime.
- 41.
- 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 ateam and determine the budget
- 45. @webinterface 5 SECONDS ON EDGE 150kb 220 kb SOMEWHERE BETWEEN AND EDGE =
- 46. @webinterface 5 SECONDS ON 3G 350kb 400 kb SOMEWHERE BETWEEN AND 3G =
- 47. @webinterface 400 kb = Performancebudget example: 100 kb fonts 50 kb css 200 kb images 50 kb javascript
- 48.
- 49. @webinterface Core Experience Mobile First Content First AccessibilityFirst Device First Responsive First Performance First
- 50. @webinterface Core experience hasthe priority
- 51. @webinterface 1. Core Contentshould be delivered first 2. Core Content should render with 1000ms 3. Every feature must fail gracefully
- 52. @webinterface Performance design reviews What valuedoes this provide?
- 53.
- 54. @webinterface Red Flags Carousel Video Video Whathas priority? Alternate solutions?
- 55. @webinterface 1. Mockup designsin code 2. Run performance tests early 3. Quick iterations 4. Enhance 5. Work as a team Prototype early
- 56. @webinterface Do not blockthe page rendering
- 57. @webinterface Make fewer HTTP Requests Source:http://www.sitepoint.com/
- 58. @webinterface Use CDN (Content DeliveryNetwork) Source: http://www.sitepoint.com/
- 59.
- 60. @webinterface Do not addJS 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 atthe 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 andJavaScript GZIP (13% - 25%) Compress Images (Strip Image Metadata)
- 63. @webinterface Development concept: Ajax contentin to anhance page.
- 64. @webinterface On mobile redirectsare more painful.
- 65.
- 66. @webinterface Font Performance withSubsetting and Local Storage Source: http://www.sitepoint.com/
- 67. @webinterface Local Storage windows.localStorage: setItem() getItem() removeItem() clear() all popularbrowsers, 5MB max http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html
- 68. @webinterface Web / Iconfonts 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 failto take advantage of core image optimization techniques.
- 71. @webinterface Images typically comprise between50% 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 responsiveimage lazysizes is a lazyloader for responsive images Source: https://github.com/aFarkas/lazysizes
- 74.
- 75. @webinterface Everyone must be envolvedby baking performance into your workflow from day one.
- 76.
- 77. @webinterface Include performance into theproject documents
- 78. @webinterface Deviler core content first,then progressively enhance the extras.
- 79.
- 80.
- 81. @webinterface „Great minds discusprinciples. 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 isto create a stunning, flexible, lightning-fast experience.
- 84. Performance and UX is a requirement Bild: flickr.com/.../projectapolloarchive/@webinterface
- 85.
- 86.
- 87.