Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accelerated Mobile Pages

1,051 views

Published on

A presentation I gave at the Fort Collins WordPress meetup about the benefits of adding AMP to your WordPress site.

Published in: Technology
  • Nice information on accelerated mobile pages and their implementation on wordpress, I am sharing a blog post on "Accelerated Mobile Pages (AMP) for Mobile-First Generation" https://goo.gl/bonFVZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Accelerated Mobile Pages

  1. 1. ACCELERATED MOBILE PAGES AN OPEN SOURCE INITIATIVE
  2. 2. WHAT IS AMP?
  3. 3. ‣A way to build web pages for static content that render fast ‣An open source initiative that aims to provide mobile optimized content ‣Can load instantly, anywhere
  4. 4. WHY AMP?
  5. 5. ‣Speed! ‣Faster browsing on mobile ‣Better user experience
  6. 6. 3 PIECES OF AMP
  7. 7. 1. AMP HTML
  8. 8. ‣HTML with some restrictions for reliable performance ‣Extensions for building rich content beyond basic HTML
  9. 9. ‣Custom elements are called AMP HTML components ‣make common practices easy to implement in a performa ‣<amp-img>: provides responsive image support for brow that don’t
  10. 10. 2. AMP JS
  11. 11. ‣Ensures fast rendering of AMP HTML pages ‣Manages resource loading ‣Implements all of AMP’s best performance practices
  12. 12. 3. GOOGLE AMP CACHE
  13. 13. ‣Optional ‣Delivers the AMP HTML pages ‣Cached in the cloud to reduce the time content takes to get a mobile device ‣Lives on Google’s CDN for free
  14. 14. GETTING STARTED
  15. 15. ‣Install AMP WordPress plugin https:// wordpress.org/plugins/amp/ ‣All posts will have dynamically generated AMP- compatible versions ‣Appends /amp/ to the end of Post URLs ‣* Pages and archives are not currently supported
  16. 16. VALIDATE
  17. 17. ‣In Chrome, go to URL and add #development=1 to the end ‣Open Chrome Dev Tools ‣Check console for validation errors or messages
  18. 18. STYLING
  19. 19. ‣Install Glue for Yoast SEO & AMP https:// wordpress.org/plugins/glue-for-yoast-seo-amp/ ‣Can enable AMP for pages and custom post types ‣Adds basic styling controls ‣Add google analytics tracking code
  20. 20. WORTH IT?
  21. 21. RESOURCES
  22. 22. ‣ https://www.ampproject.org/ ‣ https://timkadlec.com/2015/10/amp-and-incentives/ ‣ http://www.wpwatercooler.com/video/ep179-implementing-google-amp-facebook-instan pages-on-wordpress/ ‣ https://deliciousbrains.com/amp-wordpress-google-accelerated-mobile-pages/ ‣ https://www.valet.io/amp-for-wordpress/ ‣ http://torquemag.io/2016/03/making-amp-wordpress/
  23. 23. QUESTIONS?
  24. 24. THANKS! @greenhornet79 endocreative.com

×