2. Target audience
• If you maintain a website
Skills required
• HTML
• Some CSS
• Some Javascript
3. 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.
4. 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).
5. 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
6. 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).
7. 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.
8. Ideally suited to
• For the moment (October 2016);
• Static content like;
• News articles
• Blog pages
• Recipes
10. 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
15. Validate It
• Either use the chrome add-in;
• https://chrome.google.com/webstore/detail/amp-
validator/nmoffdblmcmgeicmolmhobpoocbbmknc
Will show green if valid code
16. Validate it
• And/or use the validator at;
https://validator.ampproject.org/
You are looking for a status of pass
17. Validate it
• And/or use the developer tools; You are looking for no errors here
18. 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/
19. 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