Adapting for the Times - Speaker Deck

Adapting for the Times

by Steve Workman

Slide 1

Slide 1 text

Adapting for the Times @steveworkman #perfmatters Adapting for the Times Steve Workman Head of Web Engineering @ Yell

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Adapting for the Times @steveworkman #perfmatters We’re like these guys…

Slide 4

Slide 4 text

Adapting for the Times @steveworkman #perfmatters Audio clip from BBC Radio 4’s Today Programme, November 15th, 2012

Slide 5

Slide 5 text

Adapting for the Times @steveworkman #perfmatters

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Adapting for the Times @steveworkman #perfmatters #1 – Focus on Consumers

Slide 9

Slide 9 text

Adapting for the Times @steveworkman #perfmatters

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Adapting for the Times @steveworkman #perfmatters Responsive is our goal Performance is the goal

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

Adapting for the Times @steveworkman #perfmatters #2 – Segment and target your consumers

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Adapting for the Times @steveworkman #perfmatters One back-end, many UIs DB Data Model Desktop AMP Smartphone ? Proxy

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Adapting for the Times @steveworkman #perfmatters This is not how to do it

Slide 20

Slide 20 text

Adapting for the Times @steveworkman #perfmatters All devices that could be a phone

Slide 21

Slide 21 text

Adapting for the Times @steveworkman #perfmatters Desktop/Tablet view for Android 3.x and all others

Slide 22

Slide 22 text

Adapting for the Times @steveworkman #perfmatters

Slide 23

Slide 23 text

Adapting for the Times @steveworkman #perfmatters

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Adapting for the Times @steveworkman #perfmatters

Slide 26

Slide 26 text

Adapting for the Times @steveworkman #perfmatters #3 – Always use Progressive Enhancement

Slide 27

Slide 27 text

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!

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Adapting for the Times @steveworkman #perfmatters grasp '$(__).__' -e -o *.js | sed 's/.*[.]//' | uniq -c.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Adapting for the Times @steveworkman #perfmatters #4 – Performance is everything

Slide 33

Slide 33 text

Adapting for the Times @steveworkman #perfmatters More speed = more interaction Page Engagement Change Home ▲ 11% Search results ▲ 13% Business listing ▲ 21%

Slide 34

Slide 34 text

Adapting for the Times @steveworkman #perfmatters

Slide 35

Slide 35 text

Adapting for the Times @steveworkman #perfmatters But only half the site has changed… Before After

Slide 36

Slide 36 text

Adapting for the Times @steveworkman #perfmatters #5: Iterate, iterate, iterate

Slide 37

Slide 37 text

Adapting for the Times @steveworkman #perfmatters Adaptive Leap-frog Mobile Desktop Mobile Desktop Mobile Desk M D

Slide 38

Slide 38 text

Adapting for the Times @steveworkman #perfmatters

Slide 39

Slide 39 text

Adapting for the Times @steveworkman #perfmatters #6 – New is always better* (*for programming techniques)

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Adapting for the Times @steveworkman #perfmatters #7 – Measure Continuously

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Adapting for the Times @steveworkman #perfmatters Find the metrics that matter to you • Add performance.mark and measure any JS • Shows up in WPT

Slide 47

Slide 47 text

Adapting for the Times @steveworkman #perfmatters Feed these into your RUM data

Slide 48

Slide 48 text

Adapting for the Times @steveworkman #perfmatters

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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%

Slide 51

Slide 51 text

Adapting for the Times @steveworkman #perfmatters

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Adapting for the Times @steveworkman #perfmatters #8 – Do what works for you and your team

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Adapting for the Times @steveworkman #perfmatters What do you need? A responsive site, or a performant mobile site?

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Adapting for the Times @steveworkman #perfmatters Thank you Follow Me for more: @steveworkman & @yelldev Slides: speakerdeck.com/steveworkman