Understanding UX & Hacking Perceived Performance [NY Web Performance Meetup]

CO NFI DENTI AL – Not f or Dist ribut
ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 Understanding UX & Hacking Perceived Performance NY Web Performance Meetup • May 2016

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 9 “The real thing we are after is to create a user experience that people love and they feel is fast… and so we might be front-end engineers, we might be dev, we might be ops, but what we really are is perception brokers.” Steve Souders

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 10 “Oh… pity the hyper-impatient web generation. Such busy lives with so many important things to do — like post the latest drivel onto their Facebook pages or download the YouTube viral video of the day. Oops, sorry — of the minute.” Reader comment “For Impatient Web Users, An Eye Blink Is Too Long to Wait” The New York Times

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 13 “We want you to be able to flick from one page to another as quickly as you can flick a page on a book. So we’re really aiming very, very high here… at something like 100 milliseconds.” Urs Hölzle Senior Vice President of Technical Infrastructure Google

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 21 “Time is measured objectively but perceived subjectively, and experiences can be engineered to improve perceived performance.” Ilya Grigorik High Performance Browser Networking

Progress indicators

Images

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 35 “When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed.” Dr. David Lewis Chair, Mindlab International

39 Third-party content can make up >50% of page requests

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 41 Exposes you to data leakage Generates content security warnings that alarm your visitors and kill your conversions Hurts your Google search rankings (SEO) Makes your site vulnerable to man-in-the-middle security attacks Potential impact of fourth-party calls

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 45 Popup best practices • Optimize script • Ensure cross-browser functionality • Delay for at least 10 seconds • A/B test for effectiveness

Measure the right stuff

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 48 User Timing Interface Allows developers to measure performance of their applications through high-precision timestamps Consists of “marks” and “measures” § PerformanceMark: Timestamp § PerformanceMeasure: Duration between two given marks

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 50 Record when an image loads <img src=“image1.gif” onload=“performance.mark(‘image1’)”> For more interesting examples: Measure hero image delay http://www.stevesouders.com/blog/2015/05/12/hero-image-custom- metrics/ Measure aggregate times to get an “above fold time” http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user- experience.html

Be useful

ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 53 A user who was served feature content within the first second of page load spent 20% of his or her time within the feature area. A user who was subjected to an 8-second delay of a page’s feature content spent only 1% of his or her time visually engaging with that area of the page.

Thanks!

Understanding UX & Hacking Perceived Performance [NY Web Performance Meetup]

Understanding UX & Hacking Perceived Performance [NY Web Performance Meetup]

More Decks by Tammy Everts

Featured

Transcript