The AMP Project (Accelerated Mobile Pages) has been launched as an open source initiative between tech companies, search engines, publishers, CRM providers, CMS providers and social media platforms as a solution to speed up the mobile web. What is AMP? Why is it needed? How does it achieve its speed? Where is the project at now? What does the future hold for AMP? To AMPFinity and Beyond

1. WHY
AMP?
HOW
AMP?
WOW
AMP?
NOW
AMP?
TO
AMP
INFINITY
AND
BEYOND?
ACCELERATED
MOBILE
PAGES
(AMP)
–
SO
FAR
&
INTO
THE
FUTURE Dawn
Anderson
@
dawnieando

2. ?
WHAT
IS
AMP??

3. HOW AMP?
?
THE
AMP
PROJECT
ACCELERATED
MOBILE
PAGES

4. ?
BRINGING
SUPER
FAST
CONTENT
ON
THE
MOBILE
WEB
TO
PAGES
NEAR
YOU

5. ?
WHY
AMP??

6. ?
WHY AMP?
“More
searches
on
Google
are
made
on
mobile
than
desktop”
(Richard
Gingras,
Head
of
Google
News,
Google
I/O
Developer
Conference)

7. ?
WHY AMP?
By
2020
>
5
billion
mobile
users
globally
to
accessing
the
internet
(Source:
Cisco)

8. ?
WHY AMP?
1
BILLION
MONTHLY
CHROME
USERS
ALONE
STATE
OF
THE
UNION
– MOBILE
(Google
I/O)

9. WHY AMP?
?
DESKTOP
IS
IN
DECLINE “The
door’s
this
way”
“I
don’t
want
to
go”
Now
More
Monthly
Searches
On
Mobile
Than
Desktop

10. ?
WHY AMP?
Source:
Google
I/O
The
average
person
checks
their
phone
over
150
x
per
day
We
spend
177
minutes
On
our
phones
per
day
Mobile
conversion
rates
have
increased
29%
Over
the
past
year
MOBILE
USER
BEHAVIOUR
IS
FUNDAMENTALLY
DIFFERENT
TO
DESKTOP
“The
move
to
mobile
-­‐ user
behaviour is
changing”

11. WHY AMP?
?
Source:
Google
Research
MANY,
MANY
(150+)
SHORT
BURST
DAILY
MOBILE
‘MOMENTS
OF
NEED’

12. WHY AMP?
?
“I
can
concentrate
for
longer
than
you”
IMAGE
ATTRIBUTION:
WIKIPEDIA
9
SECONDS
8 SECONDS
“The
move
to
mobile
-­‐ user
behaviour is
changing”

13. WHY AMP?
?
WE’VE
GONE
FROM
‘ALWAYS
CONNECTED’
TO
‘OVER-­‐
CONNECTED’
OPERATE
ACROSS
5
DIFFERENT
SCREENS
(MOBILE,
TABLET
OR
GAMING
DEVICE,
DESKTOP,
LAPTOP,
TV)
THERE’S
A
LOT
OF
COMPETITION
FOR
OUR
LIMITED
ATTENTION
SPAN
“I
can
concentrate
for
longer
than
you”
IMAGE
ATTRIBUTION:
WIKIPEDIA
9
SECONDS

14. WHY AMP?
?
’MOBILE
FIRST’
IS
SIMPLY
NOT
GOOD
ENOUGH
NOW
WE
NOW
NEED:
‘MOBILE
FIRST,
FAST’
“I
can
concentrate
for
longer
than
you”
IMAGE
ATTRIBUTION:
WIKIPEDIA

15. WHY AMP?
?
'Sweet
Shop
Syndrome’
CMS
Plugins
-­‐ modules
on
Drupal,
plugins
on
Wordpress.
We
all
love
things
that
do
stuff
,but
then
we
forget
that
they
are
there,
and
often
don't
disable
or
remove
them
and
they
get
called
and
they
often
have
javascript in
them.
‘ALL
THE
SHINY
THINGS’

16. ?
WHY AMP?
WHY
WE
CAN’T
HAVE
NICE
THINGS
OVERKILL
IN
ALL
THINGS
CHOKING
THE
MOBILE
WEB
WITH
THINGS
NOT
DESIGNED
TO
BE
USED
ON
MOBILE
DEVICES
AND
ON
MOBILE
CONNECTIONS,
WITH
MOBILE
BATTERIES
AND
DATA
DOWNLOAD
LIMITS
“Ooohhh
Shiny”

