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

  • 10,156 views
Uploaded on

My presentation from Disruptive Code

My presentation from Disruptive Code

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,156
On Slideshare
10,043
From Embeds
113
Number of Embeds
10

Actions

Shares
Downloads
99
Comments
0
Likes
12

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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/