HIGH PERFORMANCE WEB SITES, WITH ADS– Don't let third parties make you slow

Tobias Järlundtobias.jarlund@aftonbladet.se@jarlund

Aftonbladet.se

”The primary news source of the Swedish people”

The largest website in Sweden5.6 million visitors/week, 2.4 million visitors/day

Loooong pages, with a lot of ad positions

WEB PERFORMANCEOPTIMIZATION

THE USUAL STUFF-Make Fewer HTTP Requests-Use a Content Delivery Network (CDN)-Add Expires or Cache-Control Header-Gzip Components-Put Stylesheets at Top-Put Scripts at Bottom-Avoid CSS Expressions-Make JavaScript and CSS External-Reduce DNS Lookups-Minify JavaScript and CSS-Avoid Redirects-Remove Duplicate Scripts-Configure ETags-Make Ajax Cacheable-Flush Buffer Early-Use GET for Ajax Requests-Postload Components-Preload Components

-Reduce the Number of DOM Elements-Split Components Across Domains-Minimize Number of Iframes-Avoid 404s-Reduce Cookie Size-Use Cookie-Free Domains for Components-Minimize DOM Access-Develop Smart Event Handlers-Choose <link> Over @import-Avoid Filters-Optimize Images-Optimize CSS Sprites-Do Not Scale Images in HTML-Make favicon.ico Small and Cacheable-Keep Components Under 25 KB-Pack Components Into a Multipart Document-Avoid Empty Image src

http://developer.yahoo.com/performance/rules.html

THE USUAL STUFF-Make Fewer HTTP Requests-Use a Content Delivery Network (CDN)-Add Expires or Cache-Control Header-Gzip Components-Put Stylesheets at Top-Put Scripts at Bottom-Avoid CSS Expressions-Make JavaScript and CSS External-Reduce DNS Lookups-Minify JavaScript and CSS-Avoid Redirects-Remove Duplicate Scripts-Configure ETags-Make Ajax Cacheable-Flush Buffer Early-Use GET for Ajax Requests-Postload Components-Preload Components

-Reduce the Number of DOM Elements-Split Components Across Domains-Minimize Number of Iframes-Avoid 404s-Reduce Cookie Size-Use Cookie-Free Domains for Components-Minimize DOM Access-Develop Smart Event Handlers-Choose <link> Over @import-Avoid Filters-Optimize Images-Optimize CSS Sprites-Do Not Scale Images in HTML-Make favicon.ico Small and Cacheable-Keep Components Under 25 KB-Pack Components Into a Multipart Document-Avoid Empty Image src

http://developer.yahoo.com/performance/rules.html

WHEN THAT DOESN'T HELP?

ADS

ADS = ?Copyrighted image ofJimmie Åkesson

ADS = ?Copyrighted image ofFredrik Reinfeldt

IFRAMES OR JAVASCRIPT

IFRAMES OR JAVASCRIPT-May load in parallel-Possible to late-load-Browser sandbox-Fixed width/height-Adds overhead-No access to the DOM

IFRAMES OR JAVASCRIPT-May load in parallel-Possible to late-load-Browser sandbox-Fixed width/height-Adds overhead-No access to the DOM

-Full access to the DOM-Supports all types of ads-Blocks rendering/download-Not possible to late-load-Full access to the DOM

IFRAMES OR JAVASCRIPT-May load in parallel-Possible to late-load-Browser sandbox-Fixed width/height-Adds overhead-No access to the DOM

-Full access to the DOM-Supports all types of ads-Blocks rendering/download-Not possible to late-load-Full access to the DOM

-Supports all types of ads

<script src="http://a.."></script>

<script src="http://a.."></script>document.write('<img src="http://example.com/ad.gif">');

<script src="http://a.."></script>document.write('<img src="http://example.com/ad.gif">');

<img src="http://example.com/ad.gif>

<script src="http://a.."></script>

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>document.write('<script src="http://c.."></script>');

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>document.write('<script src="http://c.."></script>');

<script src="http://c.."></script>

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>document.write('<script src="http://c.."></script>');

<script src="http://c.."></script>document.write('<script src="http://d.."></script>');

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>document.write('<script src="http://c.."></script>');

<script src="http://c.."></script>document.write('<script src="http://d.."></script>');

