Mobile-First Indexing and AMP - SMX Advanced 2018

#SMX #13A @AlexisKSanders
Mobile-First & AMP For The Advanced SEO
Google is
adapting to the
worldwide shift
to mobile.

Merkle SEO team works across a vast array of clients

I’m Sophia’s #ProudAunt too.
"relatedTo": {
"@type": "Person",
"name": "Sophia"
}
Helping me test Google’s machine learning optimized chocolate chip cookie recipe!
“Bayesian Optimization for a Better Dessert” -> https://research.google.com/pubs/pub46507.html

• Why mobile?
• Mobile-first indexing
• AMP
• Site speed
• Mobile UX
Agenda

0
50
100
150
200
250
2010 2011 2012 2013 2014 2015 2016 2017 2018
MillionsMore people accessing the Internet via mobile & Google is adapting
Source: Mobile Internet Users – United States, eMarketer, January 2018
API
US Mobile Internet users with Google’s mobile updates
App
indexing
announced
10/13
Google
acquired
Firebase
9/11
Mobile-
friendly
label
11/14
Mobilegeddon
4/15
Mobile-friendly
testing tool
5/16
AMP project
announced
10/15
Mobile-
interstitial
penalty
8/16
Mobile-first
indexing
announcement
11/16
PWAs created
6/15
PWA
announcement
11/16
Mobile-
friendliness API
1/17
Mobile speed
ranking factor
1/18
Mobile-first
index roll-out
announced
3/18
Mobile-friendly
label removed
8/16
Google
officially
recommends
responsive
6/12
Google
suggest
adaptive (1
HTML, 2 CSS)
2/12

That story persists globally
0.0
0.5
1.0
1.5
2.0
2.5
3.0
2010 2011 2012 2013 2014 2015 2016 2017 2018
Billions
Western Europe
North America
Middle East & Africa
Latin America
Central & Eastern Europe
Asia-Pacific
Source: Mobile Internet Users – United States, eMarketer, January 2018
Worldwide mobile Internet users

The issue is mobile ≠ desktop.
It has its own set of challenges

1. Smaller screen sizes
3" 6" 10" 13" 27"1"
Phone Tablet Desktop
Secondary content
Primary content
Secondary content
Primary
content
Secondary
content
Primary
content
UX designers trying to fit
everything into two inches

And then there’s thumb reach…
EASY
PEEZY
OKAY
THUMB
STRAIN
*https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
49% of users
tested* used one hand
67% one-handers
used right hand

2. Fat finger issues

3. Forms
Sign up
First name
Last name
Phone number
Email
Choose a password
Confirm password
Date of birth
Postal address 1
Postal address 2
Postal address 3
Postal address 4
Gender
Male Female
I have read and accept the Terms of Use

4. Mobile devices slower
https://httparchive.org/reports/chrome-ux-report
Desktop outperformed mobile hitting onload event earlier via Chrome UX Report

5. Mobile networks are slower than desktop
Ookla’s Speedtest Global Index - http://www.speedtest.net/global-index
0 10 20 30 40 50 60
Africa
South America
Middle East
Eastern Europe
Asia-Pacific
Europe
North America
Average of Desktop Download Mbps Average of Mobile Download Mbps
Desktop typically has higher download speeds

6. Data consumption is growing
Ericsson’s Mobility Report, Feb 2018 Interim - https://www.ericsson.com/en/mobility-report
Ericsson (ICT) reports increase of +55% YQoYQ

7. Traffic is split between browsers and apps
ComScore’s 2017 US Mobile App Report

8. We get stressed out by mobile delays…
Ericsson ConsumerLab, Neurons Inc., 2015

Local
9. Behavior
Think with Google  https://goo.gl/RjGHyp; https://goo.gl/nR68hg
Curiosities
Urgent need
In-store assistance Micro-productivity
Entertainment
near me, navigation videos, games, social, musichealth, random purchase, west world season 2
Why do ballroom dancers make weird faces? What does this cost on Amazon? Working, booking plane, organize life

10. People are still converting on desktop
Which devices did people use to make their purchase?
https://www.consumerbarometer.com/en/graph-builder/?question=S34&filter=country:united_states

