Page 1
Antoine [email protected]
AMPAccelerated Mobile Pages
Page 4
What AMP JS does for youSmart Content Prioritization Elements are prefetched when appropriate, layout is only performed once, loading is asynchronous.
Efficient Layout and RenderingOne network request to layout the entire document, style recalculations are minimized, and only GPU-accelerated animations are allowed.
Limited by DesignThere is no 3rd-party JavaScript outside of iframes, no scrolling elements, and CSS is limited to 50kB in the document head.
Page 5
Confidential + Proprietary
You can’t beat AMP on SERP
Page 7
Confidential + Proprietary
AMP : a fast site guaranteed
Page 8
Confidential + Proprietary
AMP validation successful.
✔ Keeping the page valid === Fast
Page 9
Confidential + Proprietary
Fast even without the cache
Page 10
Confidential + Proprietary
Developers are on
tracks with AMP
Page 11
Confidential + Proprietary
without AMP
Page 12
Confidential + Proprietary
on mSite speed
Time (months)
Load
Tim
e
Page 13
Confidential + Proprietary
With AMP
Page 14
Confidential + Proprietary
Load
Tim
e
Time (months)
+ makes mSites fast
+ keeps them fast
Validation mechanism
Page 15
Confidential + Proprietary
In an IDEAL world
Page 16
Confidential + Proprietary
In a REAL world
Page 17
Confidential + Proprietary
Create an AMP page
Page 18
Confidential + Proprietary
Page 19
Proprietary + ConfidentialProprietary + Confidential
AMP is a library for fast, user-friendly, beautiful and responsive sites:
ampbyexample.com
Page 20
Confidential + Proprietary
Let’s see some
AMP components
Page 21
Confidential + Proprietary
amp-selector
setState
amp-carousel
Page 22
Confidential + Proprietary
amp-carousel
Page 23
Confidential + Proprietary
amp-sidebar
Page 24
Confidential + Proprietary
We can do a lot with
CSS only
Page 25
Confidential + Proprietary
Input “material design” style
It’s pure CSS
Page 26
Confidential + Proprietary
Pure CSS
Page 27
Confidential + Proprietary
90% CSS - HTML
ampState toggle
a CSS class on click
Page 28
Confidential + Proprietary
amp-list
Consume a REST API endpoint
Page 29
Confidential + Proprietary
amp-animation
amp-position
Page 30
Confidential + Proprietary
More ?
Page 31
Confidential + Proprietary
Building an AMP page
Is FAST
Page 32
Confidential + Proprietary
LESS TESTING :
Cross browser testing
Page 33
Confidential + Proprietary
Tooling
Page 34
Validate your pages
https://validator.ampproject.org/
Page 35
Validate your pagesAppend #develo
pment=1
Page 36
Getting to know the tools
https://ampbyexample.com/playground/
Useful to test
your code
Page 38
[email protected]
Twitter : @antoineBr