17. WHY AMP?
?
HUGE
AMOUNTS
OF
JAVASCRIPT
PULLED
IN
WITH
THOSE
CALLS
TO
SERVERS
OFTEN
FROM
ACROSS
OCEANS
AND
CONTINENTS
SLOW
LOADING
WEBSITES
• Slow
loading
websites
• Images
moving
around
as
other
images
try
to
join
the
page
• Page
inclusions
being
called
from
across
oceans
and
continents
• Many
javascripts blocking
the
DOM
• Third
party
scripts
with
many
redirects
• Content
shuffling
around
as
it
calculates
sizes
from
varying
dimension
images
• CSS
stylesheets
calling
lots
of
legacy
content
• A
total
strain
on
mobile
devices
unnecessary
data
usage
• A
payload
being
called
not
designed
for
mobile
use

18. NOT EVERYTHING ARRIVES AT THE SAME TIME
?
NON
AMP
PAGE
Lorem
ipsum
dolor
sit
amet,
consectetur adipiscing elit.
Curabitur at
posuere lacus.
Pellentesque vitae
auctor
risus.
Pellentesque molestie,
tortor a
posuere
interdum,
justo elit aliquam enim,
a
commodo ante
ipsum
interdum felis.
Sed sit
amet mi
varius,
porttitor
risus eu,
fringilla urna.
Praesent porttitor,
erat eu
eleifend auctor,
libero
neque luctus velit,
in
eleifend justo arcu et
diam.
Ut venenatis leo nisi,
sit
amet lacinia ligula
dignissim id.
Etiam venenatis facilisis viverra.
Suspendisse faucibus
erat at
nisi
semper,
ac
malesuada massa accumsan.
Sed
non
interdum augue.
Donec feugiat porttitor dui,
ultrices porta
massa feugiat sed.
SOME
IMAGE
SOME
AD
SOME
THIRD
PARTY
TEASER
CONTENT
“Wait
for
us
–
we’re
late”Some
image
Some
script
Another
script
Some
image
Another
image
Another
script
“We
travelled
a
long
way”
“Can’t
you
all
move
around
a
bit
to
squeeze
us
in?”
“I’m
late
too.
Traffic
was
a
mare”
“We’re
all
going
to
have
to
shuffle
about
a
bit”
“You
late
arrivals
are
holding
everything
up”

19. WHY AMP?
?
PAPER
ROUNDS,
ROLLERSKATES,
PET
DOGS
&
SNOW
-­‐ DON’T
WORK
WELL
TOGETHER
-­‐
TRYING
TO
BE
TOO
FLASH,
CUTTING
CORNERS,
MAKING
THINGS
WORSE,
NOT
CONSIDERING
ALL
THE
FACTORS
AND
……..‘TAKING
LONGER’
+ +
= FAIL
IMAGE
ATTRIBUTION:
WIKIPEDIA

20. ?
DESKTOP PERFORMANCE MAKING
TOO
MANY
REQUESTS
-­‐ TOO
SLOW
TO
LOAD
(AND
THIS
IS
DESKTOP)
WITHOUT
AMP
TOO
SLOW
ASKS
FOR
TOO
MANY
THINGS
FAIL
DESKTOP

21. ?
EVEN MOBILE SUCKS MAKING
TOO
MANY
REQUESTS
-­‐ TOO
SLOW
TO
LOAD
(AND
THIS
IS
https://m.washingtonpost.com
MOBILE
SITE)
WITHOUT
AMPTOO
SLOW
ASKS
FOR
TOO
MANY
THINGS
FAILWASHINGTON
POST
MOBILE
SITE
EXTERNAL
JAVASCRIPT
REQUESTS
&
EXTERNAL
REDIRECTS

22. ?
WHY AMP? MAKING
TOO
MANY
REQUESTS
-­‐ TOO
SLOW
TO
LOAD
(AND
THIS
IS
https://m.washingtonpost.com
MOBILE
SITE)
WITHOUT
AMP
FAILWASHINGTON
POST
MOBILE
SITE

23. ?
WHY AMP? TOO
MANY
3RD PARTY
REDIRECTS
-­‐ TOO
SLOW
TO
LOAD
(AND
THIS
IS
https://m.washingtonpost.com
MOBILE
SITE)
WITHOUT
AMP
FAILWASHINGTON
POST
MOBILE
SITE