11. Even CTR on devices is different
0%
2%
4%
6%
8%
10%
12%
14%
1 2 3 4 5 6 7 8 9 10
Financial
0%
2%
4%
6%
8%
10%
12%
14%
1 2 3 4 5 6 7 8 9 10
Food
0%
2%
4%
6%
8%
10%
12%
14%
16%
1 2 3 4 5 6 7 8 9 10
Health
0%
2%
4%
6%
8%
10%
12%
14%
16%
1 2 3 4 5 6 7 8 9 10
HighTech
0%
5%
10%
15%
20%
25%
1 2 3 4 5 6 7 8 9 10
Insurance
0%
2%
4%
6%
8%
10%
12%
14%
16%
1 2 3 4 5 6 7 8 9 10
Publishing
0%
1%
2%
3%
4%
5%
6%
1 2 3 4 5 6 7 8 9 10
Travel
0%
2%
4%
6%
8%
10%
12%
14%
1 2 3 4 5 6 7 8 9 10
Retail
Experiment notes: 390+ sites; GSC impression and click data
CTR
Position
(sides note: I didn’t expect
desktop to out perform mobile)
Thank you @kellycRasmussen for your HiveQL support

• Mobile has
• less processing power (i.e., less able to multitask)
• less RAM, storage
• stricter hardware requirements
• However, it also
• typically cost less
• more portable
…. and there’s more…

Using mobile version for indexing and ranking
Mobile-first indexing

“Mobile-first indexing means Google will predominantly use the mobile version of the
content for indexing and ranking.” -Google
What is mobile-first indexing?
https://developers.google.com/search/mobile-sites/mobile-first-indexing;
https://support.google.com/webmasters/answer/1061943
Mozilla/5.0 (Linux;
Android 6.0.1; Nexus
5X Build/MMB29P)
AppleWebKit/537.36
(KHTML, like Gecko)
Chrome/41.0.2272.96
Mobile Safari/537.36
(compatible;
Googlebot/2.1;
+http://www.google.com
/bot.html)
rel="alternate"
rel="canonical"
Mobile Result
https://m.example.com/
Meta description
Desktop Result
https://www.example.com/
Meta description
if (separate
URLs exist)
Mobile-first index
(contains both mobile and desktop experiences;
if (mobile version exists) {mobile = index experience})
User gets
served
device-
relevant
results

Share these #SMXInsights on your social channels!
#SMXInsights
The mobile-first index is
about prioritizing mobile.
It’s not a separate
index/database storing.

Mobile-first indexing:
For responsive, mobile-friendly sites

Nada!* You’re good (in terms of mobile-first indexing)!
*Except you’ll need to watch latency! (we’ll get to this later)

Mobile-first indexing:
For separate sites (e.g., m dot),
dynamic, or adaptive sites

 Ensure parity between mobile
and desktop:
 Content (text, images, videos)
 Structured data
 Internal links
 GSC settings, including:
 URL Parameters
 Data Highlighter
To do list:
 Ensure appropriate <link> tag:
 All rel="canonical" to desktop
 Hreflang to equivalent device
 If AMP URLs:
 All rel="amp-html" to amp
 Ensure pages are mobile-
friendly
 Reasonable speed (aim for less
than <3)

Backlinks do not need to be changed, Google will use
canonical cluster
https://twitter.com/JohnMu/status/927134567840059392
End-state
desktop URL
rel="canonical"
Duplicate
page Duplicate
page
Mobile
Duplicate
page
AMP
Desktop
Mobile

<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>Desktop URLs here only = good</loc>
</url>
</urlset>
Mobile URLs do not need to be in the XML sitemap

Mobile-first parity checker
https://technicalseo.c
om/seo-tools/mobile-
first-index/
@maxxeight
Max Prin
Merkle

Mobile-first parity checker
https://technicalseo.com/seo-tools/mobile-first-index/

“The AMP Project is an open-source initiative aiming to
make the web better for all. The project enables the
creation of websites and ads that are consistently fast,
beautiful and high-performing across devices and
distribution platforms.” – AMP Project
What is AMP?
https://www.ampproject.org/learn/overview/
million domains Top tech providers
& platforms
100+25

What is AMP? Interactive AMP Stories
https://www.ampproject.org/latest/blog/amps-new-horizons/

What is AMP? Dynamic Emails (TBD)
https://github.com/ampproject/amphtml/issues/13457
via features like amp-bind and amp-list

Share these #SMXInsights on your social channels!
#SMXInsights
It’s not about
AMP; it’s about
speed.

AMP in the Wild

Mobile,
684,070,
100%
Desktop, 12, 0%
AMP rankings are virtually all mobile
HUGETHANKSTO
Mobile,
2,798,953,
100%
Desktop, 9,063, 0%
Mobile,
5,636,317,
100%
Desktop, 6,302, 0%
Mobile,
16,625,428,
100%
Desktop, 2,798, 0%
Mobile,
1,736,975,
100%
Desktop, 21, 0%
Mobile,
1,467,617,
100%
Desktop, 743, 0%
BrightEdge Google US (Desktop) v Google US (S) for 12 Months for AMP Experience

