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

AMP Up Your WordPress

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Why AMP for WordPress?
Why AMP for WordPress?
Chargement dans…3
×

Consultez-les par la suite

1 sur 30 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (18)

Similaire à AMP Up Your WordPress (20)

Publicité

Plus récents (20)

AMP Up Your WordPress

  1. 1. Presented by Toren Ajk AMPWPTools.com AMP Up Your WordPress 2018 OC WordCamp
  2. 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. 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. 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. 5. Presented by Toren Ajk AMPWPTools.com What is AMP?
  6. 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. 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. 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. 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. 10. Presented by Toren Ajk AMPWPTools.com Why Should You Care About AMP? Page load time is critical for engagement
  11. 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. 12. Presented by Toren Ajk AMPWPTools.com Speed and Conversion Rate
  13. 13. Presented by Toren Ajk AMPWPTools.com Optimal Page Loads
  14. 14. Presented by Toren Ajk AMPWPTools.com Slow Pages Hurt You Source: Soasta/Akamai State of Online Retail Performance
  15. 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. 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. 17. Presented by Toren Ajk AMPWPTools.com You Don’t Like Ugly Pages
  18. 18. Presented by Toren Ajk AMPWPTools.com Not much better
  19. 19. Presented by Toren Ajk AMPWPTools.com This converts 20% higher? !!!
  20. 20. Presented by Toren Ajk AMPWPTools.com No more excuses
  21. 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. 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. 23. Presented by Toren Ajk AMPWPTools.com Required Markup
  24. 24. Presented by Toren Ajk AMPWPTools.com Common AMP Components
  25. 25. Presented by Toren Ajk AMPWPTools.com More Components
  26. 26. Presented by Toren Ajk AMPWPTools.com New Components - Date Picker https://ampbyexample.com/components/amp-date-picker/
  27. 27. Presented by Toren Ajk AMPWPTools.com New Components - fx- collection https://ampbyexample.com/components/amp-fx-collection/
  28. 28. Presented by Toren Ajk AMPWPTools.com AMP Product Page https://ampbyexample.com/samples_templates/product_page/
  29. 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. 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/

×