$30 off During Our Annual Pro Sale. View Details »

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.

Natalia Baltazar

March 08, 2017
Tweet

More Decks by Natalia Baltazar

Other Decks in Technology

Transcript

  1. AMP in the wild
    Natalia Baltazar @natalialkb

    View Slide

  2. View Slide

  3. is FAST

    View Slide

  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

    View Slide

  5. View Slide

  6. View Slide

  7. Onward
    Journeys

    View Slide

  8. View Slide

  9. Geo Based Editions

    View Slide

  10. View Slide

  11. View Slide

  12. • Navigation is
    done per global
    edition
    • Is this a news
    site?

    View Slide

  13. First Iteration:
    Simplified
    Navigation

    View Slide

  14. View Slide

  15. View Slide

  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

    View Slide

  17. • Completely
    redesigned
    mobile web
    • Improveme
    nts and
    simplificatio
    ns inspired
    by AMP

    View Slide

  18. Monitoring

    View Slide

  19. Monitoring
    1. Developer errors
    2. A journalist adds
    something non-amp
    compliant to the page

    View Slide

  20. View Slide

  21. z

    View Slide

  22. View Slide

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

    View Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. Monitoring
    1. Developer errors
    2. A journalist adds
    something non-amp
    compliant to the page

    View Slide

  28. On the biggest
    traffic day of the
    year, our main
    article was
    invalid on AMP

    View Slide

  29. All Mobile Traffic

    View Slide

  30. Monitoring

    View Slide

  31. How do we break AMP?
    1. Developer
    - Scala Tests
    - Cron Job
    2. Journalist
    - Validate top 50
    - FUTURE: track latest errors in real
    time

    View Slide

  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

    View Slide

  33. VS

    View Slide

  34. AT

    View Slide

  35. AMP sources

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. Advertising Revenue
    • For ad CPM, AMP is within 5%
    • CPM = Cost per thousand
    impressions

    View Slide

  40. AMP in the wild

    View Slide

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

    View Slide