My presentation from Disruptive Code

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

4. WEB PERFORMANCE
OPTIMIZATION

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

7. WHEN THAT DOESN'T
HELP?

8. ADS

9. ADS = Copyrighted image of
Jimmie Åkesson ?

10. ADS = Copyrighted image of
Fredrik Reinfeldt ?

11. IFRAMES OR JAVASCRIPT

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

15. <script src="http://a.."></script>

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>

18. <script src="http://a.."></script>

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>

27. http://www.webpagetest.org/

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/

34. http://browserscope.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/

50. Minimize number of
iframes?

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?

64. THE FUTURE?
<frag>

65. THE FUTURE?
<frag>
postMessage(...)

66. THE FUTURE?
<frag>
postMessage(...)
ASWIFT?

67. THE FUTURE?
<frag>
postMessage(...)
ASWIFT?
Something completely different

68. TEST AND MEASURE!

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%

76. DON'T TRUST THE
EXPERTS

77. DON'T TRUST THE
EXPERTS
(dont' trust me)

78. MEASURE
EVERYTHING!

79. Tobias Järlund
tobias.jarlund@aftonbladet.se
@jarlund
http://blogg.aftonbladet.se/dev/