Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

295 views

Published on

Google is pushing Accelerated Mobile Pages (AMP) in a big way. AMP pages restrict what you can do all for the sake of performance on mobile devices. In this talk we’ll cover the basics of AMP, how it’s different than mobile-ready and responsive design, and the plugins you’ll need to take advantage of AMP on your WordPress site.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
295
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

  1. 1. 2.2Mb 22 JavaScript Files (363kb) 8 CSS files (75k) 18 Different Resource Domains 101 Total HTTP Requests Average Web Page (2015) https://www.sitepoint.com/average-page-weight-increased-another-16-2015/
  2. 2. More than 40% of users will abandon a website that takes more than 3 seconds to load 3 Second Rule:
  3. 3. Accelerated Mobile Pages
  4. 4. “AMP is a way to build web pages for static content that render fast” Google Says...
  5. 5. “We found that AMP pages load four times faster, and use eight times less data than traditional mobile optimized pages” AMP in Action Jon Parise (Product Engineer, Pinterest)
  6. 6. “After the successful rollout of AMP for news sites, it is now ready for more.” Beyond Publishers Rudy Galfi (AMP Team Product Manager, Google)
  7. 7. 600 million AMP Pages 700,000 Domains 100+ Languages AMP in Google Index
  8. 8. John Mueller Webmaster Trends Analyst at Google
  9. 9. 75% Aware of AMP 18% Have Researched AMP Deeply 23% Currently Implementing AMP 49% Expect AMP to have significant effect on Page Rankings SEO Professionals Survey http://www.link-assistant.com/news/amp-survey.html
  10. 10. 1. AMP HTML
  11. 11. AMP HTML Components amp-ad amp-img amp-video amp-audio amp-pixel amp-video amp-carousel amp-lightbox amp-anim amp-iframe amp-instagram amp-twitter amp-youtube amp-accordian
  12. 12. 2. AMP JS
  13. 13. 3. AMP CDN
  14. 14. No 3rd party Javascript
  15. 15. External resources must define static dimensions
  16. 16. All CSS Must be inline (50k Max)
  17. 17. Only GPU- Accelerated animations
  18. 18. Prioritize Resource Loading
  19. 19. • Can modify template/CSS • Use custom template • Apply to custom post types • AMP hooks and filters AMP Plugin Customizations
  20. 20. https://fewerthanthree.com/tutorial/customizing-google-amp-for-wordpress/
  21. 21. https://deliciousbrains.com/amp-wordpress-google-accelerated-mobile-pages/
  22. 22. Iniative being pushed by Google Loads pages fast on mobile devices Does not replace responsive design Restricts HTML, CSS & JavaScript Install the AMP Plugin and experiment What We Learned About AMP
  23. 23. About Me Mike Hale Developer Rainmaker Digital @MikeHale www.mikehale.me

×