Emily Grossman "The New Mobile" - SearchLove 2017

#SearchLove @goutaste
The NEW Mobile:
Proac&ve Strategies for the Next Wave

If your plans don’t
include mobile, your
plans are not ﬁnished.

Wendy Clark, Coca-Cola
Meet your customers
in the environment
of their choice, not
where it's convenient
for you.
Cyndie Shaﬀstall
Mobile is becoming not only the
new digital hub but also the bridge
to the physical world.

Thomas Husson, Forrester
Mobile is the enabling
centerpiece of digital
convergence.
Tomi T Ahonen
More Google
searches take place
on mobile devices
than on computers.

Google
If you’re not using
mobile…don’t worry -
your compeBtors are
already using it and are
geCng those customers
instead.
Jamie Turner,
60SecondMarketer
The adopBon rate of mobile is twice
that of the internet.
Emma Crowe, Somo
The smartphone is
the key markeBng
baEleground of
2016.
Andrew Smith,
Director at Escherman

“The trend has been
‘mobile was winning.’
It's now won.”
-- Eric Schmidt, Google

Time
Performance & AdopBon
New InnovaBon
Scaling
Mature Technology
Frenzy
Tech Improvements
The Technology ‘S Curve’

#SearchLove @goutaste @benedictevans
Mobile S-Curve Moving from CreaBon
to Deployment

WE ARE HERE
Mobile S-Curve Moving from CreaBon
to Deployment

Developing
PROacIve

VS.

REacIve
Mobile
Strategies

Understanding The NEW (Pro-AcBve)
Mobile QuesBons For…
PLATFORM PERFORMANCE ANALYTICS

Understanding The NEW (Pro-AcBve)
Mobile QuesBons For…
PLATFORM PERFORMANCE ANALYTICS
FUTURE NEW OLD

MOBILE PLATFORM
FUTURE: UI-AgnosBc Content NEW: Web of Apps & App-Like Web OLD: Web vs. Apps

Old Model of
Thinking:
“Web VS. Apps”
OLD: Web vs. Apps
@paul_kinlan paul.kinlan.me/the-headless-web/
“Should I build
an app or a
website?”

OLD: Web vs. Apps
Engaging, Immersive Experiences
PotenIal Reach
APPS
WEB
NaBve Features Made Apps More Engaging
Web Features Made Sites More Discoverable

A Web of Apps – App Indexing
NEW: Web of Apps & App-Like Web OLD: Web vs. Apps
ﬁrebase.google.com/docs/app-indexing/ *App Icons Only on Android

hXp://www.cc.com/shows/the-daily-
show-with-trevor-noah

comedy-central://example-deep-link-to-
daily-show
Example deep links:
A Web of Apps – Deep Linking

A Web of Apps – ‘Instant Apps’
developer.android.com/topic/instant-apps/index.html

New: A Web of Apps & App-Like Websites
PotenIal Reach
APPS Deep
Links
WEB

Meanwhile…
bit.ly/website-push-noIﬁcaIons

Meanwhile…
bit.ly/PWA-install

The App-Like Web: Progressive Web Apps
@suzzicks bit.ly/cindy-mozcon-2016

The App-Like Web: What is a ‘PWA’?
@suzzicks
HTTPS Mobile
Friendly
Website
Service
Worker
Web App
Manifest
=+
Progressive Web
App
bit.ly/cindy-mozcon-2016

“Service Workers can give users the
best of both [app & web] worlds:
A middle ground le6ng you choose
how and when the site should be
integrated deeper into the device.”
@paul_kinlan paul.kinlan.me/slice-the-web/

The App-Like Web – Service Workers
Service Workers are so powerful, that browsers wont let you use it without encrypBon
HTTPS REQUIRED

@paul_kinlan paul.kinlan.me/the-headless-web/

PotenIal Reach
APPS Deep
Links
WEB
PWA

“Prepare for a 6me when no
one ever visits your website.
Awareness, research, and
conversion will all happen in
the search results…”
-- David Mihm
bit.ly/david-mihm-2017

Search is Already Becoming the UI

This is NOT the Only Measure of Success

Success Also Looks Like THIS

Get Be]er at Being a Data Source:
Structured Data (Schema)

Structured Data Forma^ng
moz.com/blog/json-ld-for-beginners

Structured Data Immediate SEO Beneﬁts
developers.google.com/search/docs/data-types/books

APIs