<script src="http://d.."></script>

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>document.write('<script src="http://c.."></script>');

<script src="http://c.."></script>document.write('<script src="http://d.."></script>');

<script src="http://d.."></script>document.write('<img src="http://example.com/ad.gif">');

<script src="http://a.."></script>document.write('<script src="http://b.."></script>');

<script src="http://b.."></script>document.write('<script src="http://c.."></script>');

<script src="http://c.."></script>document.write('<script src="http://d.."></script>');

<script src="http://d.."></script>document.write('<img src="http://example.com/ad.gif">');

<img src="http://example.com/ad.gif>

http://www.webpagetest.org/

HTML page

http://www.webpagetest.org/

HTML page

http://www.webpagetest.org/

Ad network 1

HTML page

http://www.webpagetest.org/

Ad network 1 Ad network 2

HTML page

http://www.webpagetest.org/

Ad network 1 Ad network 2

Actual ad

HTML page

http://www.webpagetest.org/

Ad network 1 Ad network 2

Actual ad

Rest of the page

HTML page

http://www.webpagetest.org/

Ad network 1 Ad network 2

Actual ad

Rest of the page

Page rendering blocked by ad

http://browserscope.org/

IS THERE A BETTER SOLUTION?

I GOOGLED THE NET

16 TECHNIQUES

16 TECHNIQUES

14 BROKEN

16 TECHNIQUES

14 BROKEN

1 NOT SUITABLE

FRIENDLY IFRAME

Best Practices for Rich Media Ads in Asynchronous Ad Environments

http://www.iab.net/ajaxrichmedia

FRIENDLY IFRAME

IFRAMES OR JAVASCRIPT-May load in parallel-Possible to late-load-Browser sandbox-Fixed width/height-Adds overhead-No access to the DOM

-Full access to the DOM-Supports all types of ads-Blocks rendering/download-Not possible to late-load-Full access to the DOM

FRIENDLY IFRAME-May load in parallel-Possible to late-load-Browser sandbox-Full access to the DOM-Supports all types of ads

Create an iframe.

Set the source to a small static html page from the same domain.

1

Inside the iframe, set the JavaScript variable inDapIF = true to tell the ad it is loaded inside a friendly iframe.

2

Inside the iframe, create a script element with the ad url as the source.

Load the ad just like a normal JavaScript ad.

3

When the ad has finished loading, resize the iframe to fit the dimensions of the ad.

4

http://www.webpagetest.org/

Video of Aftonbladet.se loaded with and without Friendly Iframes

http://mittklipp.aftonbladet.se/app/viewMovie.action?id=36013

Minimize number of iframes?

”Using iframes is the best option today”

”Using iframes is the best option today”

”Using iframes is the best option today”

(not that it is a great solution)

”Using iframes is the best option today”

”Using iframes is the best option today”

(hopefully not forever)

TWEAKS

TWEAKSDon't load all ads at once. Use queues or delays.

TWEAKSDon't load all ads at once. Use queues or delays.

Set default sizes.

TWEAKSDon't load all ads at once. Use queues or delays.

Set default sizes.

Try not to block onload.

”BONUS” FEATURES

”BONUS” FEATURESAds may depend on other resources without blocking.

”BONUS” FEATURESAds may depend on other resources without blocking.

It is easy to reload ads.

THE FUTURE?

THE FUTURE?<frag>

THE FUTURE?<frag>

postMessage(...)

THE FUTURE?<frag>

postMessage(...)

ASWIFT?

THE FUTURE?<frag>

postMessage(...)

ASWIFT?

Something completely different

TEST AND MEASURE!

TEST AND MEASURE!

Tested through A/B testing during several months

FRONT PAGE

FRONT PAGE

VISITS/WEEK +7%

FRONT PAGE

VISITS/WEEK +7%PAGEVIEWS/VISIT +16%

LATEST NEWS

LATEST NEWS

+35%

AVERAGE PAGE LOAD TIME

-30%

DON'T TRUST THE EXPERTS

DON'T TRUST THE EXPERTS

(dont' trust me)

MEASURE EVERYTHING!

Tobias Järlundtobias.jarlund@aftonbladet.se@jarlundhttp://blogg.aftonbladet.se/dev/