What is AMP? Why should I learn what it offers? And how can I take advantage of it in WordPress? This deck was used to guide a discussion about these topics at the awesome PDX WP Meetup on August 5th, 2019.

1. AMP in WordPress, the
WordPress Way
Alberto Medina
@iAlbMedina
Weston Ruter
@WestonRuter

2. AMP Project vision

3. A strong user-first open
web forever.
AMP Project vision

4. CX Team Mission

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

32. AMP Plugin
Admin
Screen

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

37. AMP Plugin
Admin
Screen

39. AMP
Developer Tools
and Guidance

40. ContextualizeIdentify AMPify
AMP
Development Workflow

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!