24. WHY AMP?
?
THAT
POOR
LITTLE
NON-­‐AMP
PAGE
HAS
A
LOT
TO
CARRY

25. WHY AMP?
?
STOP
PUTTING
LIPSTICK
ON
A
’SLOW
PIG’
IT
WON’T
WORK…
IT’S
STILL
SLOW
K.I.S.S.
PUBLISHERS
CANNOT
KEEP
UP
WITH
THE
DEMANDS
OF
THE
MOBILE
WEB
AND
IT’S
TECHNOLOGY
(PERFORMANCE
WISE)

26. WHY AMP?
?
40%
OF
PEOPLE
ABANDON
A
WEBSITE
THAT
TAKES
MORE
THAN
3
SECONDS
TO
LOAD
40%
60%
VISITORS
ABANDON
WAIT

27. WHY AMP?
?
“IF
A
SITE
DOESN’T
LOAD
INSTANTLY,
ABANDONMENT
INCREASES
AND
OPPORTUNITIES
ARE
LOST”
(Richard
Gingras,
Google
I/O)
“I’m
outta
here…
and
I
ain’t never
coming
back” “Me
too…
talk
about
slooooowww
w”
PEOPLE
BOUNCE
(and
not
because
they
found
what
they
were
looking
for)

28. WHY AMP?
?
IT’S
NOT
JUST
LOADING
EITHER…SPEED
MATTERS
WHEN
SCROLLING
SPEED
MUST
BE
ONGOING
THROUGHOUT
THE
WHOLE
UX

29. WHY AMP?
?
MISSED
OPPORTUNITIES
IN
THE
EARLY
STAGES
OF
THE
CUSTOMER
JOURNEY
FIRST
IMPRESSIONS
COUNTIMAGE
CREDIT:
McKINSEY
MCKINSEY
CUSTOMER
JOURNEY
MODEL
EXTENDED
CLTV
(CUSTOMER
LIFETIME
VALUE)

30. WHY AMP?
?
Source:
Think
With
Google
80%
OF
OPPORTUNITY
TO
TOUCHPOINT
WITH
PROSPECTS
IS
NOT
IN
THE
CONVERSION
STAGE
CAN
YOUR
BRAND
HELP
THEM
FAST
IN
THESE
MOMENTS?

31. WHY AMP?
?
Source:
Google
Research
IN
THESE
‘MOMENTS’
YOUR
BRAND
CAN
HELP
USERS
QUICKLY

32. WHY AMP?
?
Source:
Google
Research
IN
THESE
‘MOMENTS’
YOUR
BRAND
CAN
HELP
USERS
QUICKLY

33. WHY AMP?
?
THE
NEXT
BILLION
USERS
WILL
LIKELY
NOT
HAVE
HIGH
INTERNET
SPEEDS
DOESN’T
EVERYBODY
DESERVE
TO
BE
ABLE
TO
‘MEET
THEIR
MOMENTS
NEEDS’
QUICKLY?

34. ?
HOW
AMP??

35. ?
HOW AMP?
WE
CAN’T
MAKE
MORE
TIME
…
…BUT
WE
CAN
HELP
USERS
TO
ACCESS
MORE
IN
TIME
AVAILABLE
–
FETCH
&
SERVE
FASTER

36. HOW AMP?
?
AN
OPEN
SOURCE
SOLUTION
-­‐ IMPORTANT
THAT
A
SOLUTION
BE
DRIVEN
BY
THE
INDUSTRY
–
NOT
A
SINGLE
PLAYER
SO
ALL
CAN
SHARE
THEIR
EXPERTISE

37. ?
COLLABORATIVE SYNERGY
36
PUBLISHERS
&
TECH
COMPANIES
(AND
GOOGLE)
INVOLVED
SYNERGY
–
“THE
SUM
OF
THE
WHOLE
IS
GREATER
THAN
THE
SUM
OF
THE
PARTS”
AN
INDUSTRY
DRIVEN
SOLUTION
SO
ALL
CAN
SHARE
THEIR
UNIQUE
EXPERTISE
IN
A
COLLABORATIVE
OPEN
SOURCE
INITIATIVE

38. HOW AMP?
?
THE
AMP
PROJECT
ACCELERATED
MOBILE
PAGES

39. HOW AMP?
?
THE
SOLUTION
‘MAKE
THE
OPEN
MOBILE
WEB
FASTER’

