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.

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