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