High Performance Web Sites, With Ads: Don't let third parties make you slow
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 9,509 views

My presentation from Disruptive Code

My presentation from Disruptive Code

Statistics

Views

Total Views
9,509
Views on SlideShare
9,396
Embed Views
113

Actions

Likes
12
Downloads
96
Comments
0

10 Embeds 113

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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 Presentation Transcript

  • 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 View slide
  • 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 View slide
  • 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
  • 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
  • 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
  • <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 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”
  • ”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%
  • 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ärlund tobias.jarlund@aftonbladet.se @jarlund http://blogg.aftonbladet.se/dev/