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

Like this? Share it with your network

Share

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

on

  • 9,668 views

My presentation from Disruptive Code

My presentation from Disruptive Code

Statistics

Views

Total Views
9,668
Views on SlideShare
9,555
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 Presentation Transcript

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