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
Tweet

More Decks by Steve Workman

Other Decks in Technology

Transcript

  1. 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
  2. Adapting for the Times @steveworkman #perfmatters Audio clip from BBC

    Radio 4’s Today Programme, November 15th, 2012
  3. 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
  4. 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
  5. 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
  6. 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/
  7. 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
  8. 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
  9. 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
  10. 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!
  11. 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
  12. 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
  13. 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
  14. Adapting for the Times @steveworkman #perfmatters More speed = more

    interaction Page Engagement Change Home ▲ 11% Search results ▲ 13% Business listing ▲ 21%
  15. Adapting for the Times @steveworkman #perfmatters #6 – New is

    always better* (*for programming techniques)
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. Adapting for the Times @steveworkman #perfmatters Find the metrics that

    matter to you • Add performance.mark and measure any JS • Shows up in WPT
  22. 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%
  23. 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)
  24. 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
  25. 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
  26. Adapting for the Times @steveworkman #perfmatters What do you need?

    A responsive site, or a performant mobile site?
  27. 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
  28. Adapting for the Times @steveworkman #perfmatters Thank you Follow Me

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