Successfully reported this slideshow.

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

19

Share

Upcoming SlideShare
Thats Not Flash?
Thats Not Flash?
Loading in …3
×
1 of 79
1 of 79

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

  1. 1. HIGH PERFORMANCE WEB SITES, WITH ADS – Don't let third parties make you slow Tobias Järlund tobias.jarlund@aftonbladet.se @jarlund
  2. 2. 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
  3. 3. WEB PERFORMANCE OPTIMIZATION
  4. 4. 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
  5. 5. 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
  6. 6. WHEN THAT DOESN'T HELP?
  7. 7. ADS
  8. 8. ADS = Copyrighted image of Jimmie Åkesson ?
  9. 9. ADS = Copyrighted image of Fredrik Reinfeldt ?
  10. 10. IFRAMES OR JAVASCRIPT
  11. 11. IFRAMES OR JAVASCRIPT -May load in parallel -Possible to late-load -Browser sandbox -Fixed width/height -Adds overhead -No access to the DOM
  12. 12. 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
  13. 13. 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
  14. 14. <script src="http://a.."></script>
  15. 15. <script src="http://a.."></script> document.write('<img src="http://example.com/ad.gif">');
  16. 16. <script src="http://a.."></script> document.write('<img src="http://example.com/ad.gif">'); <img src="http://example.com/ad.gif>
  17. 17. <script src="http://a.."></script>
  18. 18. <script src="http://a.."></script> document.write('<script src="http://b.."></script>');
  19. 19. <script src="http://a.."></script> document.write('<script src="http://b.."></script>'); <script src="http://b.."></script>
  20. 20. <script src="http://a.."></script> document.write('<script src="http://b.."></script>'); <script src="http://b.."></script> document.write('<script src="http://c.."></script>');
  21. 21. <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>
  22. 22. <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>');
  23. 23. <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>
  24. 24. <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">');
  25. 25. <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>
  26. 26. http://www.webpagetest.org/
  27. 27. HTML page http://www.webpagetest.org/
  28. 28. HTML page Ad network 1 http://www.webpagetest.org/
  29. 29. HTML page Ad network 1 Ad network 2 http://www.webpagetest.org/
  30. 30. HTML page Ad network 1 Ad network 2 Actual ad http://www.webpagetest.org/
  31. 31. HTML page Ad network 1 Ad network 2 Actual ad Rest of the page http://www.webpagetest.org/
  32. 32. HTML page Ad network 1 Ad network 2 Actual ad Page rendering blocked by ad Rest of the page http://www.webpagetest.org/
  33. 33. http://browserscope.org/
  34. 34. IS THERE A BETTER SOLUTION?
  35. 35. I GOOGLED THE NET
  36. 36. 16 TECHNIQUES
  37. 37. 16 TECHNIQUES 14 BROKEN
  38. 38. 16 TECHNIQUES 14 BROKEN 1 NOT SUITABLE
  39. 39. FRIENDLY IFRAME
  40. 40. Best Practices for Rich Media Ads in Asynchronous Ad Environments http://www.iab.net/ajaxrichmedia
  41. 41. FRIENDLY IFRAME
  42. 42. 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
  43. 43. FRIENDLY IFRAME -May load in parallel -Possible to late-load -Browser sandbox -Full access to the DOM -Supports all types of ads
  44. 44. 1 Create an iframe. Set the source to a small static html page from the same domain.
  45. 45. 2 Inside the iframe, set the = JavaScript variable inDapIF true to tell the ad it is loaded inside a friendly iframe.
  46. 46. 3 Inside element withcreateadaurl script the iframe, the as the source. Load the ad just like a normal JavaScript ad.
  47. 47. 4 When theresize the iframe to fit loading, ad has finished the dimensions of the ad.
  48. 48. Video of Aftonbladet.se loaded with and without Friendly Iframes http://mittklipp.aftonbladet.se/app/viewMovie.action?id=36013 http://www.webpagetest.org/
  49. 49. Minimize number of iframes?
  50. 50. ”Using iframes is the best option today”
  51. 51. ”Using iframes is the best option today”
  52. 52. ”Using iframes is the best option today” (not that it is a great solution)
  53. 53. ”Using iframes is the best option today”
  54. 54. ”Using iframes is the best option today” (hopefully not forever)
  55. 55. TWEAKS
  56. 56. TWEAKS Don't load all ads at once. Use queues or delays.
  57. 57. TWEAKS Don't load all ads at once. Use queues or delays. Set default sizes.
  58. 58. TWEAKS Don't load all ads at once. Use queues or delays. Set default sizes. Try not to block onload.
  59. 59. ”BONUS” FEATURES
  60. 60. ”BONUS” FEATURES Ads may depend on other resources without blocking.
  61. 61. ”BONUS” FEATURES Ads may depend on other resources without blocking. It is easy to reload ads.
  62. 62. THE FUTURE?
  63. 63. THE FUTURE? <frag>
  64. 64. THE FUTURE? <frag> postMessage(...)
  65. 65. THE FUTURE? <frag> postMessage(...) ASWIFT?
  66. 66. THE FUTURE? <frag> postMessage(...) ASWIFT? Something completely different
  67. 67. TEST AND MEASURE!
  68. 68. TEST AND MEASURE! Tested through A/B testing during several months
  69. 69. FRONT PAGE
  70. 70. FRONT PAGE VISITS/WEEK +7%
  71. 71. FRONT PAGE VISITS/WEEK +7% PAGEVIEWS/VISIT +16%
  72. 72. LATEST NEWS
  73. 73. LATEST NEWS +35%
  74. 74. AVERAGE PAGE LOAD TIME -30%
  75. 75. DON'T TRUST THE EXPERTS
  76. 76. DON'T TRUST THE EXPERTS (dont' trust me)
  77. 77. MEASURE EVERYTHING!
  78. 78. Tobias Järlund tobias.jarlund@aftonbladet.se @jarlund http://blogg.aftonbladet.se/dev/

×