What is Ly`?

APIs: MobileMoxie is Doing It, Too
MobileMoxie’s beta
API lets you pull our
tools into YOUR
exisIng dashboard

MOBILE PERFORMANCE
FUTURE: Network OpBmizaBon NEW: Progressive Enhancement OLD: Loading OpBmizaBon

Performance MaXers,
Mobile Performance MaXers More
bit.ly/google-speed-stats

‘RAIL’ Performance Framework
OLD: Loading OpBmizaBon
developers.google.com/web/fundamentals/performance/rail

Check Your Loading OpBmizaBon
developers.google.com/speed/pagespeed/insights/

testmysite.thinkwithgoogle.com

testmysite.thinkwithgoogle.com
These are
the basics
we all sBll
get wrong

Loading OpBmizaBon
bit.ly/wordpress-performance-fail
“Hi, I’m a Wordpress
Theme with 23 JS libraries
and 20 stylesheets!”

Loading OpBmizaBon
“Hi, I’m a Wordpress
Theme with 23 JS libraries
and 20 stylesheets!”
bit.ly/wordpress-performance-fail

bit.ly/mobile-speed2 from
We Want Faster Sites, But We’re Also
Shipping More JS Than Ever
@samccone bit.ly/rel-preload-demo

Tools That Help With CriBcal Path Rendering
webpagetest.org
WebPageTest

Tools That Help With CriBcal Path Rendering
@ipullrank moz.com/blog/the-technical-seo-renaissance
Chrome Dev Tools

NEW: Progressive Enhancement OLD: Loading OpBmizaBon
Progressive Enhancement

Progressive Enhancement
Not this ‘progressive’…

An escalator can never break, it can
only become stairs. There would
never be an ‘escalator temporarily
out of order’ sign, only an ‘escalator
temporarily stairs. Sorry for the
convenience.’ -- Mitch Hedberg

How Service Workers Can Help OpBmize Repeat Visits
medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-oﬄine-
support-and-network-resilience-c84db889162c#.jtl0ooqu2

Service Workers Wont Help Everywhere… But
Remember They’re Enhancements

Service Workers Wont Help Everywhere… But
Remember They’re Enhancements
‘Progressive Web App Temporarily
FuncKonal Website on Safari.
Sorry for the convenience.’

Browser Assists

ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/
Be 99% sure! Prerender will load ALL of
the assets for the page. If you are
wrong, this can waste baXery and
bandwidth from your mobile users.

Good use cases (near certainty on click):
•  Next page in paginated arIcle
•  “Logged in” page from Login Page
Browser Assists

<link rel="prerender" href="hXp://example.com/page">
<link rel=”prerender prefetch” href=”hXp://www.example.com/page”>

We’re Halfway to ConnecIng Everyone
5.5bn people over 14 years old, close to 5bn with mobile phones, ~2.5bn smartphones
Future: Network OpBmizaBon &
Oﬄine FuncBonality

The average mobile user is not on a $600+ phone & over
half of acIve Android users have 1 GB or less in Ram
Future: Network OpBmizaBon &
Oﬄine FuncBonality
WATCH: bit.ly/progressive-performance

Image: kinsta.com/learn/what-is-hXp2/#goal_of_creaIng_hXp2
WE ARE HERE
YOUR AUDIENCE
MAY BE HERE
Understanding Network ConnecBon Variability
Treat the Network as an Enhancement

Understand Network ConnecBon Variability
Read: bit.ly/hXp2-intro
Image: kinsta.com/learn/what-is-hXp2/#goal_of_creaIng_hXp2
HTTP/2 enables full request & response mulBplexing
HTTP/2 will be criBcal in connec&ng the next billion

•  Prefetch & Prerender speed up your next navigaIon
•  Preload speeds up the current one
Pre-load is like saying, “Hey, browser! Here’s a resource you’re going to need later on, so start loading it now.”
•  Pre-load can specify the download “as” =
•  "script",
•  "style",
•  "image",
•  "media",
•  "document”

bit.ly/what-is-rel-preload
OpBmize Network Requests
HTTP/2 + PreLoad = Moves the ‘start download’ Bme of a criBcal asset closer to iniBal request

bit.ly/rel-preload-demo @samccone

Understand Network ConnecBon Variability
Service Workers Help Op&mize for Network Connec&vity
@pierrefar deliberatedigital.com/mobile-seo

Service Workers
Can Even Give
Websites Oﬄine
FuncBonality

Service Workers Can Even Give
Websites Oﬄine FuncBonality

FUTURE: Beyond the Browser NEW: Recovering Dark Data OLD: Mobile-speciﬁc Data
MOBILE ANALYTICS

OLD: Mobile-speciﬁc Data
“Where Are We Best Targe&ng
Mobile Queries in Search Results?”

Google
AnalyBcs -
Default
Google
AnalyBcs -
Devices
Google
AnalyBcs -
Browsers
Usually
social app
browsers
“How Are We
Serving Our Mobile
Users When They
Land Here?”

SEMRUSH “Mobile ReporBng”

@aleyda bit.ly/keyword-tools-matrix

Which of These Devices Are ‘Mobile’?
All of these have a big screen, keyboard, and roughly the same performance – What is
the diﬀerence between them?
Lumia
Screen +
Keyboard
iPad Pro
Surface
Pro
MacBook
@benedictevans

NEW: Recovering Dark Data OLD: Mobile-speciﬁc Data
Newer: Recover Dark Data & Get a
More RealisBc View of User Behavior

Recovering Dark (Mobile) Traﬃc
@mdsimmonds
bit.ly/dark-traﬃc-slides

Another
One For
The
“Direct”
Bucket

Cross-Browser A]ribuBon is Ge^ng
More RealisBc…
arstechnica.com/security/2017/02/now-sites-can-ﬁngerprint-you-online-even-when-
you-use-mulIple-browsers/
“Now sites can
ﬁngerprint you
online even
when you use
mulBple
browsers”

…But Cross-Device A]ribuBon is SBll Crazy
Hard (Especially Between NaBve Apps & Web)
Signed-In Users are usually our best shot at accurate aEribuBon here

Rankings Tracking on Mobile Today Is Near Pointless

How Do You Record Offline “Traffic”?
bit.ly/track-offline

What About Push NoBﬁcaBon Behaviors?
bit.ly/GA-push-tracking

ü  Track your mobile
segments…
Yes, sIll do the
basics…
ü  pass the Mobile
Friendly Test
ü  Compress and
minify your
resources (images,
JS…)

ü  Pay aEenBon to
Service Workers
and new
performance
techniques
…but also start to build
the foundaIons for
what’s coming next.

ü  HTTPS is tables stakes
for a lot of the future
ü  Build out your
plajorm &
prepare to be
UI-AgnosBc
segments…
Yes, sIll do the
basics…
Friendly Test
ü  Compress and
minify your
resources (images,
JS…)
ü  Figure out how we’re going to track
it all outside a tradiBonal browser

ü  Pay aEenBon to
Service Workers
and new
performance
techniques
…but also start to build
the foundaIons for
what’s coming next.

ü  HTTPS is tables stakes
for a lot of the future
ü  Build out your
plajorm &
prepare to be
UI-AgnosBc
Be less REacIve – be more PROacIve,
and think about how you can make
the mobile world a beXer place.
segments…
Yes, sIll do the
basics…
Friendly Test
ü  Compress and
minify your
resources (images,
JS…)
ü  Figure out how we’re going to track
it all outside a tradiBonal browser

Emily Grossman
@goutaste
@mobilemoxie

www.mobilemoxie.com

Thank You!

Bonus Slides Next!

@benedictevans
Mobile People You Should Follow
@mdsimmonds @ipullrank
@aleyda
@samccone
@pierrefar
@paul_kinlan
@suzzicks
@davidmihm
@slightlylate
@malteubl
@marcustober
Mobile trends
Performance/ SEO
SEO
Trends/ SEO
Web Trends/ PWAs
Dark Traﬃc
Mobile/ Local
Mobile SEO
Performance
PWAs
AMP
Data/ Tools

The Mobile S-Curve is Passing the PC S-Curve

pwa.rocks

theguardian.com/info/developer-blog/2016/aug/19/how-we-made-the-riorun-
progressive-web-app

Structured Data TesBng
search.google.com/structured-data/tesIng-tool/u/0/

Structured Data ReporBng
(Search Console)

PRPL Performance Framework for Web Apps
Push, Render, Pre-Cache, Lazy-Load
developers.google.com/web/fundamentals/performance/prpl-paXern/

Emily Grossman "The New Mobile" - SearchLove 2017

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Emily Grossman "The New Mobile" - SearchLove 2017

Similaire à Emily Grossman "The New Mobile" - SearchLove 2017 (20)

Plus de MobileMoxie

Plus de MobileMoxie (15)

Dernier

Dernier (6)

Emily Grossman "The New Mobile" - SearchLove 2017