40. HOW AMP?
?THE
VISION
‘PUBLISHERS
PRODUCE
MOBILE
OPTIMIZED
CONTENT
ONCE
AND
IT
LOADS
INSTANTLY
FROM
EVERYWHERE’

41. ?
HOW AMP?
4
GUIDING
PRINCIPLES
FASTER
IS
BETTER
BEAUTIFUL
MATTERS
BE
SAFE,
BE
SECURE
BETTER
TOGETHER

42. HOW AMP?
?
INSTANT
SPEED
TRIMMED
DOWN
DATA
LOAD
ONLY
THE
NECESSARY
FAST,
ELEGANT
WEBSITES

43. HOW AMP?
?
“75%
OF
SEO
SPECIALISTS
ARE
AWARE
OF
AMP”
(THE
DRUM,
APRIL
2016)

44. HOW AMP?
?
“BUT
OVER
75%
ARE
NOT
CURRENTLY
IMPLEMENTING”
(THE
DRUM,
APRIL
2016)

45. It’s
butt-­‐ugly
After
‘Mobilegeddon’
FUD
– this?
What
about
scripts
and
CSS?
What
about
our
‘fancy
website’?
Loads
of
validation
errors
NOW AMP
Most
HTML
tags
don’t
work
It’s
Google
Proprietary
Code
(IT’S
NOT)
CDN
Integration
Issues
We’re
ecommerce
– not
our
’bag’
WHY
YOU
MIGHT
NOT
YET
HAVE
IMPLEMENTED

46. HOW AMP?
?
https://amphtml.wordpress.com/2016/05/16/amp-­‐at-­‐google-­‐io/
https://amphtml.wordpress.com/2016/05/16/amp-­‐at-­‐google-­‐io/amp/
AMP
PAGENON
AMP
PAGE
FUNCTION
OVER
FORM
All
those
fancy
websites
are
kind
of
overkill
for
AMP
(and
not
allowed)
-­‐ i.e.
your
code
won't
validate
enough
to
show
up
in
AMP
results
<html ⚡>

47. HOW AMP?
?
SERVED
‘LOCALLY’
WHEN
NEEDED
FOR
FETCH
TIME
MINIMALISATION
Put
simply
-­‐
HTML
+
JAVASCRIPT,
WITH
MINIMAL
STYLING
–
‘CACHED’
AND
SERVED
‘JUST
IN
TIME’

48. ?
WHAT
MAKES
AMP
SO
FAST?
ACTIONS
• Allow
only
asychronous scripts
• Size
all
resources
statically
• Don’t
let
extension
mechanisms
block
rendering
• Keep
all
third-­‐party
Javascript out
of
the
critical
path
• Keep
all
CSS
inline
and
size-­‐bound
• Keep
font-­‐triggering
efficient
• Minimize
style
recalculations
• Only
run
GPU
(Graphics
Processing
Unit)
accelerated
animations
• Prioritize
resource
loading
• Load
pages
in
an
instant
(efficient
pre-­‐rendering)
IMAGE
ATTRIBUTE:
W3.ORG
DOCUMENT
OBJECT
MODEL

49. ?
• CONTENT
IS
CACHED
IN
AMP
CACHE,
STORED
AND
SERVED
VIA
GOOGLE’S
CDN
(CONTENT
DELIVERY
NETWORK)
LOCAL
TO
THE
USER
’JUST
IN
TIME’
• SITES
DO
NOT
CONTROL
THEIR
OWN
JAVASCRIPT
(AMP
JS
CONTROLS
IT).
SCRIPTS
ARE
KEPT
TO
A
MINIMUM
• PAGE
IS
A
LIGHTWEIGHT
VERSION
OF
THE
NON-­‐AMP
PAGE
• CSS
IS
MINIMAL
• IMAGE
SIZES
ARE
FIXED
AND
THE
CONTENT
FITS
AROUND
THAT
• CONTENT
IS
SERVED
ON
A
‘JUST
IN
TIME’
BASIS
• IT’S
A
RESPONSIVE
FRAMEWORK
SLIGHTLY
LESS
GOBBLEDEYGOOK
IMAGE
ATTRIBUTE:
PINTEREST

