amp it up! using google accelerated mobile pages with wordpress - wordcamp ann arbor 2016

2.2Mb22 JavaScript Files (363kb)8 CSS files (75k)18 Different Resource Domains101 Total HTTP Requests

Average Web Page (2015)

https://www.sitepoint.com/average-page-weight-increased-another-16-2015/

More than 40% of users will abandon

a website that takes

more than 3 seconds to

load

3 Second Rule:

Accelerated Mobile Pages

“AMP is a way to build web pages for static content that render

fast”

Google Says...

“We found that AMP pages load four times faster,

and use eight times less data than traditional

mobile optimized pages”

AMP in Action

Jon Parise (Product Engineer, Pinterest)

“After the successful rollout of AMP for

news sites, it is now ready for more.”

Beyond Publishers

Rudy Galfi (AMP Team Product Manager, Google)

600 million AMP Pages

700,000 Domains

100+ Languages

AMP in Google Index

John Mueller Webmaster Trends Analyst at Google

75% Aware of AMP

18% Have Researched AMP Deeply 23% Currently Implementing AMP

49% Expect AMP to have significant effect on Page Rankings

SEO Professionals Survey

http://www.link-assistant.com/news/amp-survey.html

1.AMP HTML

AMP HTML Components

amp-adamp-imgamp-videoamp-audioamp-pixelamp-videoamp-carousel

amp-lightbox amp-animamp-iframeamp-instagramamp-twitteramp-youtubeamp-accordian

2. AMP JS

3. AMP CDN

No 3rd party Javascript

External resources must

define static dimensions

All CSS Must be inline (50k Max)

Only GPU-Accelerated animations

Prioritize Resource Loading

• Can modify template/CSS• Use custom template• Apply to custom post types• AMP hooks and filters

AMP Plugin Customizations

https://fewerthanthree.com/tutorial/customizing-google-amp-for-wordpress/

https://deliciousbrains.com/amp-wordpress-google-accelerated-mobile-pages/

Iniative being pushed by Google

Loads pages fast on mobile devices

Does not replace responsive design

Restricts HTML, CSS & JavaScript

Install the AMP Plugin and experiment

What We Learned About AMP

About MeMike HaleDeveloperRainmaker Digital

@MikeHalewww.mikehale.me