AMP - Google Searchservices.google.com/fh/files/misc/ne_speed_race_webinar_amp.pdf · AMP Accelerated Mobile Pages. PIC AMP ? What AMP JS does for you Smart Content Prioritization

Antoine [email protected]

AMPAccelerated Mobile Pages

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 pages

https://validator.ampproject.org/

Validate your pagesAppend #develo

pment=1

Getting to know the tools

https://ampbyexample.com/playground/

Useful to test

your code

Thank you

[email protected]

Twitter : @antoineBr