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.

AMP and WordPress

45 views

Published on

AMP stands for Accelerated Mobile Pages, and it's Google's approach to dramatically speed up the mobile web.

I'll walk you through how to make your website AMP compatible, discuss common issues, and provide a real world example of a Native AMP WordPress site I built recently.

Presented at WP Georgetown on June 5, 2019

Published in: Technology
  • Be the first to comment

  • Be the first to like this

AMP and WordPress

  1. 1. Presented by Bill Erickson WP Georgetown AMP and WordPress
  2. 2. Presented by Bill Erickson WP Georgetown What is AMP?
  3. 3. Presented by Bill Erickson WP Georgetown Features: Incredibly fast website 0 second load time in SERPs Access to Top Stories carousel
  4. 4. Presented by Bill Erickson WP Georgetown Limit CSS to 50kb AMP HTML markup No JavaScript Served from Google’s cache Limitations:
  5. 5. Presented by Bill Erickson WP Georgetown wordpress.org/plugins/amp
  6. 6. Presented by Bill Erickson WP Georgetown Automatically converts HTML to AMP HTML CSS Tree Shaking Validation and error tracking Plugin features:
  7. 7. Presented by Bill Erickson WP Georgetown Native Transitional Reader Template Modes
  8. 8. Presented by Bill Erickson WP Georgetown Plugins loading JavaScript Navigation menus without JS Challenges with AMP
  9. 9. Presented by Bill Erickson WP Georgetown 1. Do nothing, leave page invalidated 2. Disable JS in the plugin 3. Build functionality without plugin Plugins without JavaScript
  10. 10. Presented by Bill Erickson WP Georgetown Examples
  11. 11. Presented by Bill Erickson WP Georgetown Navigation without JS AMP.setState()
  12. 12. Presented by Bill Erickson WP Georgetown
  13. 13. Presented by Bill Erickson WP Georgetown
  14. 14. Presented by Bill Erickson WP Georgetown
  15. 15. Presented by Bill Erickson WP Georgetown
  16. 16. Presented by Bill Erickson WP Georgetown Helper functions ea_is_amp() ea_amp_class() ea_amp_toggle() ea_amp_nav_dropdown() github.com/billerickson/EA-Starter github.com/billerickson/EA-Genesis-Child
  17. 17. Presented by Bill Erickson WP Georgetown
  18. 18. Presented by Bill Erickson WP Georgetown AMP Components https://amp.dev/documentation/components
  19. 19. Presented by Bill Erickson WP Georgetown https://amp.dev/documentation/components
  20. 20. Presented by Bill Erickson WP Georgetown
  21. 21. Presented by Bill Erickson WP Georgetown AMP Analytics
  22. 22. Presented by Bill Erickson WP Georgetown
  23. 23. Presented by Bill Erickson WP Georgetown monsterinsights.com
  24. 24. Presented by Bill Erickson WP Georgetown Questions?

×