50. ?
CUTTING DOWN THE JOURNEY TO YOUR PAGE
LIGHTER
AMP
CONTENT
IS
SERVED
FROM
AN
AMP
CACHE
NEAR
TO
THE
USER
– GETS
THERE
MUCH
QUICKER
TRADITIONALLY
MANY
CALLS
TO
DIFFERENT
CONTENT
FROM
FAR
AWAY
DESTINATIONS
CONTENT
TRADITIONALLY
HAS
TO
CROSS
OCEANS
AND
CONTINENTS
BEFORE
IT
IS
SERVED
TO
USERS
USER
ANALYTICS
IMAGES ADS
SCRIPTS
AFFILIATE
ADS
AMP
CACHE
HTML
TRIMMED
DOWN
AMP
VERSION
SERVED
INSTANTLY
FROM
HERE
AMP
CACHE

51. HOW AMP?
?
PAGE
TYPES
IT
CAN
BE
USED
ON
• Articles
• Blog
posts
• Recipes
• Static
pages
• News
pages
• Pages
with
videos
• Forms
• Ecommerce
pages
• Dynamic
pages
• Forums
• Category
pages
on
blogs
• Registration
pages

52. HOW AMP – IMPLEMENTING
WITH CMS’?
?
IMPLEMENTING
AMP
WITH
WORDPRESS,
JOOMLA,
DRUPAL

53. ?
HOW AMP – IMPLEMENTING
WITH POPULAR CMS’?
IMPLEMENTING
AMP
PLUGIN
WITH
WORDPRESS,
AND
YOAST
‘GLUE’
FOR
ADDITIONAL
FEATURES
IMPLEMENTING
AMP
WITH
PAGEFROG
FOR
AMP
AND
WORDPRESS

54. HOW AMP?
?
Or
append
#development=1
to
end
of
any
AMP
URL
in
chrome,
and
use
developer
tools

55. HOW AMP?
?
Code
samples
available
here
-­‐
https://ampbyexample.com/

56. HOW AMP?
?

57. ?
HOW AMP?
https://mercury.postlight.com/

58. HOW AMP?
?
AMP-­‐ANALYTICS
<script
async custom-­‐element="amp-­‐analytics"
src="https://cdn.ampproject.org/v0/amp-­‐analytics-­‐0.1.js"></script>
AMP-­‐PIXEL
FOR
SIMPLE
PAGE
VIEWS
<amp-­‐pixel
src="https://foo.com/pixel?RANDOM"></amp-­‐pixel>
WORKS
WITH
SEVERAL
ANALYTICS
PROVIDERS
ANALYTICS

59. HOW AMP?
?
GOOGLE
SEARCH
CONSOLE
AMP
ANALYTICS
YOU’LL
ONLY
SEE
THIS
IF
YOU’RE
TRIGGERING
WITH
AMP
PAGES

60. HOW AMP?
?
<html ⚡>
WHAT
CONTENT
REALLY
MATTERS
AFTER
ALL?
• Video
• Images
&
photos
• Social
connection
and
sharing
• Text
(less
than
you
think).
Few
people
read
full
documents
any
more
• Ads
(we
all
need
to
pay
the
bills)
• Forms
&
ecommerce
(Acquisition
&
ROI)

61. HOW AMP?
?
<html ⚡>
MUST
HAVES
THE
‘BARE’
NECESSITIES
• Must
start
with
<!doctype html>
• Must
contain
top
level
<html
⚡ >
or
<html-­‐amp>
• Must
contain
<head>
and
<body>
tags
• Must
contain
<link
rel="canonical"
href="$SOME_URL"
/>
• First
head
child
tag
must
be
<meta
charset="utf-­‐8">
• Must
contain
<meta
name="viewport"
content="width=device-­‐
width,minimum-­‐scale=1">
(initial-­‐scale=1)
is
also
recommended
• Must
contain
<script
async
src="https://cdn.ampproject.org/v0.js"></script>
• Must
contain
the AMP
boilerplate
code
(‘head>
style[amp-­‐
boilerplate]’
’noscript>
style[amp-­‐boilerplate]’)
WARNING:
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html

62. ?
JAVASCRIPT
&
THIRD
PARTY
SCRIPTS
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html
• Frameworks
using
javascript will
be
problematic
(e.g.
Bootstrap)
• AMP
is
responsive
by
nature
so
there
is
crossover
with
e.g.
Bootstrap
• Author-­‐created
javascript is
not
allowed
• Javascript libraries
will
be
problematic
(e.g.
Jquery)
• Document.write is
outright
banned
• Third
party
scripts
must
be
used
in
<amp-­‐iframe>
• The
source
of
third
party
scripts
must
be
over
https
connection
• THERE
ARE
MANY
RESTRICTIONS
WITH
JAVASCRIPT
AND
THIRD
PARTY
SCRIPTS
!

