More Related Content
What's hot (17)
Similar to AMP in WordPress, the WordPress Way (20)
Recently uploaded (20)
AMP in WordPress, the WordPress Way
- 1. AMP in WordPress, the WordPress Way Alberto Medina @iAlbMedina Weston Ruter @WestonRuter
- 3. A strong user-first open web forever. AMP Project vision
- 5. Support the long-term success of web publishers, merchants and advertisers CX Team Mission
- 6. Content Strategy AB/Testing Performance Monitoring Analytics Marketing SEO What does it take to succeed as a WordPress Publisher? Monetization 🤔
- 7. Performance
- 8. What does it take to achieve consistent high performance for my website? 🤔 Minimize network requests GPU-based anims Avoid style/layouts recalcs No blocking CSS HTTP/2 Prioritize content loading Async loads Optimize Images Minimize 3P JS Preloading Lazy-load Use will-change
- 10. A web components framework to easily create user-first websites
- 11. Tokyo
- 12. Tokyo
- 13. Tokyo
- 14. AMP = HTML framework
- 16. Turbo-charged page loading via AMP caches
- 17. AMP pages aren’t just web pages, they’re ultra-portable, embeddable, content units
- 18. Without AMP Cache With AMP Cache Web Server Origin Web Server Edge Server Edge Server Edge Server Edge Server Edge Server Edge Server
- 19. First Viewport (above the fold) Below the fold Pre-rendered Not loaded
- 20. “Instant” load via pre-render 1. Preload page 2. Pre-render in hidden iframe 3. Display when user taps
- 22. Tokyo
- 23. Empowering developers to create great experiences across the web AMP Stories AMP Web AMP Ads AMP Emails
- 24. Tokyo GDS dropping in animation file here EOW
- 25. AMP in WordPress
- 26. Manual Automatic Diminishes as the ecosystem evolves Increases as the ecosystem evolves Developer intervention Assisted generation AMP-first WordPress Sites Today Ecosystem Status Quo Official AMP plugin for WordPress
- 27. Official AMP Plugin for WordPress Automate large parts of the process Provide developer tools and guidance Monitor and enforce AMP Compatibility
- 28. AMP AMP-first Content for WordPress Sites
- 29. Experiences
- 30. AMP Websites
- 31. AMP Stories
- 33. Template Modes
- 34. Standard Mode AMP-first WordPress Website
- 35. Non AMP Transitional AMP Mode Transitional Mode
- 36. Non AMP AMP Reader Mode Reader Mode
- 39. AMP Developer Tools and Guidance
- 42. <script data-evil> document.write('Hello, World!') </script> { "code": "invalid_element", "node_attributes": { "data-evil": "" }, "node_name": "script", "parent_name": "div", "text": "document.write('Hello, World!')", “type": "js_error" } Invalid AMP Markup Validation error object Validation error ID d5f57c86b3bdefc2718cbe56753644bf
- 43. Plugin Actions Automatic Sanitization (remove offending code) Manual Sanitization (keep offending code)
- 44. Developer actions Reject plugin action (that code cannot be removed) Accept plugin action (it is ok to remove that code)
- 45. AMP Plugin Compatibility Tool
- 46. Ecosystem
- 47. Themes ★ The set of AMP-compatible plugins is expanding ★ All Core themes are fully AMP compatible! ★ Check ecosystem page @ amp-wp.org
- 48. Plugins ★ The set of AMP-compatible plugins is expanding ★ Check ecosystem page @ amp-wp.org
- 49. Used by 600K+ domains Genesis Framework
- 50. Beautiful, clutter-free theme for sites in the health, wellness, and lifestyle niches. Essence Pro Theme
- 51. Demo Time!
- 52. AMP project Learn more and do more! amp.dev AMP Plugin (WordPress.org) wordpress.org/plugins/amp AMP Plugin (Github) github.com/ampproject/amp-wp AMP Plugin Product Site amp-wp.org AMP Stories bit.ly/amp-stories-format @westonruter, @ialbmedina Follow us!