Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amp up your Site with Accelerated Mobile Pages

1,928 views

Published on

My presentation from South Florida Code Camp 2016 on Accelerated Mobile Pages (AMP). SFLCC was in lovely Fort Lauderdale, Florida.

Google started AMP as an initiative to dramatically improve the performance of the mobile web. The main approach that AMP employs is placing HTML on a diet, in an attempt to gain breakneck speeds, for loading content on our mobile devices. This new open-source based framework throws out the standard approach to loading bloated CSS and JavaScript libraries and instead becomes a lean, mean superfast machine. Join me to find out what exactly are Accelerated Mobile Pages, what do they mean for search, and how can you prepare for it on your website?

Published in: Technology

Amp up your Site with Accelerated Mobile Pages

  1. 1. by Brian McKeiver Co-Owner & Kentico MVP at BizStream AMP up your Site with Accelerated Mobile Pages
  2. 2. Goals 1. What the heck is AMP? 2. AMP Basics and Extended 3. What’s the Future
  3. 3. When you see this… Let’s talk about this over a beer
  4. 4. 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
  5. 5. 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
  6. 6. Accelerated Mobile Pages (the solution)
  7. 7. Demo time +
  8. 8. How Do I know It Worked? AMP has a built in validator / development mode Simply add to any amp page URL: #development=1
  9. 9. Extended AMP These components make up for the markup limitations. More are coming
  10. 10. ASP.NET Gotchas The <form> tag is not allowed in AMP. Bye bye Web forms! For the MVC Fans out there AMP boilerplate syntax is all about @ character (which makes Razor ANGRY) Visual Studio 2015 Intellisense does not like it so much
  11. 11. Tools / How to Get Started http://AMPProject.org/ Github repo AMP boilerplate AMP docs http://g.co/AMPDemo Google has a preview search results page Google Search Console AMP Error Reports
  12. 12. Proper SEO Still Matters On 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
  13. 13. Short Term Future Launch Partners: (has an AMP plugin already)
  14. 14. 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.
  15. 15. 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?
  16. 16. Questions & Answers ?
  17. 17. Brian McKeiver Co-Owner & Kentico MVP, BizStream Phone: (616) 481-1631 Web: www.bizstream.com Email: bmckeiver@bizstream.com @mcbeev www.linkedin.com/in/brianmckeiver www.mcbeev.com

×