63. ?
YOU
CAN
STILL
MAKE
YOUR
PAGES
‘PRETTY’
WITHIN
REASON
• Inline
styles
only
(limited
to
50
kb)
• No
external
stylesheets
(apart
from
some
custom
fonts)
• Styles
must
be
declared
in
the
head
of
the
page
• Can
add
e.g.
<style
amp-­‐custom>
h1
{color:
red}
</style>
• *
(universal
selector)
is
not
allowed
• !important
is
not
allowed
• Use
<amp-­‐accordion>,
<amp-­‐carousel>
to
enhance
pages
• Use
<amp-­‐sidebar>
for
navigation
• Use
<amp-­‐list>
for
item
lists
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html
CSS
&
STYLING
AMP-­‐
ACCORDION
AMP-­‐
CAROUSEL

64. ?
<AMP-­‐VIDEO>
WARNING:
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html
• <amp-­‐video>
• Video
source
(src)
must
be
https
• Loads
lazily
(when
needed)
• Enhance
video
on
your
site
with
extended
components
including
<amp-­‐youtube>,
<amp-­‐vine>,
<amp-­‐vimeo>,
<amp-­‐springboard-­‐
player>

65. ?
<AMP-­‐IMG>
• <amp-­‐img>
• Must
be
given
explicit
size
(width
/
height) in
advance
to
validate
• Aspect
ratio
is
known
via
size
without
having
to
fetch
the
image
• Other
content
on
page
builds
around
fixed
image
sizes
known
• Enhance
images
on
your
site
with
extended
components
including
<amp-­‐anim>
(gifs),
<amp-­‐image-­‐
lightbox>,
<amp-­‐instagram>,
<amp-­‐
lightbox>,
<amp-­‐carousel>
• THE
MAIN
POINT
TO
NOTE
IS
EARLY
’FIXED
SIZE’
DECLARATION
IS
KEY
WARNING:
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html
<amp-­‐img>
<amp-­‐carousel>
SIZE
MATTERS

66. ?
WARNING:
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/s
pec.html
AMP
AND
SOCIAL
<AMP-­‐FACEBOOK>
<AMP-­‐PINTEREST>
<AMP-­‐INSTAGRAM>
<AMP-­‐TWITTER>
<AMP-­‐VINE>
<AMP-­‐VIMEO>
<AMP-­‐YOUTUBE>
<AMP-­‐SOCIAL-­‐SHARE>
TWEETS,
POSTS,
VIDEOS
AND
IMAGES
FROM
SOCIAL
MEDIA

67. ?
WARNING:
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html
<AMP-­‐AD>
• <amp-­‐ad>
• Most
standard
ad
formats
currently
supported
• ALL
ADS
AND
SRC
URL
MUST
BE
SERVED
OVER
HTTPS
• Other
formats
in
experimental
stages:
• AMP
FX
flying
carpet
ads
(Experimental)
<amp-­‐fx-­‐flying-­‐
carpet>
• Sticky
ads
(Experimental)
<amp-­‐sticky-­‐ad>
(Max
1
per
page)
• AMP
ads
for
AMP
(Experimental)
(responds
as
quickly
as
an
AMP
page)

68. ?
WARNING:
FOR
GUIDANCE
ONLY
– SEE
OFFICIAL
DOCUMENTATION
AT
https://www.ampproject.org/docs/reference/spec.html
• Seems
like
forms
are
being
worked
on
currently
• They
realise that
ecommerce
is
VERY
important
• Ecommerce
is
a
bit
more
tricky
over
static
content
• It’s
not
been
ruled
out
but
there’s
it’s
not
on
the
current
roadmap
• IT
WILL
HAPPEN
IMHO
(They
known
its
importance)
FORMS
&
ECOMMERCE
£

69. FIXING ERRORS
?
SO
CLOSE
TO
ZERO
ERRORS
BRIEFLY
GOOGLE
SEARCH
CONSOLE

