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
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
7. Onward Journeys
9. Geo Based Editions
12. • Navigation is done per global edition • Is this a news site?
13. First Iteration: Simplified Navigation
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
21. z
23. AMP pages invalidated by adding a Facebook messenger share button
24. AMP pages invalidated by adding a Facebook messenger share button
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!