SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
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
1.
Presented by Bill Erickson
WP Georgetown
AMP and WordPress
2.
Presented by Bill Erickson
WP Georgetown
What is AMP?
3.
Presented by Bill Erickson
WP Georgetown
Features:
Incredibly fast website
0 second load time in SERPs
Access to Top Stories carousel
4.
Presented by Bill Erickson
WP Georgetown
Limit CSS to 50kb
AMP HTML markup
No JavaScript
Served from Google’s cache
Limitations:
5.
Presented by Bill Erickson
WP Georgetown
wordpress.org/plugins/amp
6.
Presented by Bill Erickson
WP Georgetown
Automatically converts HTML to AMP HTML
CSS Tree Shaking
Validation and error tracking
Plugin features:
7.
Presented by Bill Erickson
WP Georgetown
Native
Transitional
Reader
Template Modes
8.
Presented by Bill Erickson
WP Georgetown
Plugins loading JavaScript
Navigation menus without JS
Challenges with AMP
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.
Presented by Bill Erickson
WP Georgetown
Examples
11.
Presented by Bill Erickson
WP Georgetown
Navigation without JS
AMP.setState()
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
1.
Presented by Bill Erickson
WP Georgetown
AMP and WordPress
2.
Presented by Bill Erickson
WP Georgetown
What is AMP?
3.
Presented by Bill Erickson
WP Georgetown
Features:
Incredibly fast website
0 second load time in SERPs
Access to Top Stories carousel
4.
Presented by Bill Erickson
WP Georgetown
Limit CSS to 50kb
AMP HTML markup
No JavaScript
Served from Google’s cache
Limitations:
5.
Presented by Bill Erickson
WP Georgetown
wordpress.org/plugins/amp
6.
Presented by Bill Erickson
WP Georgetown
Automatically converts HTML to AMP HTML
CSS Tree Shaking
Validation and error tracking
Plugin features:
7.
Presented by Bill Erickson
WP Georgetown
Native
Transitional
Reader
Template Modes
8.
Presented by Bill Erickson
WP Georgetown
Plugins loading JavaScript
Navigation menus without JS
Challenges with AMP
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.
Presented by Bill Erickson
WP Georgetown
Examples
11.
Presented by Bill Erickson
WP Georgetown
Navigation without JS
AMP.setState()