Building AMP-first Sites, the WordPress Way

Transcript

1. WordCamp NYC @sdenaro Salvatore Denaro, Sept 20th 2019
2. Agenda Why WordPress Why AMP AMP for WordPress 01 02 03
3. Agenda Migrating To AMP Building For AMP Demos, Questions, Answers 04 05 06
4. The people who make the web work. The people who make the web look good. The people who make the web profitable. Who is this talk for?
5. • I’ve been writing code for 20+ years • I’ve been tech leader for 10 years • I make excellent espresso
6. I am not officially speaking for Google today
7. Why WordPress?
8. Our mission: Organize the world’s information and make it universally accessible and useful. https://www.google.com/search/howsearchworks/mission/
9. 33% of the WEB 60% of CMS Market W3techs survey, 2018
10. No other CMS has a community this size
11. What is AMP?
12. AMP for WordPress : Comparing FCP Scores
13. We know what makes pages fast
18. AMP gives you these for Free
19. You get these by installing the plugin.
20. AMP HTML AMP JS AMP Cache
22. AMP HTML All AMP pages are HTML pages but not all HTML pages are AMP pages. AMP • No special plugins • Uses existing browser
23. AMP HTML • Large library of components for static and dynamic web sites • Framework providing lists, templating, images, media embeds • Rules that enforce the best practices needed to keep things fast.
24. AMP HTML • Static Layout, dynamic content • 50k css-inlined in the page header • You must specify element sizes • Strict rules on the DOM.
25. AMP HTML Static layout does not mean static content
26. Static layout, Dynamic content
27. AMP HTML • Component model • Prefer JSON configuration
28. AMP HTML If you are using iframes for reuse you are already using web components. Iframes tend to be ad hoc components. They tend to be superset of all reuse cases.
29. AMP HTML : Ecosystem is growing
30. AMP JS The correct amount of synchronous JavaScript is zero, or as close to zero as possible.
32. AMP Cache • Not just a CDN • AMP Cache is a specification, others can (and have) built their own AMP Cache
35. Pre-Rendering If the HTML page is the recipe and the page elements are the ingredients, pre-rendering is the difference between sending pizza dough...
36. Pre-Rendering ...and a pizza. (pre-rendered pie)
37. AMP for WordPress
38. Serving AMP from WordPress before plugin • Handwritten custom themes • M-dot sites and AMP-dot sites • This was difficult • We have an alternative
39. WordPress AMP Plugin
41. <img> CSS styles Fonts Custom JS <amp-img> Inline CSS Inline font-face Custom JS removed
42. Automatic conversion for generic tags AMP non-AMP
43. Widgets, embeds, comments, pages...
45. CSS Tree Shaking This is possible because AMP pages will have known components and known component sizes. No new styles will be added, we can know what styles will be on the page in advance.
46. AMP Plugin Admin AMP Plugin section Transitional AMP mode
47. Reader mode Transitional mode Standard AMP mode
49. Validation workflow
50. Validation workflow Custom JS errors
51. AMP Validation • Validation in the browser • In the WP Dashboard • In bulk from the command line • From the search console • All using the same AMP Validation
53. Example Add a block
54. Example Edit block
55. Example Configure
56. Example Did I add an AMP block?
57. Example <amp-twitter data-tweetid="1107837091860213760" layout="responsive" width="600" height="480"> </amp-twitter>
58. Example - Non-AMP
59. AMP Stories for WordPress
60. AMP Stories • Create beautiful and engaging content • Sharable and linkable on the open web • Fast loading times • Immersive
61. Examples • Rich Content • Quick Page Load • Immersive
62. Examples • Video • Transitions • Interactive
63. AMP Stories Editor
64. Example
65. Example
67. AMP Stories • Stories are surfaced via Search, News and Images • Best used “To Tell a Story” • Call to action
68. AMP Story Ads
69. Migrating to AMP
70. Quick Roadmap • Install the plugin • Validate! • Fix it
71. AMP Debugging Workflow
72. Bulk Validate from CLI wp amp validate-site wp amp reset-site-validation
74. What if your theme isn’t working? add_theme_support( 'amp', array( 'template_dir' => 'amp-templates', ) ); • You can fork your theme and fix the AMP issues then merge those changes. • Develop your AMP theme as a child theme.
75. Disable the customizer add_filter( 'amp_customizer_is_enabled', '__return_false' ); (and use a child theme)
76. Save this snippet <?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?> <?php else : ?> <?php endif; ?>
77. When you need AMP and HTML to differ <?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?> <amp-social-share type="twitter"></amp-social-share> <?php else : ?> <a href="https://twitter.com/intent/tweet/?url=http%3A%2F%2Fexample.com">Share</a> <?php endif; ?>
78. You need to add to the AMP header or footer add_action( 'amp_post_template_footer', 'xyz_amp_add_pixel' ); function xyz_amp_add_pixel( $amp_template ) { $post_id = $amp_template->get( 'post_id' ); ?> <amp-pixel src="https://example.com/hi.gif?x=RANDOM"></amp-pixel> <?php }
79. Working with a JS Nav <!-- 1. Define the state --> <amp-state id="navMenuExpanded"> <script type="application/json">false</script> </amp-state>
80. Working with a JS Nav <!-- 2. Mutate the state --> <button class="menu-toggle" on="tap:AMP.setState( { navMenuExpanded: ! navMenuExpanded } )" [class]="'menu-toggle' + ( navMenuExpanded ? ' toggled-on' : '' )" aria-expanded="false" [aria-expanded]="navMenuExpanded ? 'true' : 'false'" > <?php _e( 'Menu', 'example' ); ?> </button>
81. Working with a JS Nav <!-- 3. React to state changes --> <nav class="site-header-menu" [class]="'site-header-menu' + ( navMenuExpanded ? ' toggled-on' : '' )" aria-expanded="false" [aria-expanded]="navMenuExpanded ? 'true' : 'false'" > <?php wp_nav_menu( /* ... */ ); ?> </nav>
82. Disable a script function example_javascript_detection() { if (function_exists( 'is_amp_endpoint' ) && is_amp_endpoint()) { return; // or AMP replacement. } wp_enqueue_scripts('example_javascripts.js'); } }
83. • AMP can be embedded anywhere the them allows you to embed HTML • AMP Components will render on AMP and Non-AMP pages • You’ll need to import the component in a custom header • You might need to “fix” minor issues • This is still experimental • Please go to https://amp.dev • Please file bug reports on GitHub
85. Building for AMP
86. 86 Find compatible plugins & themes: amp-wp.org/ecosystem
87. Pick an AMP compatible theme
88. Pick an AMP compatible theme
89. Pick an AMP compatible theme One of these is AMP, one is HTML.
90. AMP and HTML from the same Post setka
91. AMP and HTML from the same Post AMP HTML
92. Widgets Theme features such as menu, widgets, HTML snippets etc, can be rendered as AMP on the fly. Be aware that Widgets or HTML snippets that break the AMP rules will prevent the page from rendering as AMP
93. Plugins • AMP compatible forms • Works with blocks
94. Plugins • Used throughout this deck • AMP compatible because it builds on Gutenberg
95. Plugins
96. What is WP Rig It’s a WordPress starter Theme that is: • Progressive • Mobile First • AMP-Ready You can compare it to underscore
97. WP Rig : AMP Ready • In WordPress, open up AMP Menu • You’ll see your Theme has built-in AMP support
98. WP Rig : AMP Ready
99. WP Rig : PWA Support • Service workers ◦ PWA plugin adds workbox ◦ And an API to extend the service work ◦ PHP extensions that compile to the WB API
100. WP Rig : PWA Support • Service Worker created by PHP on on the fly ◦ Routing, Caching, Offline comments ◦ enqueue javascript to run in the service worker • Add features to your theme that run locally
101. WP Rig • Compare to underscore • Progressive Web AMP • Good alternative to headless CMS + React
102. Q&A
103. End.