Design+Performance

3,507 views

Published on

If your performance metric gives all the content in the page the same value, that's not a good metric.

Published in: Internet
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,507
On SlideShare
0
From Embeds
0
Number of Embeds
1,350
Actions
Shares
0
Downloads
26
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • Very excited about our next speaker and incredibly honored to have the opportunity to introduce him.
    He and I are actually very much alike in many ways. We both care a lot about web performance and helping the devops community.
    I think I'm a better coder.
    And I will say his jokes aren't as funny as he thinks they are.
    Nevertheless, I'm such a big fan I've been to every talk he's ever given.

    https://www.flickr.com/photos/easyflow/3377137372/in/photolist-69qHhq-5JUiYP-55ZfsE-dYmwEQ-5Ca1VD-7zq7En-kVv8dK-mqM9Jp-5J3uv9-f4JB8M-qZznd-f4MRgN-f4xAET-bpDYeX-GroML-7qoFXr-55nSfk-rbJwH-6RFZt1-6qnVXy-jtkLG-cEGq9-4xp87D-eeUgzz-c7QHf-6qk9JT-7PjaWF-4gf1tv-7sK9B3-4VtxzW-6qvWgT-8UB4U-8t9NNr-bDvQY-972WQq-6Fkgen-4RSnyY-8T7px8-6rWXPz-6rWU3n-5fgGGe-Hq1J7-cvqi-7Hs86U-9Vo8SK-gzpzde-666Ch9-4CzyT6-3hx5nr-dReBgT
  • Steve
    This talk is about creating better websites by bringing designers & developers closer together
  • Steve
    Perhaps your experience with bringing designers & developers is a bit like this - but without the pillows.
    Certainly, navigating between design and implementation often feels like a fixed sum game.
    One side’s win is the other side’s loss.

    https://www.flickr.com/photos/timdorr/4396870234/in/photolist-7Gx7ku-7GtaDx-7Gx4Ub-7Gta8t-7GtadX-7GvYZ1-3nArNu-3nArUy-3nApNY-3nvYmr-3nAq8N-3nApG1-3nAq2q-3nvYJg-3nw1xc-3nAtnq-3nvVBg-3nAtad-3nAtUo-3nw1jX-3nvZti-3nvXm6-3nAr7d-3nAqfL-3nAuPb-3nAsRf-3nAssL-3nvZHt-3nAroy-3nArvb-3nAqUE-3nAph1-3nvXf4-3nArGG-3nvVb8-3nAscS-3nAtAW-3nAueq-3nvYwD-3nArZN-3nAr27-3nAqs5-oM1oiq-bCU3k4-3sZr4-682gYi-6eDdv3-qSGcRS-aFFtxX-7QzWQc
  • Mark
    But really, they’re both after the same thing: creating a great user experience!
    Design & development ARE connected, but they’re more like the yin and the yang.
    They aren't opposing forces, but instead complement each other.
    Users want an experience that is rich and fast. The trick is figuring out how to deliver that.
    Similar to DevOps from Velocity.

    https://www.flickr.com/photos/easyflow/3377137372/in/photolist-69qHhq-5JUiYP-55ZfsE-dYmwEQ-5Ca1VD-7zq7En-kVv8dK-mqM9Jp-5J3uv9-f4JB8M-qZznd-f4MRgN-f4xAET-bpDYeX-GroML-7qoFXr-55nSfk-rbJwH-6RFZt1-6qnVXy-jtkLG-cEGq9-4xp87D-eeUgzz-c7QHf-6qk9JT-7PjaWF-4gf1tv-7sK9B3-4VtxzW-6qvWgT-8UB4U-8t9NNr-bDvQY-972WQq-6Fkgen-4RSnyY-8T7px8-6rWXPz-6rWU3n-5fgGGe-Hq1J7-cvqi-7Hs86U-9Vo8SK-gzpzde-666Ch9-4CzyT6-3hx5nr-dReBgT
  • A lot of the thinking behind Design+Performance came from long discussions with my business partner Mark Zeman.
    He has a lengthy career as a designer and creative director, but sadly can’t be here today.
  • Mark
    So I’m going to borrow from Yemeni Perez-Cruz to represent designers.
  • Mark
  • Mark
  • Mark
    two minutes is slow
  • Steve
    but we know good performance is key to great user experiences
  • “if we’re able to achieve a similar performance boost across our other top landing pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
  • This was a ~5 second speed up.
  • Time measurements from real users.
  • Steve
    and now Google is even demanding that your websites be quick if you don’t want to get demoted in their search results
  • HOW CAN WE CREATE FAST WEBAPPS?
  • BOTH
    so where are we?

    https://www.flickr.com/photos/jronaldlee/5775587577/in/photolist-9NnoYa-nYYp6g-63bGJj-KrzjB-6nYgX1-8KY39y-kz3M7y-fo68C6-5onBza-apBT72-6g9eSA-9WNvKw-4Gb2FP-2V7jsj-6G7Ynq-2tbdKU-9Kip9s-4TL5Sc-iJQYR-gi6ri6-pfx24Z-BgDwR-9NgMy1-of8g8U-49queL-atRJTH-ax64Nq-fSUV1Q-4qvBPj-4Se4NE-aegPJ4-ptxVJE-ptM5zP-ptMNBV-q95ZVa-kcfpje-mPZDqk-7FPG6G-cqvvXs-rwFCJA-bVYoNj-6McJox-CXYYb-5bMxiG-49mrhe-6q5uNW-7DpdiH-6MgWby-5n89ro-dVXS9w
  • Mark
    It is possible to bring design and performance closer together. Here’s how…

    https://www.flickr.com/photos/easyflow/3377137372/in/photolist-69qHhq-5JUiYP-55ZfsE-dYmwEQ-5Ca1VD-7zq7En-kVv8dK-mqM9Jp-5J3uv9-f4JB8M-qZznd-f4MRgN-f4xAET-bpDYeX-GroML-7qoFXr-55nSfk-rbJwH-6RFZt1-6qnVXy-jtkLG-cEGq9-4xp87D-eeUgzz-c7QHf-6qk9JT-7PjaWF-4gf1tv-7sK9B3-4VtxzW-6qvWgT-8UB4U-8t9NNr-bDvQY-972WQq-6Fkgen-4RSnyY-8T7px8-6rWXPz-6rWU3n-5fgGGe-Hq1J7-cvqi-7Hs86U-9Vo8SK-gzpzde-666Ch9-4CzyT6-3hx5nr-dReBgT
  • Mark
    None of this works unless you have the right people in the room the whole way through the process.
    It’s hard to create this relationship halfway through the process
    bring designers & developers together from the get go
  • Mark
    With everyone gathered together, discuss project goals and capture guiding principles.
    Make sure performance is addressed.

    https://www.flickr.com/photos/nihaogirl/4922776916/in/photolist-ndeSfc-51eh43-51a5LR-74FetH-4TeuNB-df5nYf-5Vo2Wn-5Nmjzn-51a5zV-51egkE-51a546-8v1w55-5t8PLi-9Zxguz-7wK1Le-6RAgsL
  • Here is an example of a principle from the design of a news website. The research showed that users consume news in small quick chunks and so it was more important that it loaded extremely fast than be visually rich with lots of brand assets. People are waiting at the bus stop and they have less than a minute to scan a few articles on their phone - it has to be fast.

    There is even a specific mention for when the site should be loaded and that was used as a performance budget.
  • Mark
    Here is an example of a principle from the design of a news website. The research showed that users consume news in small quick chunks and so it was more important that it loaded extremely fast than be visually rich with lots of brand assets. People are waiting at the bus stop and they have less than a minute to scan a few articles on their phone - it has to be fast.

    There is even a specific mention for when the site should be loaded and that was used as a performance budget.
  • Mark
    It means all the knowledge is in one room, everybody is working on the prototype from day one. Designers are not working in photoshop to create full layouts - they are creating individual assets that go into a prototype. Developers are working with existing data sources and manipulating real content. Researchers are capturing users needs and gauging reactions to each prototype. Team members have a specialisation but are expected to contribute to all aspects of the project.

    Everybody is contributing to the prototype and the conversions are all embodied in one place. So every one has a shared vision and can see how well the project principles and performance principles are being met.

    Here's a moment that I love - the client is in the room, the developer is experimenting with changing layout and the designer is consulting on the various options they are playing with. All the discussion revolves around the prototype on screen.

    And by having a prototype from day one we can immediately assess it's performance and ensure it's delivering the user experience we need.

    But one of the challenges with performance is that it is invisible. How do we monitor and make visible the performance all the way through the process - for everybody, not just this small interdisciplinary team, but also the wider organisation we need to have conversations with.
  • Mark
    But one of the challenges with performance is that it is invisible. How do we monitor and make visible the performance all the way through the process - for everybody, not just this small interdisciplinary team, but also the wider organisation we need to have conversations with.

    https://www.flickr.com/photos/josterpi/3174097491/in/photolist-5Qu5AP-h4vYQc-qDkDsE-6tDQ53-ap4pYT-6VrZjk-md5yR5-5PondA-5PVcKC-bvavRn-bxsk7Z-QudsT-6S1ivp-9hwNYa-8UjqcP-ap7amu-9zgR8a-qf1yJ9-qgz457-4JXfm4-99eAKF-6cyvEr-mFUttz-e2FfcF-37ddmA-wBwq6-63iZnr-wBwiC-9XMHpn-ph8ANF-9XQzJE-ZsAKM-iyQpBa-7jgbx4-6QJSTZ-7jk5tw-wBwgS-wBwca-bA44J-8Mdwca-qMZeNs-7P5RjE-6o8M7d-9hP5RB-4zySd-aAqBn3-NGjcd-cH8cQU-8USCg9-8KMjFj
  • Mark
  • Steve
    But what exactly should we be measuring?
  • WHAT SHOULD WE MEASURE?

    https://www.flickr.com/photos/lisanorwood/2861328403/in/photolist-5mR4fk-MjCWp-bX7FrJ-dMih5Z-8Sqpe4-qUk5B6-cMqP6L-ej4mk4-bv2Koj-gV3NF9-4LYHJC-4LYHxd-4LUxYa-4LUxKV-4LUxCH-4LYGEw-4LYGvG-4LUxdP-4LUx66-4LUwR8-4LUwCn-4LUwwz-j3LVA-6CMMSn-dcbdKE-tTwVoG-g7Ai1f-p544s2-79Kh94-aNWUrp-CsP1L-e38a5p-e38a4k-CEFSU-9xr1yb-9xqZZu-9MyzJY-3fcqzs-fpTzg2-8qAgFe-ad22ie-7xWK7u-bugShD-683bvG-8vYEtm-696zM4-bunmey-riw5sJ-rixdyo-qD6VvN
  • SHORT HISTORY OF HOW PERF METRICS HAVE EVOLVED
    YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
  • https://www.flickr.com/photos/kk/6863172432/in/photolist-bsty4b-3HDYJE-wiSVMX-eVWzMJ-9ftJBe-kYWQ8F-aucUmh-diNSS9-qZg4Rp-kjFung-dmuJKm-pH4iVp-bnTdAq-9LFXXN-ba67YV-dhth5h-oaaZKo-nd9Fs1-29RVSQ-pJGAjW-i29xbH-ajNXL9-o8WqV6-uqMyAg-fdPuAo-srZ5Yr-nwMJDC-jibyGv-hBcuis-vKiMxj-pu9xhj-rwJSDL-dnDq8k-swkmVC-o151uM-hBbGwi-gfwits-cHtV9-61nXN5-bAZ5za-pU4HhE-kBkvPH-pn47sx-hTFhB9-mnGW1V-o8wD5y-rRvX4y-9B1Qwy-dQuEdE-rDsEGb
  • https://www.flickr.com/photos/lissalou66/3230227830/in/photolist-5VrLch-3W7wvR-bDv29P-cWdJ6S-qDbGGp-7mo5YA-7mo68Y-7mjbG2-7mjbED-7mjbFn-7mjbJZ-6ZNsp9-8bKqgd-7dMfu3-7mo6cw-956aRV-fjWyE8-8RC4L7-bWuJvd-7mo67G-4eQWJo-8WVc1Q-fcyQ6L-8RyWpH-u6a2mU-7mjbNi-5WdbpM-diEyhp-nYTWA4-8RC4tY-7mjbCz-7mo5ZJ-pQ3mGH-cLTVs-VGPku-9C9Ewu-k454Yr-rMoPkf-shVXJa-9C9EMq-9C9DEY-9eUvYt-ehVk2b-Fi9WW-yhQ2zU-nBiZxp-66VCJA-66VBqU-iV7iXo-eiC3zb
  • https://www.flickr.com/photos/genbug/3211632108/in/photolist-5TNsko-fdbGed-fdbEGA-wrGoL-5Ubbxd-d6PKFm-d6PKgJ-d6PKsq-d6PK1N-5ecJbt-6756uY-5UDjxE-fdbFGJ-fdbFqJ-rjR77Q-r5yA89-rn3Peb-rn1GDa-r3PvC8-qq9vEU-r5yzz5-r5zuS9-rjR62U-rn1FQg-r5yyVE-rn1FvP-qq9uG1-rn1Fmv-r5yyo7-rzJrS9-7xnUEd-4KvHVV-pDB3aD-eNqHUF-hjbY5-6nczkD-p4nDT4-8ZsZmP-dnEGjh-78mPc8-mh4vz-wrGmT-wrGk1-wrGi7-8jX2hk-99v92z-aVkUEg-5qCvSj-jFTHxL-jFTDJy
  • https://www.flickr.com/photos/audiinsperation/1388548474/in/photolist-37GF5W-ht7kFp-c3bAr7-5U6Q4i-4w9zHP-dRa7zx-hniwn-9dpVby-8xvDZG-q9xMY7-9xnZWr-93iFPA-9TyEWQ-9TvP8g-oVq1dV-oDczn8-8QynpR-645rW7-bxB1CG-e3ugwb-c928G1-cA7Mrs-e2vNoN-hniwo-hniwp-fdbFWY-7H5QhG-wrGqS-pzvJho-hZ7Y6a-cuFiBm-8MDfSg-5wLUMK-jPAYVo-5w275G-b3g8Vc-arjonn-teWQdu-szHzpa-oe8cUe-oeq5Dn-oefvcj-jVxS1R-EYNJv-hD7JTZ-dLBWgU-b3h3Di-qyvNKi-qNDoh9-9344jJ
  • https://www.flickr.com/photos/stevendepolo/5111008851/in/photolist-8MDfSg-5wLUMK-jPAYVo-5w275G-b3g8Vc-arjonn-teWQdu-szHzpa-oe8cUe-oeq5Dn-oefvcj-jVxS1R-EYNJv-hD7JTZ-dLBWgU-b3h3Di-qyvNKi-qNDoh9-9344jJ-2uBZ5H-hD9cR2-ae4sbS-ae1Cur-4mWaLe-bzPBty-ae4rZE-teWPNS-szwXFC-sogkJk-6tm9wo-8UfEsf-jmM4ck-hD7Jqz-heaRsg-cN8m8Q-cN8kjy-cN8jrQ-cN8iEf-cN8hRE-cN8ekj-cN8cTS-cN8bpu-cN8aCw-cN88U9-cN884q-jFQUJP-jFRE54-jFT4MU-5TNsko-fdbGed
  • This is just the HTML document!!! Just 1 of 50 requests!!!

    http://stockcharts.com/commentary/archives/cww20021222h.html
    This is just the HTML document!!! Just 1 of 50 requests!!!
    As of 2011 their HTML document took 500 ms
  • We need metrics that focus on what the user sees!

    https://www.flickr.com/photos/cataniamichele/2855661699/sizes/l
  • Roundtrip 2003
    Episodes 2008
    Boomerang 2010
  • FOUNDED BY GOOGLE & MICROSOFT
  • GAVE US .navigationStart
    MORE ACCURATE WAY OF MEASURING WINDOW.ONLOAD
    BUT PAGES ALSO GOT MORE COMPLEX

    https://www.flickr.com/photos/zamboniandrea/170324255/
  • BUT PAGES ALSO GOT MORE COMPLEX

    We know page load time is NOT necessarily correlate to UX.
  • examples of how onload does NOT correlate to UX

    Amazon: http://www.webpagetest.org/result/150420_GV_E3/
    Gmail: http://www.webpagetest.org/result/150420_S9_704a92a60b0b134daec3d42d649c3010/
  • IF WE LOOK AT NAV TIMING WE SEE domInteractive
  • http://www.webpagetest.org/result/150915_X5_15TY/
    4398
  • http://www.webpagetest.org/result/150915_JR_15T8/
    970
  • SPEED INDEX IS ONE NUMBER THAT TRIES TO CAPTURE THE WHOLE RENDERING EXPERIENCE
  • Steve
  • BING: 455 | 451 | 1657 - http://www.webpagetest.org/result/150921_C7_2A4/
    disqus: 805 | 2805 | 3413 - http://www.webpagetest.org/result/150921_07_3AK/
    CNN: 4143 | 12683 | 4329 - http://www.webpagetest.org/result/150921_RB_1Z9/
    MSN: 1813 | 2365 | 1636 - http://www.webpagetest.org/result/150921_5H_24F/



    VEL: 1354 | 8258 | 1310 - http://www.webpagetest.org/result/150921_45_23Z/
  • BING: 455 | 451 | 1657 - http://www.webpagetest.org/result/150921_C7_2A4/
    CNN: 4143 | 12683 | 4329 - http://www.webpagetest.org/result/150921_RB_1Z9/
    CNET: 942 | 10740 | 2606 - http://www.webpagetest.org/result/150921_VY_212/
    MSN: 1813 | 2365 | 1636 - http://www.webpagetest.org/result/150921_5H_24F/
    TMALL 3616 | 8660 | 4726 - http://www.webpagetest.org/result/150921_RF_2K6/


    VEL: 1354 | 8258 | 1310 - http://www.webpagetest.org/result/150921_45_23Z/
  • slideshare: 787 | 3324 | 3209 - http://www.webpagetest.org/result/150921_GK_35V/
    disqus: 805 | 2805 | 3413 - http://www.webpagetest.org/result/150921_07_3AK/

  • THESE CANNED METRICS DON'T NECESSARILY CAPTURE THE UX
    IF YOU'RE USING A METRIC THAT PUTS THE SAME VALUE ON ALL THE CONTENT IN THE VIEWPORT, THAT'S NOT A GOOD METRIC.

    https://www.flickr.com/photos/packethunter/8606781566/in/photolist-e7y1iC-8Wjrr-6oNLSt-4KFuB3-4MUQMb-71M5Kn-6fNAWB-6fSGR1-6fSPhy-6fNCoV-6fNCN2-6fNCmz-c1ygCh-7Wp7WQ-6fSNWm-6fNCWn-6fNCRv-6fNEVF-6fSGWA-7WkQ9r-ifakh-fLN1RN-qkDua9-poHA73-qkDu1m-qkwJbZ-poHA8W-6fSSeJ-rYNC5M-rnzhum-9PXcX-6pZMty-ckNUdq-ne49L-bLpxWD-8rfW2a-7Pr24Z-6KykJG-64zPz9-6Y4MrR-4cj1Ro-6bbByr-6Y4KWP-22FRv7-6cEwfU-4MVc5m-nu1N9m-n1Beux-9wC6Kj-6Yc7kg

    https://www.flickr.com/photos/mindahaas/5597392298/in/photolist-9wC6HL-BnjNV-6fNFrZ-6fSPFQ-6fNDEP-6fSMGu-6fSMDJ-8oFeHX-rAYd6m-sgpoM9-sgvPUv-sgpzGf-sxNNb3-sgwvyF-rAYxou-rBaRoK-sgpFPW-svFwuJ-sxYxwr-sxZ68n-sgpo1Q-sgvTYH-sxYwcc-sgo4cs-svFMdS-sgwty8-sxWUGc-sxYmhH-svFz5y-sxNATU-rBb16K-rBaAHx-sxWu1P-sxYuTv-rBaXM6-sxNzBW-sgnXhG-sxP2zh-rBb5kB-4ooSus-6fNEBM-6fNEmt-6fSQGQ-6fSPPC-7Wp5uE-6fSHdG-6fSH17-7WpaSj-6fNCaP-6fNBFH
  • Anyone surprised by that?
    And yet, that’s what most websites are using them to measure their performance.

    https://www.flickr.com/photos/15609463@N03/14752624612/in/photolist-otD4jL-4p9GRo-ftht9s-ft36pK-fthrfU-ft33tD-fthnJA-fthngq-ft2ZcH-fthkhh-ft2XPD-ft2XmK-fthhH9-ft2Vfv-9UMno7-8tbXHQ-JGdGp-bAnD7e-cY94qm-9Xxwuz-5umsgU-4J4FCc-meHP44-8xVrHW-ft33Wr-ft31aD-5t933c-m6NKfZ-m1fHii-a7BGxp-kXqsW-5KGU2v-y4og12-fthsLu-fthqr5-ft34mg-7zRuBJ-b1nqj4-4GFhqH-66T7qj-kdYcpH-k9fBfA-xi8kRn-a5ZQnK-bhbVMg-58vKE3-kXqqh-8JD5Lb-5MivKh-4gGAGH
  • INSTEAD WE NEED METRICS THAT TRACK THE CONTENT THAT'S CRITICAL FOR A GOOD UX

    https://www.flickr.com/photos/kk/6863172432/in/photolist-bsty4b-3HDYJE-wiSVMX-eVWzMJ-9ftJBe-kYWQ8F-aucUmh-diNSS9-qZg4Rp-kjFung-dmuJKm-pH4iVp-bnTdAq-9LFXXN-ba67YV-dhth5h-oaaZKo-nd9Fs1-29RVSQ-pJGAjW-i29xbH-ajNXL9-o8WqV6-uqMyAg-fdPuAo-srZ5Yr-nwMJDC-jibyGv-hBcuis-vKiMxj-pu9xhj-rwJSDL-dnDq8k-swkmVC-o151uM-hBbGwi-gfwits-cHtV9-61nXN5-bAZ5za-pU4HhE-kBkvPH-pn47sx-hTFhB9-mnGW1V-o8wD5y-rRvX4y-9B1Qwy-dQuEdE-rDsEGb
  • not sure copyright: http://www.shareyouressays.com/117259/customs-are-an-important-source-of-hindu-law-essay
  • not sure copyright: http://www.shareyouressays.com/117259/customs-are-an-important-source-of-hindu-law-essay
  • not sure copyright: http://www.shareyouressays.com/117259/customs-are-an-important-source-of-hindu-law-essay
  • not sure copyright: http://www.shareyouressays.com/117259/customs-are-an-important-source-of-hindu-law-essay
    15:00
  • ONE OF THE FIRST AND MOST POPULAR CUSTOM METRICS
  • Steve
  • Stylesheets DO block inline scripts from executing. (JS might check styling)
  • Stylesheets DO block inline scripts from executing. (JS might check styling)
  • Stylesheets DO block inline scripts from executing. (JS might check styling)
  • STYLESHEET WILL BLOCK IMAGE FROM RENDERING BUT IMAGE ONLOAD FIRES
  • SCRIPT AFTER IMG TAG WON'T EXECUTE UNTIL IMG IS RENDERED
    Stylesheets DO block inline scripts from executing. (JS might check styling)
  • SCRIPT AFTER IMG TAG WON'T EXECUTE UNTIL IMG IS RENDERED
    Stylesheets DO block inline scripts from executing. (JS might check styling)
  • THIS IS A PRETTY BIG DEAL
  • Steve
    http://www.webpagetest.org/video/compare.php?tests=150422_H8_AG3-r%3A4-c%3A0&thumbSize=200&ival=100&end=visual
  • Steve
    How do we know when the image rendered? Filmstrips!!
  • Steve
    too early
    It's not wrong, it's just answering a different question: "When did it finish downloading?"
  • too early
  • too early
  • too early
  • The only that works!
  • Those previous tests covered other slow (blocking) assets.
    What if the image itself is slow?
  • NOW WE CAN CAPTURE PERFORMANCE METRICS ON WHAT USERS SEE
  • MANY PERFORMANCE METRICS SERVICES AUTOMATICALLY SHOW USER TIMING MARKS & MEASURES
  • https://www.flickr.com/photos/stevendepolo/6785825608/in/photolist-9FcnHu-bkD8qU-bxJnMH-bkD8xf-x1T1W-dwVfx9-dwVfpm-agbrmh-dwVfao-dwVfgN-dwVf5E-65CVSx-dwVeJ9-dwVeib-dwVepJ-dwVevQ-dwVeBN-4BdBZc-dwVeRj-dwPKar-5tNxzZ-b2t7Ce-9W4ezj-dgaMD-d9Upc-2U8qSP
  • We need metrics that focus on what the user sees!

    https://www.flickr.com/photos/cataniamichele/2855661699/sizes/l
  • Mark
  • NONE OF THE CANNED METRICS DO THE JOB
    GIVE A FALSE SENSE OF SECURITY

    https://www.flickr.com/photos/packethunter/8606781566/in/photolist-e7y1iC-8Wjrr-6oNLSt-4KFuB3-4MUQMb-71M5Kn-6fNAWB-6fSGR1-6fSPhy-6fNCoV-6fNCN2-6fNCmz-c1ygCh-7Wp7WQ-6fSNWm-6fNCWn-6fNCRv-6fNEVF-6fSGWA-7WkQ9r-ifakh-fLN1RN-qkDua9-poHA73-qkDu1m-qkwJbZ-poHA8W-6fSSeJ-rYNC5M-rnzhum-9PXcX-6pZMty-ckNUdq-ne49L-bLpxWD-8rfW2a-7Pr24Z-6KykJG-64zPz9-6Y4MrR-4cj1Ro-6bbByr-6Y4KWP-22FRv7-6cEwfU-4MVc5m-nu1N9m-n1Beux-9wC6Kj-6Yc7kg

    https://www.flickr.com/photos/mindahaas/5597392298/in/photolist-9wC6HL-BnjNV-6fNFrZ-6fSPFQ-6fNDEP-6fSMGu-6fSMDJ-8oFeHX-rAYd6m-sgpoM9-sgvPUv-sgpzGf-sxNNb3-sgwvyF-rAYxou-rBaRoK-sgpFPW-svFwuJ-sxYxwr-sxZ68n-sgpo1Q-sgvTYH-sxYwcc-sgo4cs-svFMdS-sgwty8-sxWUGc-sxYmhH-svFz5y-sxNATU-rBb16K-rBaAHx-sxWu1P-sxYuTv-rBaXM6-sxNzBW-sgnXhG-sxP2zh-rBb5kB-4ooSus-6fNEBM-6fNEmt-6fSQGQ-6fSPPC-7Wp5uE-6fSHdG-6fSH17-7WpaSj-6fNCaP-6fNBFH
  • not sure copyright: http://www.shareyouressays.com/117259/customs-are-an-important-source-of-hindu-law-essay
    15:00
  • INSTEAD WE NEED METRICS THAT TRACK THE CONTENT THAT'S CRITICAL FOR A GOOD UX

    https://www.flickr.com/photos/kk/6863172432/in/photolist-bsty4b-3HDYJE-wiSVMX-eVWzMJ-9ftJBe-kYWQ8F-aucUmh-diNSS9-qZg4Rp-kjFung-dmuJKm-pH4iVp-bnTdAq-9LFXXN-ba67YV-dhth5h-oaaZKo-nd9Fs1-29RVSQ-pJGAjW-i29xbH-ajNXL9-o8WqV6-uqMyAg-fdPuAo-srZ5Yr-nwMJDC-jibyGv-hBcuis-vKiMxj-pu9xhj-rwJSDL-dnDq8k-swkmVC-o151uM-hBbGwi-gfwits-cHtV9-61nXN5-bAZ5za-pU4HhE-kBkvPH-pn47sx-hTFhB9-mnGW1V-o8wD5y-rRvX4y-9B1Qwy-dQuEdE-rDsEGb
  • "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/
    Verrazano-Narrows Bridge
  • Design+Performance

    1. 1. Design + Performance Steve Souders @souders
    2. 2. bringing designers & developers closer together
    3. 3. flickr.com/photos/timdorr
    4. 4. flickr.com/photos/easyflow
    5. 5. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
    6. 6. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
    7. 7. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
    8. 8. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
    9. 9. en.oreilly.com/velocity2009/public/schedule/de
    10. 10. en.oreilly.com/velocity2009/public/schedule/detail/8523
    11. 11. …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%! blog.mozilla.com/metrics/category/website-optimization/
    12. 12. We made the new platform 60% faster and this resulted in a 14% increase in donation conversions. kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
    13. 13. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%! en.oreilly.com/velocity2009/public/schedule/detail/7709
    14. 14. en.oreilly.com/velocity2008/public/schedule/detail/3632
    15. 15. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
    16. 16. “traffic jumped from 6M to 11M uniques… time spent on site rose from 5.9 to 7.8 minutes… interaction rate on ads rose 108%”
    17. 17. Screen shot of blog post…we've decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
    18. 18. “To stay in Google's good graces, websites must be designed so they load quickly on mobile devices.” huffingtonpost.com/2015/04/17/google-search-update_n_7085642.html
    19. 19. Fast is Good flickr.com/photos/krissen/
    20. 20. designers & developers often work in silos some designs are hard to make fast being fast is important flickr.com/photos/jronaldlee
    21. 21. Design + Performance flickr.com/photos/easyflow
    22. 22. small interdisciplinary teams
    23. 23. guiding principles flickr.com/photos/nihaogirl
    24. 24. Speed is more important than design embellishment. People are filling small gaps in their day with news. It must load fast on all touchpoints. The design should feel light and nimble, always fresh and up to date. Never heavy, slow to load or clogged up with content. Users expect sites to render in under 2 seconds. DAN/TBWA
    25. 25. prototype early
    26. 26. measure performance from the start flickr.com/photos/josterpi
    27. 27. performance budgets
    28. 28. https://speakerdeck.com/lara/mobile-web-at-etsy in-page reminders show what’s beaconed bookmarklets
    29. 29. flickr.com/photos/josterpi
    30. 30. Measuring Performance flickr.com/photos/thatguyfromcchs08
    31. 31. "The graph below shows the average number of seconds it takes 35 different computers located throughout the world to download our homepage."
    32. 32. flickr.com/photos/cataniamichele
    33. 33. window.onload RUM • metrics from real users - COOL! • reflect actual geo, hw, bw, etc. • but, "start" time isn't right • and timer has latency
    34. 34. Navigation Timing overall page metrics performance.timing,.now() Resource Timing individual HTTP requests performance.getEntries() User Timing custom metrics performance.mark(),.measure() W3C Web Timing Specs flickr.com/photos/zamboniandrea
    35. 35. “window.onload is not the best metric for measuring website speed”
    36. 36. 99% ATF rendered: 2.0s onload: 9.7s onload: 3.9s 98% ATF rendered: 4.7s overly optimistic too critical
    37. 37. domInteractive
    38. 38. domInteractive
    39. 39. https://sites.google.com/a/webpagetest.org/docs/using-
    40. 40. domInteractive .onload Speed Index Bing Disqus CNN MSN
    41. 41. There is no single metric that captures the UX on all websites. flickr.com/photos/packethunter
    42. 42. flickr.com/photos/15609463@N03
    43. 43. flickr.com/photos/kk
    44. 44. custom metrics
    45. 45. custom metrics define most important elements on the page
    46. 46. custom metrics define most important elements on the page measure using User Timing
    47. 47. custom metrics define most important elements on the page measure using User Timing track with RUM and synthetic
    48. 48. https://blog.twitter.com/2012/improving-performance-on-twittercom
    49. 49. image load time custom metric <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    50. 50. image load time custom metric <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    51. 51. image load time custom metric <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    52. 52. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    53. 53. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.measure('imgDisplayed'); </script> <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    54. 54. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.measure('imgDisplayed'); </script> <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    55. 55. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.clearMeasures('imgDisplayed'); performance.measure('imgDisplayed'); </script> <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https://pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.clearMeasures('imgDisplayed'); performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
    56. 56. custom metrics
    57. 57. flickr.com/photos/stevendepolo
    58. 58. flickr.com/photos/cataniamichele
    59. 59. There is no single metric that captures the UX on all websites. flickr.com/photos/packethunter
    60. 60. custom metrics define most important elements on the page measure using User Timing track with RUM and synthetic
    61. 61. flickr.com/photos/kk
    62. 62. @souders stevesouders.com/talks

    ×