70. ?
BUT
THEN
IMPLEMENTED
CLOUDFLARE
CONTENT
DELIVERY
NETWORK
WITH
HTTPS
FLEXIBLE
SSL
– LOTS
OF
ERRORS
APPEARED
CLOUDFLARE
SCRIPT
CALL
ISSUE
’MIXED’
CONTENT
(SECURE
&
INSECURE)
TIP:
THIS
IS
A
KNOWN
ISSUE
– NEXT
RELEASE
OF
CLOUDFLARE
PAGESPEED
SHOULD
FIX

71. GETTING HELP
?

72. GETTING HELP
?

73. GETTING HELP
?

74. LOTS OF HELP
?
RECORDED
WEBMASTER
OFFICE
HOURS
AMP
HANGOUTS
–
WATCH
THEM
AMP
WEBMASTER
HELP
FORUMS
TOO

75. EVEN MORE HELP
?
https://product
forums.google.
com/forum/#!f
orum/webmast
ers

76. ?
NOW
AMP??

77. NOW AMP?
?
CURRENT
FEATURES
PROJECT
SCOPE
HAS
BEEN
LIMITED
FOR
NOW

78. ?
NOW AMP? AVAILABLE
IN
• BRAZIL
• GERMANY
• SPAIN
• FRANCE
• UK
• INDIA
• INDONESIA
• ITALY
• MEXICO
• JAPAN
• RUSSIA
• US
• CANADA
• AUSTRALIA
(MOST
RECENT)
BUT
THERE
ARE
STILL
HUGE
NON-­‐COVERAGE
AREAS
WHEN
THERE
IS
ENOUGH
UPTAKE
IT
WILL
BE
EXPANDED

79. NOW AMP?
?
A
SEARCH
IN
GOOGLE
IMAGES
FOR
‘AMP’
WHILST
IN
AUSTRALIA
– ‘NEVER
HEARD
OF
IT’
TOO
NEW
YET

80. ORGANIC ADOPTION SO FAR
?
125+
Million
Total
documents
in
the
index
from
more
than
640K
domains
SOURCE:
GOOGLE

81. DEVELOPER COMMUNITY
?
https://github.com/ampproject
THE
OPEN
SOURCE
COMMUNITY
OF
DEVELOPERS
IS
VERY
BUSY
WITH
ACTIVITY
24
HOURS
A
DAY
BETWEEN
THEM
ON
THE
PROJECT
IN
JUST
8
MONTHS
7,300+
DEVELOPERS
HAVE
ENGAGED
1,900+
PULL
REQUESTS
CODE
SUBMISSIONS
88+
RELEASES
(CIRCA
2
PER
WEEK)
FOLLOW
PROGRESS
AT
GITHUB
OR
EVEN
GET
INVOLVED

82. NEWS CAROUSEL (NEWS & ‘SOFT NEWS’)
?
AMP
NEWS
CAROUSEL
ONLY
VALID
AMP
PAGES
CAN
SHOW
IN
THE
NEWS
CAROUSEL

83. RECIPES
?
EXTENDING
TO
RECIPES
&
RECIPE
RICH
CARDS
MANY
OTHER
CONTENT
TYPES
AHEAD

84. NOW AMP?
?
IOS
&
ANDROID
SEARCH
SEARCH
APPS
Announced
by
Richard
Gingras at
Google
I/O
2016

85. ?
AD FORMATS AVAILABLE
AD
FORMATS
AVAILABLE
• MOST
STANDARD
AD
FORMATS
• ‘FLYING
CARPET’
ADS
• STICKY
ADS
• AMP
ADS
FOR
AMP
ALL
ADS
MUST
BE
SERVED
OVER
HTTPS
FROM
PAGES
WITH
CONTENT
WHICH
IS
SERVED
OVER
HTTPS

86. ?
WOW
AMP?

87. WOW AMP?
?
ELEVATED
PERFORMANCE
BASELINE
FOR
ALL
COMPARED
TO
NON-­‐AMP
PAGE
EVEN
BEFORE
FURTHER
ENHANCEMENT
VIA
PRE-­‐RENDERING
AND
SMART-­‐CACHING
4
x
FASTER
10
x
LESS
DATA

88. ?
WOW AMP?

89. ?
REMEMBER THAT WASHINGTON POST PAGE?
FAIL“WASHINGTON
POST
ARE
SEEING
AMP
ARTICLES
LOAD
AT
AN
AVERAGE
OF
400
MILLISECONDS
–
A
HUGE
GAIN
IN
SPEED”
DAVE
MERRELL,
WASHINGTON
POST
WITH
AMP

