The Impact of Ads on Performance and

Improving Perceived Performance

Julia Lee, Sr. Dir. of Engineering, Yahoo! MailYahoo!, Inc.

October 2011

Yahoo! Mail #1 in US289MM unique users1.9B pageviews/dayYahoo! Mail just went GA with new product- 2x faster- New ad implementation

13B ad impressions/day

Fast facts

My goal today

Tell you about our ads journeyShare some broad strategies to try

Definitions

Display Advertising – Not Search Advertising

Ad creative – Markup, images, assets, JS/CSS to show the ad

Ad decisioning time – Time to decide which ad to show the user

Ad serving time – Time to download the ad assets over network

Ad rendering time – Time to render the ad, including animation

Timeline

0

500

1000

1500

2000

2500

3000

3500

4000

398328003  398328009 398328139

Page

Tim

e (

ms)

Text

Graphical

Text vs. Graphical Impact

Overall latency breakdown

73% latency

Due to ads

27% latency

Application

What changed?Display

AdvertisingLandscape

Ad Marketplace + Ecosystem (~2006)

Supply(publishers)

Ad Networks

Demand(advertisers)

Ad Server

Y! O&O

Ad Ad Ad Ad AdAd Ad

AdNet

Ad

Ad Marketplace + Ecosystem (~2009)

Supply(publishers)

Exchanges

Ad Networks

Demand(advertisers)

Ad Server

Y! Network

Right Media

AdNet

AdNet

Ad Net

AdNet

AdNet

DCLK

Y! O&O NPC Comcast eBay

Ad Ad Ad Ad AdAd Ad

It’s complicated Richer targeting:

relevant is fast!

Inventory forecast

Pricing optimization

Local

Deals

Coupons

Ad creative/tags

Ad call sequenceApplicationClient Ad networkAd server Ad exchange Ad content hosting

HTTP request

Async ad call

Page content

Ad creative/tags

Ad request to ad network

Ad request to 3rd party

Ad creative

Ad creative request

Ad creative/tags

Ad infinitum…

Ad infinitum…

Server side

Client side

What next?Measure and monitor

Monitoring ad positions Many different profiles/positions Campaigns change Latency transient What should alert threshold be? What triggered the alert?

Vendor Ad Latency Monitoring

X Axis: Vendors Y Axis: Avg P95 Time(in ms), sorted on Avg Median TimeTime periods below are rolling windows (e.g. Year-to-Date = 2/24/09

through 2/23/10)

Monitoring Challenges

What is representative? Is it repeatable? What is actually slow? Decisioning? Serving? Network? Identifying ads == finding needle in a haystack Is this the right level of granularity? How to engage with a vendor?

Global challenges

Are ads locally decided? Are ads geo-targeted? What is the right user experience? Is the ad serving footprint global? Where is the bottleneck?

Ad defensive strategies

1. Sandbox ad content (HTML, JavaScript, etc.) in an IFrame

2. Host IFrame on a cross-domain different from publisher

3. Implement an API for richer functionality for use by publishers/vendors can use (rollovers, expanding)

4. Use cross-domain messaging to communicate between application and ad

Better security Better stability Faster performance Richer ad capabilities Allows metrics gathering More control

Strategy #1: Ad handling library

Benefits

Strategy #2: Control server vs. client side ad requests

Combine ad requests with other requests Leverage AJAX techniques Delay ad loading to avoid browser contention Strategy differs based on point in session User perception can vary with techniques

Web1.0 Ad Flow

• Application server fetches and inserts ad into main page

• Synchronous/blocked loading

• Direct DOM access

• Cannot differentiate ad content from main content

• Best perceived user experience for premium ads in prominent positions

Web Browser

Application Server fetches applicationand ad content

HTML processed

Page rendered

User may now interact with page

Web1.0/2.0 Client-side Ad Flow

• Fetch ad after application has loaded

• Fine grained ad-rotation in Web2.0/AJAX pages

• Prioritizes user actions first

• Requires extra roundtrip

Client fetches and inserts ad content

Web Browser

Application Server fetches applicationcontent only

HTML processed

Page rendered

User may now interact with page

