HIGH PERFORMANCE
WEB SITES, WITH ADS
– Don't let third parties make you slow


Tobias Järlund
tobias.jarlund@aftonbladet.s...
Aftonbladet.se

 ”The primary news source of the Swedish people”
  The largest website in Sweden
  5.6 million visitors/we...
WEB PERFORMANCE
OPTIMIZATION
THE USUAL STUFF
-Make Fewer HTTP Requests                  -Reduce the Number of DOM Elements
-Use a Content Delivery Netw...
THE USUAL STUFF
-Make Fewer HTTP Requests                  -Reduce the Number of DOM Elements
-Use a Content Delivery Netw...
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...
IFRAMES OR JAVASCRIPT
-May load in parallel    -Full access to the DOM
-Possible to late-load   -Supports all types of ads...
IFRAMES OR JAVASCRIPT
-May load in parallel    -Full access to the DOM
-Possible to late-load   -Supports all types of ads...
<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....
<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.."></s...
<script src="http://a.."></script>
    document.write('<script src="http://b.."></script>');

<script src="http://b.."></s...
<script src="http://a.."></script>
    document.write('<script src="http://b.."></script>');

<script src="http://b.."></s...
<script src="http://a.."></script>
    document.write('<script src="http://b.."></script>');

<script src="http://b.."></s...
<script src="http://a.."></script>
    document.write('<script src="http://b.."></script>');

<script src="http://b.."></s...
<script src="http://a.."></script>
    document.write('<script src="http://b.."></script>');

<script src="http://b.."></s...
<script src="http://a.."></script>
    document.write('<script src="http://b.."></script>');

<script src="http://b.."></s...
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




             ...
HTML page   Ad network 1           Ad network 2

                                              Actual ad




             ...
HTML page        Ad network 1           Ad network 2

                                                   Actual ad




   ...
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...
FRIENDLY IFRAME
-May load in parallel
-Possible to late-load
-Browser sandbox
-Full access to the DOM
-Supports all types ...
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 ifra...
3 Inside element withcreateadaurl
  script
         the iframe,
                      the
   as the source.

   Load the a...
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/vie...
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/
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

10,728

Published on

My presentation from Disruptive Code

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,728
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
112
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×