High Performance Web Sites, With Ads: Don't let third parties make you slow

HIGH PERFORMANCE WEB SITES, WITH ADS – Don't let third parties make you slow Tobias Järlund tobias.jarlund@aftonbladet.se @jarlund

Aftonbladet.se ”The primary news source of the Swedish people” The largest website in Sweden 5.6 million visitors/week, 2.4 million visitors/day Loooong pages, with a lot of ad positions

WEB PERFORMANCE OPTIMIZATION

THE USUAL STUFF -Make Fewer HTTP Requests -Reduce the Number of DOM Elements -Use a Content Delivery Network (CDN) -Split Components Across Domains -Add Expires or Cache-Control Header -Minimize Number of Iframes -Gzip Components -Avoid 404s -Put Stylesheets at Top -Reduce Cookie Size -Put Scripts at Bottom -Use Cookie-Free Domains for Components -Avoid CSS Expressions -Minimize DOM Access -Make JavaScript and CSS External -Develop Smart Event Handlers -Reduce DNS Lookups -Choose <link> Over @import -Minify JavaScript and CSS -Avoid Filters -Avoid Redirects -Optimize Images -Remove Duplicate Scripts -Optimize CSS Sprites -Configure ETags -Do Not Scale Images in HTML -Make Ajax Cacheable -Make favicon.ico Small and Cacheable -Flush Buffer Early -Keep Components Under 25 KB -Use GET for Ajax Requests -Pack Components Into a Multipart -Postload Components Document -Preload Components -Avoid Empty Image src http://developer.yahoo.com/performance/rules.html

WHEN THAT DOESN'T HELP?

ADS = Copyrighted image of Jimmie Åkesson ?

ADS = Copyrighted image of Fredrik 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 -Full access to the DOM -Possible to late-load -Supports all types of ads -Browser sandbox -Blocks rendering/download -Fixed width/height -Not possible to late-load -Adds overhead -Full access to the DOM -No access to the DOM

http://www.webpagetest.org/

HTML page http://www.webpagetest.org/

HTML page Ad network 1 http://www.webpagetest.org/

HTML page Ad network 1 Ad network 2 http://www.webpagetest.org/

HTML page Ad network 1 Ad network 2 Actual ad http://www.webpagetest.org/

HTML page Ad network 1 Ad network 2 Actual ad Rest of the page http://www.webpagetest.org/

HTML page Ad network 1 Ad network 2 Actual ad Page rendering blocked by ad Rest of the page http://www.webpagetest.org/

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 -Full access to the DOM -Possible to late-load -Supports all types of ads -Browser sandbox -Blocks rendering/download -Fixed width/height -Not possible to late-load -Adds overhead -Full access to the DOM -No 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

1 Create an iframe. Set the source to a small static html page from the same domain.

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

3 Inside element withcreateadaurl script the iframe, the as the source. Load the ad just like a normal JavaScript ad.

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

Video of Aftonbladet.se loaded with and without Friendly Iframes http://mittklipp.aftonbladet.se/app/viewMovie.action?id=36013 http://www.webpagetest.org/

Minimize number of iframes?

”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

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

TWEAKS Don't load all ads at once. Use queues or delays. Set default sizes.

TWEAKS Don't load all ads at once. Use queues or delays. Set default sizes. Try not to block onload.

”BONUS” FEATURES

”BONUS” FEATURES Ads may depend on other resources without blocking.

”BONUS” FEATURES Ads 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%

http://www.lindqvist.com	85
http://www.slideshare.net	2
http://jarlund.se	2
http://translate.googleusercontent.com	2
http://www.linkedin.com	2
http://www.jarlund.se	1
http://paper.li	1
http://a0.twimg.com	1
http://www.scoop.it	1

High Performance Web Sites, With Ads: Don't let third parties make you slow

by Tobias Järlund on Sep 22, 2010

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 97

Statistics

High Performance Web Sites, With Ads: Don’t let third parties make you slow Presentation Transcript