Adapting for the Times

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

View Slide

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

View Slide

We’re like these guys…

View Slide

Audio clip from BBC Radio 4’s Today Programme, November 15th, 2012

View Slide


View Slide

© Aljeo Malia - alejomalia.com

View Slide

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

View Slide

#1 – Focus on Consumers

View Slide


View Slide

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

View Slide

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

View Slide

Responsive is our goal
Performance is the goal

View Slide

38% of responsive sites surveyed sent
exactly the same content to all devices
https://speedcurve.com/blog/velocity-responsive-in-the-wild/

View Slide

#2 – Segment and target your
consumers

View Slide

https://www.flickr.com/photos/lukew/10412585943

View Slide

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

View Slide

One back-end, many UIs
DB Data Model
Desktop
AMP
Smartphone ?
Proxy

View Slide

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

View Slide

This is not how to do it

View Slide

All devices that could be a phone

View Slide

Desktop/Tablet view for Android 3.x and
all others

View Slide


View Slide

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

View Slide


View Slide

#3 – Always use Progressive
Enhancement

View Slide

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!

View Slide

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

View Slide

grasp '$(__).__' -e -o *.js | sed 's/.*[.]//' |
uniq -c.

View Slide

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

View Slide

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

View Slide

#4 – Performance is everything

View Slide

More speed = more interaction
Page Engagement Change
Home ▲ 11%
Search results ▲ 13%
Business listing ▲ 21%

View Slide


View Slide

But only half the site has changed…
Before After

View Slide

#5: Iterate, iterate, iterate

View Slide

Adaptive Leap-frog
Mobile
Desktop
Mobile
Desktop
Mobile
Desk
M
D

View Slide


View Slide

#6 – New is always
better*
(*for programming techniques)

View Slide

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

View Slide

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

View Slide

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

View Slide

#7 – Measure Continuously

View Slide

“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

View Slide

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

View Slide

Find the metrics that matter to you
• Add performance.mark and measure any JS
• Shows up in WPT

View Slide

Feed these into your RUM data

View Slide


View Slide

Understand the real-world impact

View Slide

Show great improvements in metrics
Page Fully loaded Under 3 seconds Under 10 seconds
Before 33% 85%
After 50% 92%

View Slide


View Slide

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)

View Slide

That’s OK
• Build for the user experience
• Build for the behaviours you want
• Build for your business model

View Slide

#8 – Do what works for you
and your team

View Slide

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

View Slide

What do you need?
A responsive site, or a
performant mobile site?

View Slide

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

View Slide

http://www.slideshare.net/firt/extreme-web-performance-for-mobile-devices-54478615
For more detail, read Max’s book

View Slide

Thank you
Follow Me for more: @steveworkman & @yelldev
Slides: speakerdeck.com/steveworkman

View Slide

Adapting for the Times

Adapting for the Times

Steve Workman

More Decks by Steve Workman

Other Decks in Technology

Featured

Transcript