The document outlines how to enhance a WordPress site using AMP (Accelerated Mobile Pages), an open-source library created by Google in 2015. It explains the components of AMP, including AMP HTML and AMP JS, which improve page loading times and performance through various restrictions and optimizations. Additionally, it provides resources and guidance on getting started with implementing AMP on a WordPress site.

1. AMP Up Your WordPress Site
1
AMP Up Your WordPress Site By: Prem Tiwari

2. ● What is AMP
● Why should you care about AMP
● The AMP way of doing things
● How to get started with AMP
● Additional resources
2Overview
AMP Up Your WordPress Site By: Prem Tiwari

3. Google has created the
AMP library and released it
as open source code in
October 2015.
3What is AMP
AMP Up Your WordPress Site By: Prem Tiwari

4. 4AMP Components
AMP Up Your WordPress Site By: Prem Tiwari

5. AMP HTML looks a lot like standard HTML code but with
some code restrictions and the addition of some custom
AMP properties.
5What is AMP HTML
AMP Up Your WordPress Site By: Prem Tiwari

6. 6AMP HTML Example
AMP Up Your WordPress Site By: Prem Tiwari

7. 7AMP JS
AMP Up Your WordPress Site By: Prem Tiwari
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
● Restricting CSS files to 50kb
● Precalculating the layout of every element on the page
before resources are loaded.

8. 8AMP Cache
AMP Up Your WordPress Site By: Prem Tiwari
The AMP The Google AMP Cache is a proxy-based content
delivery network for delivering all valid AMP documents. It
fetches AMP HTML pages, caches them, and improves page
performance automatically.
When using the Google AMP Cache, the document, all JS
files and all images load from the same origin that is using
HTTP 2.0 for maximum efficiency.

9. 9Why should you care about AMP
AMP Up Your WordPress Site By: Prem Tiwari

10. 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
● Browser should be able to calculate the space needed for every
resource on the page without having to fetch it.
10The AMP way of doing things
AMP Up Your WordPress Site By: Prem Tiwari

11. Install the Official WordPress AMP plugin from WordPress.org plugin repository
https://wordpress.org/plugins/amp/
11How to get started with AMP
AMP Up Your WordPress Site By: Prem Tiwari

12. ● https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml
● https://amp.dev/documentation/components/
● https://amp.dev/documentation/examples/
● https://search.google.com/test/amp/
12Additional resources
AMP Up Your WordPress Site By: Prem Tiwari

13. 13
Thank you
Connect Me @ :
❖ Twitter: @thepremtiwari
❖ Facebook: fb.com/thepremtiwari
❖ Instagram: @thepremtiwari
AMP Up Your WordPress Site By: Prem Tiwari