This document discusses Accelerated Mobile Pages (AMP) which is an open source framework created by Google to optimize content and ads for mobile. It summarizes what AMP is, why page speed is important, how AMP improves performance, examples of AMP components and templates, and resources for getting started with AMP for WordPress sites.

1. Presented by Toren Ajk AMPWPTools.com
AMP Up Your
WordPress
2018 OC WordCamp

2. Presented by Toren Ajk AMPWPTools.com
About Toren Ajk
• I got started in digital marketing in 2003 doing market research
for Overture.
• I’m the founder of TAC Marketing Group - a digital marketing
agency. Over the years we’ve worked with a variety of clients,
including Lexus, DocStoc, Lending Club, and Backblaze.
• I was CMO of Line2 from 2009-2011 where I drove over 1.5
million downloads of the app and grew annual revenue from 0-
$10 million.
• In January of 2016 we started developing a native AMP
framework for WordPress and have since developed a number of
sites on it, including CharlieFoundation.org and DyerNews.com.

3. Presented by Toren Ajk AMPWPTools.com
Overview
• What is AMP?
• Why should you care about AMP
• The AMP way of doing things
• How to get Started with AMP
• Additional Resources

4. Presented by Toren Ajk AMPWPTools.com
What Is AMP?
• Google created the AMP library and released it
as open source code in October of 2015.

5. Presented by Toren Ajk AMPWPTools.com
What is AMP?

6. Presented by Toren Ajk AMPWPTools.com
What is AMP HTML
• AMP HTML looks a lot like standard HTML but
with some code restrictions and the addition of
custom AMP properties.

7. Presented by Toren Ajk AMPWPTools.com
AMP HTML Example
You might notice the schema markup, which is part of the core of AMP HTML

8. Presented by Toren Ajk AMPWPTools.com
AMP JS
• The AMP JS library is one of the keys for fast loading
pages. It does this by:
• Loading everything from external resources
asynchronously
• Restricting the use of third party JavaScript except in
AMP iFrames
• Pre-calculating the layout of every element on the page
before resources are loaded
• Restricting CSS files to 50kb or less

9. Presented by Toren Ajk AMPWPTools.com
AMP Cache
• It’s a proxy based CDN for delivering all valid
AMP documents.
• All JS files and images load from the same origin
using HTTP 2.0
• AMP cache is currently supported by Google,
Bing, and Cloudflare with more CDNs planned
for the future.

10. Presented by Toren Ajk AMPWPTools.com
Why Should You Care About
AMP?
Page load time is critical for engagement

11. Presented by Toren Ajk AMPWPTools.com
AMP Engagement
• The Washington Post reduced page load times
by 88% and saw return visitors increase by 23%
• CNBC reduced average page load times to 1.23
seconds, a 387% reduction in page load time
from their standard HTML pages.
• Charlie Foundation increased page views by
49% and reduced bounce rate by 13% after
going native AMP.

12. Presented by Toren Ajk AMPWPTools.com
Speed and Conversion Rate

13. Presented by Toren Ajk AMPWPTools.com
Optimal Page Loads

14. Presented by Toren Ajk AMPWPTools.com
Slow Pages Hurt You
Source: Soasta/Akamai State of Online Retail Performance

15. Presented by Toren Ajk AMPWPTools.com
AMP Ecommerce
• Carved increased their conversion rates by 75%,
reduced page load and bounce rate by 37%
after going AMP.
• Event Tickets Center increased conversion rate
by 20%, reduced bounce rate by 10% with AMP
landing pages.
• Merchology reduced load time by 286% which
led to a 39% increase in conversion rate.

16. Presented by Toren Ajk AMPWPTools.com
So Why Aren’t You Already
AMPed
• You don’t like ugly pages.
• It’s just another fad.
• It’s too hard to implement.

17. Presented by Toren Ajk AMPWPTools.com
You Don’t Like Ugly Pages

18. Presented by Toren Ajk AMPWPTools.com
Not much better

19. Presented by Toren Ajk AMPWPTools.com
This converts 20%
higher? !!!

20. Presented by Toren Ajk AMPWPTools.com
No more excuses

21. Presented by Toren Ajk AMPWPTools.com
It’s just another fad
• There are over 31 million domains using AMP
• Over 5 billion AMP pages
• 500+ non-Google contributors to AMP
• Adopted by popular sites like: eBay, Reddit,
Twitter, Pinterest, AirBnb, and many more.

22. Presented by Toren Ajk AMPWPTools.com
The AMP Way of Doing
Things
• Predictable performance is a key design goal of AMP
HTML. In order to achieve this there are a few basic
principles:
• HTTP request to render and fully layout the document
should be minimized.
• Resources such as images or ads should only be
downloaded if they are likely to be seen by the user.
• Browsers should be able to calculate the space needed
for every resource on the page without having to fetch
it.

23. Presented by Toren Ajk AMPWPTools.com
Required Markup

24. Presented by Toren Ajk AMPWPTools.com
Common AMP Components

25. Presented by Toren Ajk AMPWPTools.com
More Components

26. Presented by Toren Ajk AMPWPTools.com
New Components - Date
Picker
https://ampbyexample.com/components/amp-date-picker/

27. Presented by Toren Ajk AMPWPTools.com
New Components - fx-
collection
https://ampbyexample.com/components/amp-fx-collection/

28. Presented by Toren Ajk AMPWPTools.com
AMP Product Page
https://ampbyexample.com/samples_templates/product_page/

29. Presented by Toren Ajk AMPWPTools.com
How to Get Started with AMP
for WordPress
• https://wordpress.org/plugins/amp/
• https://wordpress.org/plugins/amp-landing-
pages/

30. Presented by Toren Ajk AMPWPTools.com
Additional AMP Resources
• https://www.ampproject.org
• https://www.ampproject.org/docs/fundamentals/spec
• https://www.ampproject.org/docs/reference/components
• https://ampbyexample.com/
• https://www.ampstart.com/
• https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-
advanced/#0
• https://search.google.com/test/amp
• https://chrome.google.com/webstore/detail/amp-validator/
nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en
• https://www.google.com/webmasters/tools/