Lessons from converting a million AMP pages a day. AMP Conf 2017 Presentation.

1. AMP The Good The Bad and The Ugly
1

3. Numbers
1 Million - Distinct AMP articles rendered per day.
440k - The size of the average canonical page CSS.
31k - The size of the average AMP page CSS
600ms - Time to convert, from cold, a typical page.
100ms - CPU Time to convert a Page
1 Second - Median DOM Content Loaded.
3

4. HTML to AMPHTML Is Easy
Mostly.
4

5. 440K > 50K
What do you mean I only
have 50K for CSS?
5

6. CSS is like that storage unit
your in laws have.
6

7. The One Big CSS File
Model Should Die
7

8. Filter the CSS and only
include the rules in use.
Sounds Easy Enough …
8

9. CSS Filtering:
It doesn’t matter what matches,
just that something does.
Or rather that nothing does…
9

10. Find all the Things
10

11. Check Each Part
.foo .bar a.baz { … }
If any one part isn’t in the dom delete the selector.
If you’ve deleted all the selectors delete the CSS block.
10 X Faster than $(“.foo .bar a.baz”)
11

12. Still Too Big? Rename All The Things
.header-very-long-class-name -> .cd
#veryDescriptiveIdThatIsUsedOnce -> #de
Watch out for
[class^=“very-long-class-“] and amp-*
12

13. !important (who named it not important?)
13

14. Remember CSS Specificity
14

15. #id1 #i12 .selector
15

16. Enough of CSS - HTML Edge Cases
<iframes are us>
If it’s an <iframe> and it can be https make it an <amp-iframe>
Lots of things can be HTTPS they just don’t admit it.
Examples:
Storify, SurveyGizmo, ispot.tv, ABC TV embeds,
C-Span, Kickstarter, gfycat, giphy, livestream
16

17. Shims all the way down.
Resizable JS element with a shim: Disqus Comments.
AMP Page -> <amp-iframe> (shim) -> <regular iframe>
Shim listens for resize events from regular iframe,
passes to AMP
Remember to add placeholder and overflow elements.
Sample:
https://storage.googleapis.com/relay-media-assets/
players/disqus-shim.html
17

18. amp-list - Not Just for Lists
18

19. amp-list - Not Just for Lists
19

20. For a Fist Full of Dollars
Put Ads in the Content
300x250 after paragraph 2
300x250’s every N paragraphs.
20

21. For a Few Dollars More
You need more that DFP -> ADX
Nativo, Teads
Private exchanges
Make sure your video pre-roll works.
Include Direct Sold
21

22. Use amp-experiment to Test Ads and UX
data-loading-strategy=“prefer-viewability-over-views”
amp-sticky-ad vs 320x50 top banner
What elements are “road blocks” that cause people
to stop reading?
22

23. Your Logo Is Important
23

24. Don’t Just Use The Masthead Logo
24

25. The Ugly
25

26. AMP In A Hurricane
26

27. 27

28. Parting thoughts
You don’t ‘do amp’ and leave it.
Validate Every Page.
28

29. Thank You.
jpp@relaymedia.com
www.relaymedia.com
29