• Comparing 
• Main URL: https://www.alibaba.com/showroom/ladies-clothing.html
• AMP URL: https://m.alibaba.com/amp/showroom/ladies-clothing.html
• AMP Cache: https://m-alibaba-
com.cdn.ampproject.org/c/s/m.alibaba.com/amp/showroom/ladies-
clothing.html
• Google AMP Cache: Script to search Google and open AMP experience,
only recording https://goo.gl/ZHCYyb
AMP Speed
Thank Martin Schierle for WBT.org script 
https://medium.com/@martin.schierle

Google AMP cache enabled Pinterest X to be 43% faster
https://goo.gl/Ym5iGU
Main
URL
AMP
URL
AMP
Cache
URL
Google
AMP
Cache
URL

The critical rendering path also flows better
Main URL
AMP URL
AMP Cache URL
GoogleAMP Cache URL

The AMP experiences had significantly less requests
(especially images)
Main URL
AMP URL
AMP Cache URL
GoogleAMP Cache URL

Why would a site AMP it up?

Why AMP?
1. Publishing/
blog sites
4.Testing CVR of
speed wins
2. Limited servers
in certain area
5. Looking for
temporary wins
3. Looking for
new framework
Qualify for Google
carousels, “visual stories”
Looking to move
site/experience to AMP
for speed benefits
Get the benefits of
Google cache’s
TTFB
Testing how much speed
will impact conversions
Maintaining two sites,
there may be temporary wins

Why is AMP so lighting fast?
https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597
https://www.ampproject.org/learn/about-how/

AMP is designed to gracefully deal with JavaScript failing
AMP
Regular
websites

resource 1
resource 2
resource 3
resource 1
resource 2
resource 3
AMP prevents render-blocking JavaScript by
Asynchronous JS
Total LoadTime
Total LoadTime
Initiated
Synchronous
Asynchronous

• AMP doesn’t let extension mechanisms (e.g., lightboxes,
Instagram embeds, tweets, IFrames, etc.) block page rendering
• All custom scripts must tell AMP system what it will become
• E.g., amp-instagram script tells the system that there will be an amp-
instagram tag. AMP creates the Instagram embed box before it even
knows what it will include
Extensions and embeds don’t block rendering page layout
<script async custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-
0.1.js"></script>

Proposal:
• Run on a web worker that receives user gesture events
• Run inside a custom-built sandbox & virtual DOM environment in the worker
• 3P script will have max file size
Third-Party JavaScript not allowed yet (but it’s in queue)
https://github.com/ampproject/amphtml/issues/13471

• Runtime cost of analytics instrumentation is independent of
number of used providers
• No additional, unnecessary JavaScript
• No superfluous use of CPU
One analytics tag’s sunk cost is spread out for multiple
analytics tags
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-
0.1.js"></script>
AMP Analytics Vendors: https://www.ampproject.org/docs/ads_analytics/analytics-vendors

Most websites:
All CSS is inline within HTML document
AMP:
GET HTML document
HTML
GET main.css
main.
CSS
GET HTML doc
HTML
+ CSS
No additional requests to
get .css files, no extra
round trip time.
GET sec.css
sec.
CSS
Extraroundtriptime

Byte Math:
• 1 character = 1 byte
• 1,000 bytes = 1 kB
• 50 kB = 50,000 bytes
• 50,000 bytes = 50,000 characters
• AMP allows 50,000 characters of inline CSS.
CSS limited to maximum size of 50 kilobytes

Lazy loading, prefetches lazy loaded resources
load initial view
load upon user
scrolling action

GPU (graphics processing unit):
• Hardware designed to take huge
batches of data and perform
repetitive operations quickly
• Take heavy calculations (needed for
graphic rendering) burden off CPU
(which tends to skip all over the
place)
• Gives us buttery smooth transition,
opacity, and transformation animations
Only run GPU-accelerated CSS animations
GIF is modified version of https://jsfiddle.net/GdgYm/188/

Fonts require zero HTTP requests (Asynchronous
JavaScript + inline CSS)
Traditional setup requires CSS files to be loaded and subsequent font request:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

AMP pre-positions resources based on preset sizes to
layout pages (i.e., loads the page layout without needing
to recalculate)
https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-foundations/#4

• Prioritizes downloading
resources above-the-fold (i.e.,
viewport first)
• Optimizes downloads so that the
most important resources are
downloaded first
Intelligent resource prioritization
Prioritized
Secondary

