Embed Size (px)
Citation preview
PIC
AMP ?
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.
Confidential + Proprietary
You can’t beat AMP on SERP
Confidential + Proprietary
AMP : a fast site guaranteed
Confidential + Proprietary
AMP validation successful.
✔ Keeping the page valid === Fast
Confidential + Proprietary
Fast even without the cache
Confidential + Proprietary
Developers are on
tracks with AMP
Confidential + Proprietary
without AMP
Confidential + Proprietary
on mSite speed
Time (months)
Load
Tim
e
Confidential + Proprietary
With AMP
Confidential + Proprietary
Load
Tim
e
Time (months)
+ makes mSites fast
+ keeps them fast
Validation mechanism
Confidential + Proprietary
In an IDEAL world
Confidential + Proprietary
In a REAL world
Confidential + Proprietary
Create an AMP page
Confidential + Proprietary
Proprietary + ConfidentialProprietary + Confidential
AMP is a library for fast, user-friendly, beautiful and responsive sites:
ampbyexample.com
Confidential + Proprietary
Let’s see some
AMP components
Confidential + Proprietary
amp-selector
setState
amp-carousel
Confidential + Proprietary
amp-carousel
Confidential + Proprietary
amp-sidebar
Confidential + Proprietary
We can do a lot with
CSS only
Confidential + Proprietary
Input “material design” style
It’s pure CSS
Confidential + Proprietary
Pure CSS
Confidential + Proprietary
90% CSS - HTML
ampState toggle
a CSS class on click
Confidential + Proprietary
amp-list
Consume a REST API endpoint
Confidential + Proprietary
amp-animation
amp-position
Confidential + Proprietary
More ?
Confidential + Proprietary
Building an AMP page
Is FAST
Confidential + Proprietary
LESS TESTING :
Cross browser testing
Confidential + Proprietary
Tooling
Validate your pagesAppend #develo
pment=1
Getting to know the tools
https://ampbyexample.com/playground/
Useful to test
your code
Thank you