Web2.0 Ad Flow

• Client runtime ad strategy

• AD content is simply data

• AD content render occurs after initial page load/render

• Prioritizes user actions first

• Saves one roundtrip for client side ad fetch

Web Browser

Application Server fetches applicationand ad content

AD HTML transformed into data, emitted with page content

Page HTML processed (ADs not rendered)

Page rendered

JS process AD DATA, and emits sandbox

ADs rendered

User may interact with page

Strategy #3: Double buffering

1. Requires ad handling library to hook into events

2. Requires same ad position in same web2.0 “page view” to work

3. Load first ad into iframe

4. Load second ad into iframe underneath first iframe

5. When second ad is loaded, destroy the first iframe

6. Ad underneath gets shown, promote the second iframe z-index

Strategy #4: Control client execution and ad rotation1. Think in terms of order of execution

2. Complete all application rendering before fetching next ad

3. Requires double buffering to mask browser execution

Example – Message Read Flow Attempt #1

*Old AD still visible until new one arrives

Mail Inbox

Message Read

Fetch Message

Fetch AD ContentProcess Message

Message Rendered

Process AD Content

AD Rendered

Example – Message Read Flow Attempt #2

*Old AD still visible until new one arrives

Mail Inbox

Message Read

Fetch Message

Fetch AD ContentProcess Message

Message Rendered

Process AD Content

AD Rendered

Example – Message Read Flow Attempt #3

*Old AD still visible until new one arrives

Mail Inbox

Message Read

Fetch Message

Fetch AD ContentProcess Message

Message Rendered

Process AD Content

AD Rendered

Demo

Summary

Display advertising landscape is complex Measuring and monitoring ad performance is subtle Exercise defensive strategies to mitigate ad impact End user experience is qualitative

Thank you!

Questions?

Appendix

Web1.0 vs. Web2.0 Ad Impact

73% faster

37% faster

With Ads

With Ads

Without Ads

Without Ads

Old ad flow

No redirection Premium ads

Application ServerAd ServerCDN

Latency Total:

100 ms

2 ms

10 ms

100 ms

100 ms

50 ms

~464 ms

100 ms

2 ms

New ad flow

Application ServerAd ServerAd Exchange 1

Ad Exchange 2

CDN

Latency Total:

100 ms

2 ms

10 ms

100 ms300 ms

100 ms

~2214 ms

300 ms

300 ms

50 ms

300 ms

100 ms

150 ms

300 ms

2 ms

Multiple ad redirectionHighest bidderMost relevance

Sandbox library resources

• 2 ms or less of server time added to transform AD into DATA

• Adds 2 client-side HTTP requests at most

• 1 JavaScript file to build sandbox and receive calls from vendors

• 1 HTML file for the sandbox

• Typically makes 0 HTTP requests, as both JavaScript, and HTML files are cacheable

• Typically less than 50 ms of run time, client side impact in browser, due to best practices in JavaScript

AD HTML as DATA

<SCRIPT type="text/plain" _pos="LREC" _en="ISO-8859-1"><!-- Other meta-data attributes may be added -->

"<IFRAME SRC=\"http://ad.doubleclick.net/adi/N4912.153730.YAHOO.COM/B5177000.11; . . . \“ />” <!-- Original AD HTML above, JS safe string -->

</SCRIPT>

• Original AD HTML is transformed into new HTML

• Is a “data-island”• Not executed / rendered by browser

Metrics gathering• Ad library can be configured with a variety of “callback” functions

DARLA_CONFIG = { /* . . . Other config options here . . . */

onStartPosRender: function() { /* Log the time of an AD starting render process */ },

onFinishPosRender: function() { /* Log when an AD has finished rendering */ }}

• This level of detail was not available without library

• Allows properties to decide what info is important

Metrics gathering

• Such as an AD taking too long to be rendered

• JavaScript Errors found in ADs

• Or to track and report “bad” ADs

• Properties like Yahoo! Mail implement these callbacks to collect their own statistics

• AD Request Time

• AD Render Time

• Other data relevant to rendering• Was JavaScript used• Were IFRAMEs used• Was the EAS used• etc