• Ensure HTTP requests are as
fast as possible (when clicked)
• Doesn’t prerender things that
might be expensive in terms
of CPU (third-party IFrames)
• Prefetch lazy-loaded
resources
AMP use extensive resource hinting

A proxy-based CDN that enables AMP to:
1. Validate AMP documents
2. Cache resources (including: HTML,
images, fonts, etc.) under 12MB
3. Add performance optimizations
4. Rewrite URLs to normalize parsing
Google AMP Cache
https://developers.google.com/amp/cache/overview

 Preloads AMP pages
 Serves AMP over a secure channel
 Leverages same-origin loading of resources via HTTP 2.0
 Adds prefetch hint tags for browsers
 Image optimizations
– Conversion of images to WebP
– Removal of image metadata
– Generations of alternative sized versions of image
– Adding image SRCSET attributes
– If “Save-Data” header is set to “on” lowers image quality
Google AMP Cache - Optimizations

• HTML comments and whitespace inside tags are removed
• Tag and attribute names are lowercased
• Text is escaped
• Attribute values are consistently quoted and escaped
• All tags are closed (except for HTML5 void elements)
• Elements that can only be in the body get moved into the body
• Encoded text characters are simplified, using UTF-8 equivalent
characters
• Outbound links are made absolute
Google AMP Cache - Normalization

Why people are hesitant about AMP?

Example:
https://www.google.com/amp/s/amp.theguardian.com/artanddesign/2018/
apr/10/afrofuturism-exhibition-in-their-own-form-museum-contemporary-
photography-chicago
Hosting on Google AMP Cache URLs
Concerns:
• All data flowing through Google’s CDN
• Note: Google has mentioned they are not collecting any data from
AMP pages
• Website hosted on Google URL
• Note: Google has also mentioned they are working on removing
https://www.google.com/amp

Both experiences require
executive oversight, design,
development, ongoing
maintenance,
monitoring/analytics efforts.
“If you’re going to teach a bear to
dance, be prepared to dance until
it’s ready to stop.” – Bob Manion
Maintaining two experiences

Composite data from four companies with AMP, from AMP Project
and Forrester. I’d categorize this as optimistic, blue-sky numbers.
Doing AMP right (i.e., mimicking experiences) isn’t cheap
https://www.ampproject.org/static/extra/The_Total_Economic_Impact_Of_AMP.pdf
6 month payback
$211K cost
$1MM estimated return
over 3 years

AMP Flowchart
Is AMP your
end-game?
Why live life in limbo
- go full AMP.
Use it for speed data
Create business cases
to influence site
architecture and
speed optimizations
Does AMP
meet needs in its
current state?
Check AMP roadmap
Going to implement?
Focus on optimizing
current site’s speed
Yes Not yet Yes Nope

• Prune code (and HTML markup),
cut anything not being used
• Compress text-based assets (gzip,
brotli, zopfli)
• Consolidate multiple HTTP
redirect chains
• Use system fonts (where possible)
• Cache static resources
• Leverage resource hinting (aka
pre-* party)
• Activate HTTP/2
• Minify CSS, JavaScript, and HTML
Could focus efforts optimizing your main site’s speed
• Ensure JavaScript and CSS aren’t
interfering with critical path
(inline, defer in HTML, or add
“async” tag)
• Consider conditionally serving
code
• Use a CDN (if geographically
diverse user-based)
• Optimize images (compress,
serve right image format/size on
particular device, lazy load, cache
appropriately, “save-data”
header, sprites, etc.)
• Consider implementing PWA

The Web Standards
Working on web standards that will allow instant loading for non-AMP web content
https://amphtml.wordpress.com/2018/03/08/standardizing-lessons-learned-from-amp/

Status
https://github.com/ampproject/amphtml/blob/master/contributing/web-standards-related-to-amp.md
Standard/feature Relation Status
Web Packaging
Privacy-preserving preloading from cache
under publisher URL
Active drafting, IETF consensus
seeking
Iframe promotion
AMP Carousel like UI with navigation to
publisher
Under discussion inWICG
PerformanceTimeline
Real world metric collection. This is the
framework. New metrics may be needed.
Shipping in first browsers
Perf metric: (Initial) Layout
stability
Metric for how often layout changes without
user action based on elements resizing (such
as when an unsized image loads or an iframe
resizes)
Discussing feasibility with
implementers
Feature Policy
Allows web pages to turn off legacy features
or opt into new behavior. This is the
framework. New policies may be needed