90. WOW AMP? IT’S
LIGHTNING
FAST
?
WITH
AMP
>
94%
OF
SITES
WITHOUT
AMP
FAR
FEWER
REQUESTS
AND
THIS
WAS
NOT
EVEN
‘LOCALLY’
SERVED
TO
ME

91. WOW AMP?
?
WITH
AMP
IT’S
LIGHTNING
FAST
&
A
BETTER
UX
WITHOUT
AMP

92. ?
TO
AMPFINITY
&
BEYOND?
?

93. IT’S ONLY THE BEGINNING
?
Features and content
types will be considerably
extended over time
Open source project
means may be extended
to AMP Ecommerce
rather than just covering
static pages (more tricky)

94. ?
WHAT’S IN IT FOR ME?
HIGHER
ENGAGEMENT
AND
MORE
PROBABILITY
OF
CLICKING
ON
ADS
BETTER
BUSINESS
MODELS
FOR
ADVERTISERS FOR
PUBLISHERS FOR
USERS FOR
THE
INDUSTRY FOR
SEMs
A
BETTER
UX
SECURITY
‘NEEDS
MET’
QUICKER
CONSUME
MORE
CONTENT
BETTER
BUSINESS
MODEL
TRAFFIC
IN
OPEN
MOBILE
WEB
RETURNING
VISITORS
HIGHER
CTRs
&
ECPMs
HIGHER
VIEWABILITY
RATES
HIGHER
DWELL
TIMES
&
CLICK
DEPTH
BETTER
BUSINESS
MODEL
ADDITIONAL
ORGANIC
SEARCH
REAL
ESTATE
(REACH)
FIRST
MOVE
ADVANTAGE
‘SPEED’
AS
A
RANKING
FACTOR
HISTORY
LOG
HEAD
START

95. ?
IS
IT
ESSENTIAL
TO
GO
‘AMP’?
-­‐ NOPE
“If
you
can
achieve
less
than
a
second
load
time
on
mobile
then
you
don’t
need
to
go
AMP”
(Gary
Illyes,
Google)
1
SECOND
GOOD
LUCK
WITH
THAT
CONSISTENTLY
“AND
MAY
THE
ODDS
BE
EVER
IN
YOUR
FAVOUR”

96. ?
WHY
1
SECOND?...
BECAUSE
THAT’S
THE
AMP
AVERAGE
IMHO
– GOING
FORWARD,
SPEED
RANKING
UPTICKS
WILL
BE
BASED
ON
1
SECOND
CONSISTENCY

97. ?
AND…
IT’S
NOT
JUST
ABOUT
YOUR
DEV
TEAM
CAN
YOU
GUARANTEE
THAT
THIRD
PARTY
SCRIPTS
WILL
LOAD
IN
UNDER
1
SECOND
TOO?
“Take
my
script
too”
“Take
my
script
too”
“Take
my
script
too”

98. ?
YOU’LL MISS OUT WITHOUT
IT
YOU
WILL
NOT
QUALIFY
TO
BE
INCLUDED
IN
NEWS
CAROUSEL
OR
FUTURE
PRIME
AMP
REAL
ESTATE
IN
MOBILE
SERPS
“Google
is giving
prime
real
estate
to
AMP
pages
in
mobile
search
results,
and
if
you
don’t
have
AMP
on
your
site,
you’re
not
getting
any
of
that
traffic.”
JOOST
DE
VALK,
YOAST
BUT

99. OPEN SOURCE SYNERGY IS ’KIND OF
POWERFUL’

100. ?
“If
you
run
a
news
site or a
blog,
you
need
to
make
sure
your
site
supports
AMP. It’s
as
simple
as
that”
Joost De
Valk,
Yoast

101. ?
AMP
is
not
just
a
‘nice
to
have’.
It
is
an
absolute
necessity
for
the
future
of
the
mobile
web.

102. ”BE
AMP
READY”
“DON’T
BE
THE
LAST
HORSE
OUT
OF
THE
GATE
WHEN
THE
‘OPEN
SOURCE’
SYNERGY
EFFECT
KICKS
IN”
-­‐ PERFORMANCE
MATTERS
Dawn
Anderson
@
dawnieando
UNDERSTAND AMP

103. TWITTER
-­‐ @dawnieando
GOOGLE+
-­‐ +DawnAnderson888
LINKEDIN
-­‐ msdawnanderson
THANK
YOU
Dawn
Anderson
@
dawnieando