AMP and the instant web - WebPerformance NYC MeetUp group
- 1. The Instant Web & The AMP Revolution Michael Posso @micposso
- 2. “The U.S. ranks 44th in the world in mobile internet speeds 2017 recode.net/Ookla
- 3. “Google will make page speed a factor in mobile search ranking starting in July Jan 2018 TechCrunch
- 4. “The average media site in the U.S. loads over 95 resources . Feb 2018 MachMetrics Speed Blog
- 5. “Developing world hits 98.7 per cent mobile phone adoption Aug 2017 theregister.co.uk
- 6. Why Google came up with AMP? The Accelerated Mobile Pages Project (AMP) is an open-source website publishing technology designed to improve the performance of web content and advertisements created on 2015. AMP is compatible with Bing, Baidu, Sogu, Yahoo, Wordpress, Drupal, SquareSpace, Medium, LinkedIn, Twitter, Reddit, Weibo, Tumblr, eBay, AliExpress and BigCommerce, Yandex?
- 7. Why Google came up with AMP? User spend more time in native mobile apps Tracking user behavior on native apps is hard Establish a fast movings standard for mobile and PWAs
- 8. Why Google came up with AMP? 31,000,000 Domains publishing AMP documents 2x more time spent on an AMP page 20% increase in sales conversions with AMP Google commissioned study from Forrester Nov 2017
- 9. “God! I love Google, but I hate AMP so much. Youtube comment On the Official AMP channel ampletter.org
- 10. “We are moving from a world where you can put anything on your website to one where you can’t because Google says so” — Joshua Benton, Nieman Journalism Lab
- 11. How AMP Works The quick story Non-Blocking Content AMP mediates all content operations. It offers the best possible critical path rendering. AMP also can prioritize content on you page. CDN Google and Cloudflare. Only on valid AMP pages. Uses URL format. Can optimize images and sanitizes code & minification. It has an API. By passes AdBlockers. Served over HTTP2 Static Layout Assets properties are declared in the HTML, requiring only one HTTP request to build the layout. Avoid front-end rendering of elements. AMP provides layout options.
- 12. How AMP Works AMP JS script & Components Include in the head of the document. < 50k CSS Move all CSS inside the <style> tag in the head of the document. Clean CSS. AMP boilerplate Include in the head. Convert tags to AMP tags, and remove prohibited elements
- 13. AMP HTML Tags The quick story <video> = <amp-video> <audio> = <amp-audio> <img> = <amp-img> <button> = allowed <form> = needs form component <svg> = allowed
- 15. AMP Forbidden CSS !important transition @keyframes {...} Any selectors with -amp- or i-amp-
- 16. How AMP Works website website website google.com/amp/ pre-render AMP page
- 17. AMP in SERPS
- 18. AMP Components The quick story To extend functionality, AMP offers components of AMP optimized libraries. Scripts must be included in the head. Carousel and Sliders Google Analytics Date Picker LaterPay Geolocation
- 19. Webfonts in AMP AMP allows for an external CSS file linking to a font service or @font-face fast.fonts.net fonts.googleapis.com use.typekit maxcdn.bootstrapcdn.com cloud.typography.com
- 20. Using Third Party Components Head <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script> Source <amp-facebook width="486" height="657" layout="responsive" data-href="https://www.facebook.com/zuck/posts/10102593740125791"> </amp-facebook>
- 21. Using AMP ComponentsHead <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> Source <amp-carousel width="450" height="300"> <amp-img src="images/image1.jpg" width="450" height="300"></amp-img> <amp-img src="images/image2.jpg" width="450" height="300"></amp-img> <amp-img src="images/image3.jpg" width="450" height="300"></amp-img> </amp-carousel>
- 22. AMP for WordPress (4.9.6) AMP for WordPress Collaboration of Automattic and some Google AMP developers AMP for WP Offers an AMP page builder Glue for Yoast SEO & AMP Extend the Yoast SEO plugin to integrate with AMP content
- 23. AMP Plugin Settings Allows for basic styling
- 24. AMP for Static Site Generators Jekyll (amp-jekyll) Hexo (hexo-generator-amp) Gatsby Theme(gatsby-amp-starter-blog) Hugo (gohugo-amp)
- 25. AMP for Emails Sub-set of the AMP spec New mime format Requires serving text/html and text/x-amp-html Allows for fetching data from and end-point in Json format Binds elements to data, allowing interactivity
- 27. AMP Development Tools validator.ampproject.org AMP Validator Chrome Extension Append #development=1 to end of URL Use amphtml-validator Add AMP to your CI build (Travis)
- 28. AMP Ecosystem