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

45

Upload: mike-hale

Post on 16-Apr-2017

355 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 2: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 3: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 4: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 5: 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/

Page 6: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

More than 40% of users will abandon

a website that takes

more than 3 seconds to

load

3 Second Rule:

Page 7: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

Accelerated Mobile Pages

Page 8: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 9: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 10: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 11: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 12: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 13: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 14: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 15: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

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

fast”

Google Says...

Page 16: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

“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)

Page 17: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 18: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

“After the successful rollout of AMP for

news sites, it is now ready for more.”

Beyond Publishers

Rudy Galfi (AMP Team Product Manager, Google)

Page 19: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

600 million AMP Pages

700,000 Domains

100+ Languages

AMP in Google Index

Page 20: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 21: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 22: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 23: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 24: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

John Mueller Webmaster Trends Analyst at Google

Page 25: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

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

Page 26: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 27: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 28: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 29: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

1.AMP HTML

Page 30: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

AMP HTML Components

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

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

Page 31: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

2. AMP JS

Page 32: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

3. AMP CDN

Page 33: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 34: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

No 3rd party Javascript

Page 35: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

External resources must

define static dimensions

Page 36: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

All CSS Must be inline (50k Max)

Page 37: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

Only GPU-Accelerated animations

Page 38: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

Prioritize Resource Loading

Page 39: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 40: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

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

AMP Plugin Customizations

Page 41: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Page 42: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

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

Page 43: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

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

Page 44: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

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

Page 45: Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016

About MeMike HaleDeveloperRainmaker Digital

@MikeHalewww.mikehale.me