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.
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
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>
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
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
