accelerated mobile pages

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