This talk was designed to give the developer the basics of the AMP technology. The talk offers the pros and cons of the technology as well as a technical overview of the structure of an AMP pages. The information covers several tools and integration with popular CMS and how to implement AMP in the development testing and build process.

1. The Instant Web &
The AMP Revolution
Michael Posso
@micposso

2. “The U.S. ranks 44th in
the world in mobile
internet speeds
2017 recode.net/Ookla

3. “Google will make page
speed a factor in mobile
search ranking starting
in July
Jan 2018 TechCrunch

4. “The average media site in
the U.S. loads over 95
resources .
Feb 2018
MachMetrics Speed Blog

5. “Developing world hits
98.7 per cent mobile
phone adoption
Aug 2017
theregister.co.uk

6. Why Google came up with AMP?
The Accelerated Mobile Pages Project (AMP) is an
open-source website publishing technology designed to
improve the performance of web content and
advertisements created on 2015.
AMP is compatible with Bing, Baidu, Sogu, Yahoo,
Wordpress, Drupal, SquareSpace, Medium, LinkedIn,
Twitter, Reddit, Weibo, Tumblr, eBay, AliExpress and
BigCommerce, Yandex?

7. Why Google came up with AMP?
User spend more time in native
mobile apps
Tracking user behavior
on native apps is hard
Establish a fast movings
standard for mobile and PWAs

8. Why Google came up with AMP?
31,000,000 Domains publishing
AMP documents
2x more time spent on
an AMP page
20% increase in sales
conversions with AMP
Google commissioned study
from Forrester Nov 2017

9. “God! I love Google,
but I hate AMP so much.
Youtube comment
On the Official AMP channel
ampletter.org

10. “We are moving from a world
where you can put anything on
your website to one where you
can’t because Google says so”
— Joshua Benton, Nieman Journalism Lab

11. How AMP
Works
The quick story
Non-Blocking
Content
AMP mediates all
content
operations. It
offers the best
possible critical
path rendering.
AMP also can
prioritize content
on you page.
CDN
Google and
Cloudflare. Only
on valid AMP
pages. Uses URL
format. Can
optimize images
and sanitizes code
& minification. It
has an API. By
passes AdBlockers.
Served over
HTTP2
Static Layout
Assets properties
are declared in
the HTML,
requiring only
one HTTP
request to build
the layout. Avoid
front-end
rendering of
elements. AMP
provides layout
options.

12. How AMP
Works
AMP JS script
& Components
Include in the
head of the
document.
< 50k CSS
Move all CSS
inside the <style>
tag in the head
of the document.
Clean CSS.
AMP boilerplate
Include in the
head. Convert
tags to AMP tags,
and remove
prohibited
elements

13. AMP
HTML Tags
The quick story
<video> = <amp-video>
<audio> = <amp-audio>
<img> = <amp-img>
<button> = allowed
<form> = needs form component
<svg> = allowed

14. AMP
Forbidden
HTML Tags
<frameset>
<object>
<applet>
<embed>
<frame>

15. AMP
Forbidden CSS
!important
transition
@keyframes {...}
Any selectors with -amp- or i-amp-

16. How AMP
Works
website website website
google.com/amp/
pre-render
AMP page

17. AMP in SERPS

18. AMP Components
The quick story
To extend functionality, AMP offers components of AMP
optimized libraries. Scripts must be included in the head.
Carousel and Sliders
Google Analytics
Date Picker
LaterPay
Geolocation

19. Webfonts in AMP
AMP allows for an external CSS file linking
to a font service or @font-face
fast.fonts.net
fonts.googleapis.com
use.typekit
maxcdn.bootstrapcdn.com
cloud.typography.com

20. Using Third
Party Components
Head
<script async custom-element="amp-facebook"
src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Source
<amp-facebook width="486" height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

21. Using AMP
ComponentsHead
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Source
<amp-carousel width="450"
height="300">
<amp-img src="images/image1.jpg"
width="450"
height="300"></amp-img>
<amp-img src="images/image2.jpg"
width="450"
height="300"></amp-img>
<amp-img src="images/image3.jpg"
width="450"
height="300"></amp-img>
</amp-carousel>

22. AMP for WordPress (4.9.6)
AMP for WordPress
Collaboration of Automattic and some Google AMP
developers
AMP for WP
Offers an AMP page builder
Glue for Yoast SEO & AMP
Extend the Yoast SEO plugin to integrate with AMP content

23. AMP Plugin
Settings
Allows for basic
styling

24. AMP for Static Site Generators
Jekyll (amp-jekyll)
Hexo (hexo-generator-amp)
Gatsby Theme(gatsby-amp-starter-blog)
Hugo (gohugo-amp)

25. AMP for Emails
Sub-set of the AMP spec
New mime format
Requires serving text/html and text/x-amp-html
Allows for fetching data from and end-point in Json format
Binds elements to data, allowing interactivity

26. AMP for Emails
Forms
Slideshows
Pagination
Response Data

27. AMP Development Tools
validator.ampproject.org
AMP Validator Chrome Extension
Append #development=1 to end of URL
Use amphtml-validator
Add AMP to your CI build (Travis)

28. AMP
Ecosystem

29. Useful Links
http://ampletter.org/
https://validator.ampproject.org/
https://wordpress.org/plugins/amp/
https://www.ampproject.org/case-studies/bmw/
https://www.youtube.com/watch?v=a8NScvBhVnc
https://www.youtube.com/watch?v=eAyrvHmJD_c