• Allow for preloading from cache retaining publisher URL, so
it can be shared offline, either with or without a proof that
they came from the original website
• Technology that will enable Google to remove the
https://www.google.com/amp in URLs
• Navigations from Google search can take advantage of
privacy-preserving preloading and the performance of
Google’s AMP cache, while URLs remain and the primary
security context of the web origin remains in-tact
Web standards - Web Packaging 🌐📦
https://github.com/WICG/webpackage
https://amphtml.wordpress.com/2018/01/09/improving-urls-for-amp-pages/amp/

Web standards - IFrame promotion
1. Load a page with target/next pages loading in hidden IFrames
2. Upon click, display already-loaded Iframe/new page full-screen
3. Update the URL to reflect the state change
1 2<iframe>
</iframe>
https://discourse.wicg.io/t/proposal-for-promotable-iframe/2375

• Methods to store and
retrieve high-resolution real
world performance metric
data
• Enable web developers to
access, instrument, and
retrieve various performance
metrics from the full lifecycle
of a web application
Web standards - Performance Timeline
https://w3c.github.io/performance-timeline/

• Allows sites to selectively enable and disable use of various
browser features and APIs (e.g., geolocation, camera,
microphone, vibration)
• The developer may want to selectively disable access to certain browser
features and APIs to "lock down" their application (added security)
• The developer may want to selectively enable access to certain browser
features and APIs (may be disabled by default)
Web standards: Feature-Policy Header
https://wicg.github.io/feature-policy/
Feature-Policy: vibrate 'none'; geolocation 'none'

Web standards – more…
https://github.com/ampproject/amphtml/blob/master/contributing/web-standards-related-to-amp.md
Standard/feature Relation Status
Perf metric: Expected Queueing Time
Metric for how long it takes for main thread to
react to user action
Feasibility exploration.
Iframe performance isolation
Possible under current standards, but requires
browsers to implement. Reduces need for embeds
to behave well
Chrome has 2 efforts in progress (Site isolation,
cooperative multitasking).
Transfer size policy: Limit amount of main
thread JS
Incentivize off-main-thread computation. Just an idea.
PaintTiming 1
Initial paint related metrics (performance
assessment
Feature Policy: Prevent navigation without
user action
Similar to iframe sandbox but for top level
window.
Just an idea.
CSP: Stricter CSP in pre-render mode
Allow pages to restrict and make it observable
what they cannot do when being pre-rendered.
Just an idea.
Feature Policy: No unsized media
Prevent media (images) to resize based on
intrinsic size
Under discussion
Feature Policy: No uncomposited
animations
Allow pages to opt into only running animations
that can be composited on the GPU.
Just an idea.
Responsive image preload Allows pre-loading of responsive images. Under discussion. In Chrome behind flag.

Also, check out 

AMP by Example (ampbyexample.com)

AMP Start (ampstart.com)

Mobile UX

Do webpages function?

Simple to use?
Can everything be found easily?

Is content on the page visible?
Are pages aesthetically pleasing?

Are pages trust-inspiring?
Secure?

How much friction between user
converting can you remove?

Are pages 20% faster than competitive
set?

Speed
Frictionless
conversion
Trust
Aesthetics
Accessible content
Easy to navigate
Functionality
SEO/UX Goals Are you 20% faster than competitive set?
Pages must work for users
to visit site and return
Information architecture should
enable user to find information
easily
Text should be visible, click elements
should be spaced appropriately, etc.
How appealing is the look, feel, vibe of
the site to users
Without trust, sites are utilities. Are appropriate
sections HTTPS? Does the aesthetic inspire trust?
How easy is it to convert? Can any bottlenecks be
alleviated?

LEARN MORE: UPCOMING @SMX EVENTS
THANK YOU!
SEE YOU AT THE NEXT #SMX
@AlexisKSanders
/in/alexissanders

https://www.flaticon.com/authors/:
• Alfredo Hernandez
• AnhGreen
• Dave Gandy
• Eucalyp
• Freepik
• Google
• Kiranshastry
• Nikita Golubev
• roundicons
• SimpleIcon
• Smashicons
• Vectors Market
Icon Sources

Mobile-First Indexing and AMP - SMX Advanced 2018

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mobile-First Indexing and AMP - SMX Advanced 2018

Similar to Mobile-First Indexing and AMP - SMX Advanced 2018 (20)

More from Alexis Sanders

More from Alexis Sanders (20)

Recently uploaded

Recently uploaded (20)

Mobile-First Indexing and AMP - SMX Advanced 2018

Editor's Notes