Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp Ann Arbor 2016
Amp up your Site with Accelerated Mobile Pages
-
Upload
brian-mckeiver -
Category
Technology
-
view
982 -
download
1
Transcript of Amp up your Site with Accelerated Mobile Pages
![Page 1: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/1.jpg)
by Brian McKeiverCo-Owner & Kentico MVP at BizStream
AMP up your Site with Accelerated Mobile Pages
![Page 2: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/2.jpg)
Goals
1. What the heck is AMP?
2. AMP Basics and Extended
3. What’s the Future
![Page 3: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/3.jpg)
When you see this…
Let’s talk about this over a beer
![Page 4: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/4.jpg)
Why AMP? Why Now?
Started by Google, to try and fix a problem
…How do we fix this?
Let’s face it mobile browsing sucks:• It is too slow• At times, it is hard to use• Responsive is abused too
much
![Page 5: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/5.jpg)
AMP (the idea)Let’s put the DOM on a diet
• Reduce the viable html tags• Eliminate external CSS requests
and <style />• Eliminate loading 50 JavaScript
libraries per page• Stop having the browser doing
too much math
![Page 6: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/6.jpg)
Accelerated Mobile Pages (the solution)
![Page 7: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/7.jpg)
Demo time
+
![Page 8: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/8.jpg)
How Do I know It Worked?AMP has a built in validator / development mode
Simply add to any amp page URL:
#development=1
![Page 9: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/9.jpg)
Extended AMP
These components
make up for the markup
limitations.
More are coming
![Page 10: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/10.jpg)
ASP.NET GotchasThe <form> tag is not allowed in AMP.
Bye bye Web forms!
For the MVC Fans out thereAMP boilerplate syntax is all about @ character(which makes Razor ANGRY)
Visual Studio 2015Intellisense does not like it so much
![Page 11: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/11.jpg)
Tools / How to Get Startedhttp://AMPProject.org/
Github repoAMP boilerplateAMP docs
http://g.co/AMPDemoGoogle has a preview search results page
Google Search Console AMP Error Reports
![Page 12: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/12.jpg)
Proper SEO Still MattersOn the AMP page:<link rel="canonical" href=“http://www.news-site.com/article.html" />
On the full version of the page:<link rel="amphtml" href=“http://www.news-site.com/amp/article.html" />
Schema.org still applies heavily
![Page 13: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/13.jpg)
Short Term FutureLaunch Partners:
(has an AMP plugin already)
![Page 14: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/14.jpg)
Future Vision• Google’s plans are the eventually cache the entire
page on their servers and cdns, making it super fast.
• This is started by Google right ? (Ad Revenue)
• They want the pages to load faster, so Ads loads faster, so people tap them.
![Page 15: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/15.jpg)
The Real Question
Google says AMP pages load 15 - 85% faster than standard mobile web pages.
Can a technology that is only a few months old really change the web?
![Page 16: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/16.jpg)
Questions & Answers
?
![Page 17: Amp up your Site with Accelerated Mobile Pages](https://reader035.fdocuments.in/reader035/viewer/2022062503/587dee9f1a28abab7e8b478f/html5/thumbnails/17.jpg)
Brian McKeiverCo-Owner & Kentico MVP, BizStreamPhone: (616) 481-1631 Web: www.bizstream.com Email: [email protected]
@mcbeev
www.linkedin.com/in/brianmckeiver
www.mcbeev.com