Date post: | 15-Apr-2017 |
Category: |
Technology |
Upload: | jeremy-green |
View: | 767 times |
Download: | 0 times |
ACCELERATED MOBILE PAGESAN OPEN SOURCE INITIATIVE
WHAT IS AMP?
‣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
WHY AMP?
‣Speed!
‣Faster browsing on mobile
‣Better user experience
3 PIECES OF AMP
1. AMP HTML
‣HTML with some restrictions for reliable performance
‣Extensions for building rich content beyond basic HTML
‣Custom elements are called AMP HTML components
‣make common practices easy to implement in a performant way
‣<amp-img>: provides responsive image support for browsers that don’t
2. AMP JS
‣Ensures fast rendering of AMP HTML pages
‣Manages resource loading
‣ Implements all of AMP’s best performance practices
3. GOOGLE AMP CACHE
‣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
GETTING STARTED
‣ 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
VALIDATE
‣ In Chrome, go to URL and add #development=1 to the end
‣Open Chrome Dev Tools
‣Check console for validation errors or messages
STYLING
‣ 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
WORTH IT?
RESOURCES
‣ https://www.ampproject.org/
‣ https://timkadlec.com/2015/10/amp-and-incentives/
‣ http://www.wpwatercooler.com/video/ep179-implementing-google-amp-facebook-instant-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/
QUESTIONS?
THANKS! @greenhornet79
endocreative.com