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,288 views

My presentation from Disruptive Code

My presentation from Disruptive Code

Statistics

Views

Total Views
9,288
Slideshare-icon Views on SlideShare
9,176
Embed Views
112

Actions

Likes
11
Downloads
96
Comments
0

10 Embeds 112

http://www.lindqvist.com 98
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
    • 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
    • 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/