Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adapting for the Times

Adapting for the Times

Responsive design is not a goal, performance is a goal. Follow Yell's journey to a performant website through the eyes of adaptive design and user experience above all else.

First presented at Velocity Amsterdam, October 30th 2015, updated for NCC Group Performance Matters, May 2016, then again for Toronto Web Performance in October 2016

Steve Workman

October 30, 2015

More Decks by Steve Workman

Other Decks in Technology


  1. Adapting for the Times @steveworkman #perfmatters Adapting for the Times

    Steve Workman Head of Web Engineering @ Yell
  2. Adapting for the Times @steveworkman #perfmatters A little about me

    • An Organiser of London Web Standards • Was a software developer for a management consultancy • Now Head of Web Engineering at Yell • Has a dog called Gizmo
  3. Adapting for the Times @steveworkman #perfmatters We’re like these guys…

  4. Adapting for the Times @steveworkman #perfmatters Audio clip from BBC

    Radio 4’s Today Programme, November 15th, 2012
  5. Adapting for the Times @steveworkman #perfmatters

  6. Adapting for the Times @steveworkman #perfmatters © Aljeo Malia -

  7. Adapting for the Times @steveworkman #perfmatters The Goal: Continue to

    be relevant in Google’s world • Small team • Large project • Lots of history, rules and processes • Highly competitive, fast-moving landscape
  8. Adapting for the Times @steveworkman #perfmatters #1 – Focus on

  9. Adapting for the Times @steveworkman #perfmatters

  10. Adapting for the Times @steveworkman #perfmatters For Yell, mobile and

    desktop are just two different worlds Monday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM Tuesday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM Wednesday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM Thursday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM Friday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM Saturday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM Sunday 3 AM 6 AM 9 AM 12:00 pm 3 PM 6 PM 9 PM 7 days of page views by hour Desktop Tablet Mobile
  11. Adapting for the Times @steveworkman #perfmatters Behavioural differences Desktop &

    Tablet Mobile Browsing Finding Take time to read and absorb information Only interested in ratings and the phone number / website Long tail of different engagement with the site Engagement loaded to calls, websites, directions and ratings
  12. Adapting for the Times @steveworkman #perfmatters Responsive is our goal

    Performance is the goal
  13. Adapting for the Times @steveworkman #perfmatters 38% of responsive sites

    surveyed sent exactly the same content to all devices https://speedcurve.com/blog/velocity-responsive-in-the-wild/
  14. Adapting for the Times @steveworkman #perfmatters #2 – Segment and

    target your consumers
  15. Adapting for the Times @steveworkman #perfmatters https://www.flickr.com/photos/lukew/10412585943

  16. Adapting for the Times @steveworkman #perfmatters Side-note: Client-side detection &

    SPAs • Allows for feature-detection – good for responsive • Not set up for device class detection • Twitter switched back to server-side rendering in 2012 and improved page load times 20% • With Service Workers, this can change • See Supercharging Page Load https://youtu.be/d5_6yHixpsQ
  17. Adapting for the Times @steveworkman #perfmatters One back-end, many UIs

    DB Data Model Desktop AMP Smartphone ? Proxy
  18. Adapting for the Times @steveworkman #perfmatters Segmenting your users is

    tricky • Yell gets well over 36,000 unique user agents in one week • Segmenting by capabilities can’t be done server-side • We can segment around devices and detect features client- side • Studying user agents can show us this
  19. Adapting for the Times @steveworkman #perfmatters This is not how

    to do it
  20. Adapting for the Times @steveworkman #perfmatters All devices that could

    be a phone
  21. Adapting for the Times @steveworkman #perfmatters Desktop/Tablet view for Android

    3.x and all others
  22. Adapting for the Times @steveworkman #perfmatters

  23. Adapting for the Times @steveworkman #perfmatters

  24. Adapting for the Times @steveworkman #perfmatters Google loves Adaptive and

    Responsive Equally • There is no “mobile” index, just mobile-friendly pages • Add “Vary: User-Agent” header • However, Google is going to change this at the start of 2017 • m.domains aren’t needed • They cost an extra redirection • Ensure content is redirected correctly – Google will penalise heavily
  25. Adapting for the Times @steveworkman #perfmatters

  26. Adapting for the Times @steveworkman #perfmatters #3 – Always use

    Progressive Enhancement
  27. Adapting for the Times @steveworkman #perfmatters Progressively Enhance for modern

    technology • Same HTML and CSS for all phones, old or new • No JS for phones that don’t meet the grade • Zero JS version forces us to write efficient HTML & CSS • With this baseline • browser JS issues are rare • ES5 support is good, few polyfills • VanillaJS is possible as over 97% of phone browsers support querySelectorAll • jQuery can be dropped!
  28. Adapting for the Times @steveworkman #perfmatters Smartphones aren’t that fast

    Kraken 1.1 test (lower is better) • Samsung Galaxy S6 – 3993ms • 2012 MacBook Pro – 1043ms • Android single core performance is not improving with new generations https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015- is-poor/33889
  29. Adapting for the Times @steveworkman #perfmatters grasp '$(__).__' -e -o

    *.js | sed 's/.*[.]//' | uniq -c.
  30. Adapting for the Times @steveworkman #perfmatters Methods to be replaced

    • 6 addClass • 1 after • 5 append • 11 attr • 2 before • 12 bind • 3 closest • 2 delegate • 1 each • 9 find • 4 get • 1 hasClass • 1 height • 6 hide • 1 html • 2 length • 3 live • 1 offset • 4 parent • 6 remove • 5 removeClass • 4 show • 1 siblings • 3 trigger • 4 val • 1 width
  31. Adapting for the Times @steveworkman #perfmatters Methods added to min.js

    • 6 addClass • 1 after • 5 append • 11 attr • 2 before • 12 bind • 3 closest • 2 delegate • 1 each • 9 find • 4 get • 1 hasClass • 1 height • 6 hide • 1 html • 2 length • 3 live • 1 offset • 4 parent • 6 remove • 5 removeClass • 4 show • 1 siblings • 3 trigger • 4 val • 1 width
  32. Adapting for the Times @steveworkman #perfmatters #4 – Performance is

  33. Adapting for the Times @steveworkman #perfmatters More speed = more

    interaction Page Engagement Change Home ▲ 11% Search results ▲ 13% Business listing ▲ 21%
  34. Adapting for the Times @steveworkman #perfmatters

  35. Adapting for the Times @steveworkman #perfmatters But only half the

    site has changed… Before After
  36. Adapting for the Times @steveworkman #perfmatters #5: Iterate, iterate, iterate

  37. Adapting for the Times @steveworkman #perfmatters Adaptive Leap-frog Mobile Desktop

    Mobile Desktop Mobile Desk M D
  38. Adapting for the Times @steveworkman #perfmatters

  39. Adapting for the Times @steveworkman #perfmatters #6 – New is

    always better* (*for programming techniques)
  40. Adapting for the Times @steveworkman #perfmatters Time moves on, techniques

    improve • Take learnings from the last iteration to improve knowledge • Adapt technologies to suit the user, with performance in mind • Sass → Critical CSS + lazy loaded CSS → HTTP/2 • Modular JS patterns → AMD → async • IE8… is still IE8 → cut the mustard or jQuery needed
  41. Adapting for the Times @steveworkman #perfmatters What works on mobile,

    might not work on desktop • Desktop is far less sensitive to requests & file size • Mobile needs minimal number of requests to be fast • Without HTTP/2, loading small components on demand would be high in latency and really slow
  42. Adapting for the Times @steveworkman #perfmatters Adaptive lets you control

    this better Global CSS Global JS Page- specific CSS Page- specific JS Mobile Critical CSS Critical JS Modular CSS Modular JS Desktop Modular CSS Modular JS Modular CSS Modular JS Modular CSS Modular JS Modular JS Modular CSS Modular CSS Modular JS
  43. Adapting for the Times @steveworkman #perfmatters #7 – Measure Continuously

  44. Adapting for the Times @steveworkman #perfmatters “If it moves, we

    track it. Sometimes we’ll draw a graph of something that isn’t moving yet, just in case it decides to make a run for it.” Ian Malpass, Etsy
  45. Adapting for the Times @steveworkman #perfmatters Get a WebPageTest box

    of your own • Test at development time • Perf Budgets and grunt-perfbudget • SpeedCurve can use this instance as a test agent* • Private instances https://sites.google.com/a/webpagetest.org/docs/private-instances • Configuring an all-in-one box http://andydavies.me/blog/2012/09/18/how-to-create- an-all-in-one-webpagetest-private-instance/ * Only available on Platinum plans
  46. Adapting for the Times @steveworkman #perfmatters Find the metrics that

    matter to you • Add performance.mark and measure any JS • Shows up in WPT
  47. Adapting for the Times @steveworkman #perfmatters Feed these into your

    RUM data
  48. Adapting for the Times @steveworkman #perfmatters

  49. Adapting for the Times @steveworkman #perfmatters Understand the real-world impact

  50. Adapting for the Times @steveworkman #perfmatters Show great improvements in

    metrics Page Fully loaded Under 3 seconds Under 10 seconds Before 33% 85% After 50% 92%
  51. Adapting for the Times @steveworkman #perfmatters

  52. Adapting for the Times @steveworkman #perfmatters It’s still not enough

    to catch our smartphone site • Desktop is still 1 second behind smartphone – why? • Extensive use of Google maps • Third-party content (ads)
  53. Adapting for the Times @steveworkman #perfmatters That’s OK • Build

    for the user experience • Build for the behaviours you want • Build for your business model
  54. Adapting for the Times @steveworkman #perfmatters #8 – Do what

    works for you and your team
  55. Adapting for the Times @steveworkman #perfmatters Accelerated Mobile Pages (AMP)

    • Specialist pages for articles (like Facebook Instant) • Instant loading, cached by Google • Enforces performance best practices • Restrictions on many elements and styles & all scripts • Now launched and improving • Available to all data types, but not a ranking signal
  56. Adapting for the Times @steveworkman #perfmatters What do you need?

    A responsive site, or a performant mobile site?
  57. Adapting for the Times @steveworkman #perfmatters Summary 1. Focus on

    Consumers 2. Segment and target your consumers 3. Always use Progressive Enhancement 4. Performance is Everything 5. Iterate, Iterate, iterate 6. New is always better* 7. Measure Continuously 8. Do what works for you and your team
  58. Adapting for the Times @steveworkman #perfmatters http://www.slideshare.net/firt/extreme-web-performance-for-mobile-devices-54478615 For more detail,

    read Max’s book
  59. Adapting for the Times @steveworkman #perfmatters Thank you Follow Me

    for more: @steveworkman & @yelldev Slides: speakerdeck.com/steveworkman