AMP in the Wild

AMP in the Wild

No JS? No problem! From the beginning it was never our intention to recreate a Guardian article in AMP. We used it as an opportunity to rethink our article pages. In the end, that process has led us to improve our onward journey experience and even redesign our header and navigation.

In this talk you will learn about some of the problems that we faced when turning a Guardian article into an AMP page. We will also discuss how we dealt with monitoring our AMP pages for validation, and some of the pros and cons of building and supporting AMP.

Video link to come shortly.

5c993eb3c38f0b81891fa947adfeb95a?s=128

Natalia Baltazar

March 08, 2017
Tweet

Transcript

  1. AMP in the wild Natalia Baltazar @natalialkb

  2. None
  3. is FAST

  4. The Guardian, the only known media site where their non-AMP

    files are actually faster. Because they're awesome Malte Ubl Oct 2015 goo.gl/61SXUB
  5. None
  6. None
  7. Onward Journeys

  8. None
  9. Geo Based Editions

  10. None
  11. None
  12. • Navigation is done per global edition • Is this

    a news site?
  13. First Iteration: Simplified Navigation

  14. None
  15. None
  16. • Content in menu changes on each global edition •

    First time users were 3 times more likely to think of us as a news site
  17. • Completely redesigned mobile web • Improveme nts and simplificatio

    ns inspired by AMP
  18. Monitoring

  19. Monitoring 1. Developer errors 2. A journalist adds something non-amp

    compliant to the page
  20. None
  21. z

  22. None
  23. AMP pages invalidated by adding a Facebook messenger share button

  24. AMP pages invalidated by adding a Facebook messenger share button

  25. None
  26. None
  27. Monitoring 1. Developer errors 2. A journalist adds something non-amp

    compliant to the page
  28. On the biggest traffic day of the year, our main

    article was invalid on AMP
  29. All Mobile Traffic

  30. Monitoring

  31. How do we break AMP? 1. Developer - Scala Tests

    - Cron Job 2. Journalist - Validate top 50 - FUTURE: track latest errors in real time
  32. But what is the cost of AMP? 1. Initial setup

    cost - Include it as part of your website - Separate stack 2. Continued developer cost 3. Maintenance cost
  33. VS

  34. AT

  35. AMP sources

  36. 60% of all our Google referred mobile traffic is AMP

  37. AMP links ~2% more likely to be clicked

  38. AMP clickthrough rate to a second page (non-amp) is 8.6%

    higher
  39. Advertising Revenue • For ad CPM, AMP is within 5%

    • CPM = Cost per thousand impressions
  40. AMP in the wild

  41. Thanks for Listening @natalialkb We’re hiring!