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

Transcript

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 - alejomalia.com
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 Consumers
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 everything
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