Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Why AMP for WordPress?

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
AMP Up Your WordPress
AMP Up Your WordPress
Chargement dans…3
×

Consultez-les par la suite

1 sur 21 Publicité

Why AMP for WordPress?

Télécharger pour lire hors ligne

What is AMP and why should you care about it? This presentation will give an overview of the AMP specifications and what are its benefits. This will include case study examples. Next, I’ll discuss the challenges of implementing AMP, AMP and Gutenberg, and AMP themes/plugins.

What is AMP and why should you care about it? This presentation will give an overview of the AMP specifications and what are its benefits. This will include case study examples. Next, I’ll discuss the challenges of implementing AMP, AMP and Gutenberg, and AMP themes/plugins.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Why AMP for WordPress? (20)

Publicité

Plus récents (20)

Why AMP for WordPress?

  1. 1. AMPWPTools.com W h y A M P f o r W o r d P r e s s ?
  2. 2. AMPWPTools.com About Toren Ajk • 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, 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 Seadreaminc.com. We recently launched AMPWPTools.com as a marketplace for native AMP themes and plugins.
  3. 3. AMPWPTools.com Overview • Why should you care about AMP • What is AMP? • The AMP way of doing things • How to get Started with AMP • Additional Resources
  4. 4. AMPWPTools.com AMP Engagement • The Washington Post reduced page load times by 88% and saw return visitors increase by 23% • Carved reduced average page loads by 37% and saw a 75% increase in conversion rates. • Charlie Foundation increased page views by 49% and reduced bounce rate by 13% after going native AMP.
  5. 5. AMPWPTools.com Why Should You Care About AMP? Page load time is critical for engagement
  6. 6. AMPWPTools.com Slow Pages Hurt You Source: Soasta/Akamai State of Online Retail Performance
  7. 7. AMPWPTools.com The Benefits of AMP • Fast page loads • Higher conversion rates • Lower bounce rates • Greater user engagement • Better search rankings • More secure pages • Less vulnerable to XSS attacks
  8. 8. AMPWPTools.com What Is AMP? • Google created the AMP library and released it as open source code in October of 2015. • The AMP Governance joined the OpenJS Foundation incubation program in October of 2019 • In June of this year AMP graduated to become an OpenJS Foundation Growth Program.
  9. 9. AMPWPTools.com What is AMP?
  10. 10. 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.
  11. 11. 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. • Restricting CSS files to 75kb or less • Advanced functionality via AMP Components • Schema markup is part of the base coding
  12. 12. 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 and the AMP Script component. • Pre-calculating the layout of every element on the page before resources are loaded • Lazy loading of images and ads
  13. 13. 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.
  14. 14. 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.
  15. 15. AMPWPTools.com You Don’t Like Ugly Pages
  16. 16. AMPWPTools.com Not much better
  17. 17. AMPWPTools.com This converts 20% higher? !!! AMP Version Non-AMP Mobile
  18. 18. AMPWPTools.com No more excuses charliefoundation.org
  19. 19. AMPWPTools.com It’s just another fad • There are over 31 million domains using AMP • Over 10 billion AMP pages • 500+ non-Google contributors to AMP • Adopted by popular sites like: eBay, Reddit, Twitter, Pinterest, AirBnb, and many more.
  20. 20. AMPWPTools.com How to Get Started with AMP for WordPress • Official AMP plugin for WordPress https:// wordpress.org/plugins/amp/ • Popular themes that are AMP compatible Genesis, Astra, WordPress 2010-2020 https:// amp-wp.org/ecosystem/themes/ • Native AMP (AMP First) themes and plugins https://ampwptools.com/
  21. 21. AMPWPTools.com Additional AMP Resources • AMP Project https://amp.dev/ • AMP and web accessibility https://blog.amp.dev/2020/05/04/creating-accessible-sites-with-amp/ • AMP for WordPress https://amp-wp.org/ • Starter examples https://ampbyexample.com/ • AMP tutorial https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-advanced/#0 • AMP guides https://amp.dev/documentation/guides-and-tutorials/ • AMP courses https://amp.dev/documentation/courses/ • The AMP Channel https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw • AMP Components https://amp.dev/documentation/components/ • AMP validator https://search.google.com/test/amp • AMP Chrome testing extension https://chrome.google.com/webstore/detail/amp-validator/ nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en • https://www.google.com/webmasters/tools/

×