Embed Size (px)
Citation preview
AMPTheGoodTheBadandTheUgly
1
Numbers1 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
HTML to AMPHTML Is Easy Mostly.
4
440K > 50K What do you mean I only
have 50K for CSS?5
CSS is like that storage unit your in laws have.
6
The One Big CSS FileModel Should Die
7
Filter the CSS and only include the rules in use.
Sounds Easy Enough …
8
CSS Filtering:It doesn’t matter what matches,
just that something does.
Or rather that nothing does…
9
Find all the Things
10
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
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
!important (who named it not important?)
13
Remember CSS Specificity
14
#id1 #i12 .selector
15
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
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
amp-list - Not Just for Lists
18
amp-list - Not Just for Lists
19
For a Fist Full of Dollars
Put Ads in the Content
300x250 after paragraph 2
300x250’s every N paragraphs.
20
For a Few Dollars MoreYou need more that DFP -> ADX
Nativo, Teads
Private exchanges
Make sure your video pre-roll works.
Include Direct Sold
21
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
Your Logo Is Important
23
Don’t Just Use The Masthead Logo
24
The Ugly
25
AMP In A Hurricane
26
27
Parting thoughts
You don’t ‘do amp’ and leave it.
Validate Every Page.
28
