google amp pages

Creating Google AMP Pages
Here There And Everywhere
https://www.htae.net

Target audience
• If you maintain a website
Skills required
• HTML
• Some CSS
• Some Javascript

References
• Technology moves quickly, this was written October 2016.
• Latest on AMP is available at https://www.ampproject.org/
Notes
• Slides/notes and opinions are our own only and may not be correct,
ensure you do your own research.

Why?
• Currently (Oct 2016) one reason;
• Facilitates fast page loading so;
• better user experience for users, for example, people on slow mobiles/desktops may not
have been able to load your pages in a sensible time (if your existing pages were bloated
or not written for speed).

How does it work, maybe
Original non-amp
page
Create an AMP
page
Your development
Users search/Display to user
Page
available
in cache
Present user with
cache if possible
or AMP page
Validate and load
cache
Validate and load
cache from AMP
page or next user
N
Y
Valid
Present AMP page
N
Y

Results
• If done correctly the results from search will show an AMP option, clicking that
AMP option will take the user to the fast cached page.
speed).

When not to use?
• If your pages are highly optimised anyway?.
• If there is any kind of complexity to your pages and therefore you
require forms/Javascript/heaps of css. Etc.
• If your target audience all own highly specified mobile devices or
desktops with heaps of bandwidth and you think they are happy for
you to use bandwidth for your site?.
• If you don’t have plenty of time or budget to rewrite or potentially
double up on your pages.
• If you are a “wait and see what others do” type, or if you only
implement with “mature” technology?.
• If you have limited “crawl budget” for your site as Googlebot likes to
come and get fresh copies quite often.

Ideally suited to
• For the moment (October 2016);
• Static content like;
• News articles
• Blog pages
• Recipes

Mark-up
• Copy the HTML
• Remove any Java script
• Ensure CSS is limited
• Remodel any forms
• Code up the surrounding AMP scripting
• Create a new URL for your AMP page

Mark-up Key points
• Original page needs to say where the AMP page lives;

Mark-up Key points
• AMP Page needs to say where the original lives;

Mark-up Key Points
• Boilerplate need to be last two items of the <HEAD>

Check your new AMP page is showing

Validate It
• Either use the chrome add-in;
• https://chrome.google.com/webstore/detail/amp-
validator/nmoffdblmcmgeicmolmhobpoocbbmknc
Will show green if valid code

Validate it
• And/or use the validator at;
https://validator.ampproject.org/
You are looking for a status of pass

Validate it
• And/or use the developer tools; You are looking for no errors here

Validate it
• Then check the google cache is also serving your page;
• E.g.
https://cdn.ampproject.org/c/s/www.htae.net/checklist/amp/english
-madeleines/67/

The Need For Speed
Original page:
1.72 Seconds to load DOM
AMP Marked Up Version:
1.35 Seconds to load DOM
Cache version should it
be presented to user;
645 Milliseconds to load DOM
Note: overall speed variable due to this page containing ads which are loaded when able and at their own pace

Handy Items
• Clear cache
• https://cdn.ampproject.org/update-ping/c/s/www.htae.net

google amp pages

More Related Content

What's hot

Viewers also liked

Similar to google amp pages

Recently uploaded

google amp pages