Our Site Performance <ul><li>Focusing on heart.co.uk </li></ul>
Performance Anxiety? <ul><li>Google Webmaster Tools for  heart.co.uk   </li></ul><ul><li>Average  5.0 second  load time (J...
Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time
Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Look up:  www.heart.co.uk </li></ul>...
Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Connect to 81.20.48.136 </li></ul>Be...
Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time GET / HTTP/1.1 Host: www.heart.co.uk User-Ag...
Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time Processing ...
Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time HTTP/1.1 200 OK Server: nginx Date: Wed, 11 ...
Typical Heart response DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Cached front page:  0.2s </li></ul><ul...
Understand the tools From Google's webmaster tools documentation: “ Page load time is the total time from the moment the u...
Understand the tools <ul><li>So the 5.0s figure relates to the whole page </li></ul><ul><li>Including: </li></ul><ul><ul><...
Firebug <ul><li>Firefox plugin </li></ul><ul><li>Loads of development functionality </li></ul><ul><li>Useful here to see H...
 
DNS lookup Connecting Sending Waiting Receiving
 
 
5 seconds!
Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time So how do we make individual requests faster?
Speeding up a DNS request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Improve cacheability </li></ul><ul>...
The Internet Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk NYIIX
Anycast DNS Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk EasyDNS EasyDNS NYIIX 64.68.192.0...
Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Connect to 81.20.48.136 </li></ul>B...
Speeding up a web request Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk NYIIX
Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time GET / HTTP/1.1 Host: www.heart.co.uk User-A...
Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time Processing ...
Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Check the cache </li></ul><ul><li>P...
Speeding up a web response DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Return compressed content </li></u...
Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time Make fewer requests per page!
Concurrent Connections Browser Statistics stats from browserscope.org Browser Max connections per hostname Opera 10 7 Fire...
Concurrent Connections Browser Statistics stats from browserscope.org Browser Max connections (total) Opera 10 29 Firefox ...
Optimising F/E Performance <ul><li>Writing clean, performant code </li></ul><ul><li>Compressing </li></ul><ul><li>Reducing...
<ul><li>Rounded corners in the olden days </li></ul>Optimising F/E Performance <div id=”box”> <span class=”top-left”></spa...
<ul><li>Rounded corners in the olden days </li></ul>Optimising F/E Performance div#box span.top-left, div#box span.top-rig...
<ul><li>Rounded corners in the future - NOW! </li></ul>Optimising F/E Performance <div id=”box”> This is a box </div> div#...
<ul><li>Rounded corners in the future - NOW! </li></ul>Optimising F/E Performance
<ul><li>More CSS3 goodness </li></ul>Optimising F/E Performance button { border: 1px solid #535353; border-radius: 5px; ba...
<ul><li>Site comparison </li></ul>Simplified Markup Site HTML Content %age Absolute 26,174 4,387 16.76 Heart 41,859 6,721 ...
Reducing HTTP Requests <ul><li>Concatenated files </li></ul><ul><li>CSS Image Maps </li></ul><ul><li>Single CSS files for ...
Concatenated Files <script src=&quot; locator.js &quot; type=&quot;text/javascript&quot; ></script> <script src=&quot; bbc...
Concatenated Files <script src=&quot; gusto.js &quot; type=&quot;text/javascript&quot; ></script> <script src=&quot; jquer...
Concatenated Files <link rel=&quot;stylesheet&quot; href=&quot;hp.css&quot;> <!--[if IE]> <link rel=&quot;stylesheet&quot;...
Concatenated Files <!--[if !IE]><!--> <link rel=&quot;stylesheet&quot; href=&quot; heart-minified.css &quot; media=&quot;s...
Concatenated Files <ul><li>CSS Sprites </li></ul>
Concatenated Files <ul><li>CSS Sprites </li></ul>
Concatenated Files <ul><li>Site comparison </li></ul>Site JS CSS Img Total Digital Spy 3 1 7 11 Heart 2 1 8 11 Absolute 6 ...
Compressed Files .article p {  line-height: 150%;  font-size: 93%; } .article ul,.article ol { font-size: 13px; } .article...
Compressed Files .article p{line-height:150%;font-size:93%}.article ul,.article ol{font-size:13px}.article ul li,.article ...
Adverts <ul><li>Ad calls are always unique - there’s no caching (either server side or client-side) </li></ul><ul><li>File...
Ads - you broke my Heart Product # of ad calls Players 1 Xfm 4 Galaxy 4 CapitalFM 5 Classic FM 6 Trent FM 8 Heart 12
Slow Ads Are Slow test heart.co.uk heart, no ads just ads 1 4.099 2.451 4.078 2 3.688 2.315 1.915 3 4.329 2.24 2.212 4 5.4...
Upcoming SlideShare
Loading in …5
×

Web performance - Analysing Heart.co.uk

1,407 views

Published on

Performance presentation given to our in-house interactive team on website performance, taking heart.co.uk as an example... Presentation delivered by Jon Topper and Gareth Senior

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

  • Be the first to like this

No Downloads
Views
Total views
1,407
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web performance - Analysing Heart.co.uk

  1. 1. Our Site Performance <ul><li>Focusing on heart.co.uk </li></ul>
  2. 2. Performance Anxiety? <ul><li>Google Webmaster Tools for heart.co.uk </li></ul><ul><li>Average 5.0 second load time (July 30 th 2010) </li></ul><ul><li>Slower than 75% of sites </li></ul>
  3. 3. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time
  4. 4. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Look up: www.heart.co.uk </li></ul><ul><li>Get back: 81.20.48.136 </li></ul>
  5. 5. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Connect to 81.20.48.136 </li></ul>Be Internet LINX Global
  6. 6. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time GET / HTTP/1.1 Host: www.heart.co.uk User-Agent: Mozilla/5.0 .... Accept: text/html,... Accept-Language: en-gb,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Cache-Control: max-age=0
  7. 7. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time Processing ...
  8. 8. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time HTTP/1.1 200 OK Server: nginx Date: Wed, 11 Aug 2010 19:07:07 GMT Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Keep-Alive: timeout=5 Vary: Accept-Encoding Vary: Cookie Content-Encoding: gzip ...
  9. 9. Typical Heart response DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Cached front page: 0.2s </li></ul><ul><li>Uncached front page: 2.0s </li></ul><ul><li>So why do we see 5.0s on average ? </li></ul>
  10. 10. Understand the tools From Google's webmaster tools documentation: “ Page load time is the total time from the moment the user clicks on a link to your page until the time the entire page is loaded and displayed in a browser. It is collected directly from users who have installed the Google Toolbar and have enabled the optional PageRank feature.”
  11. 11. Understand the tools <ul><li>So the 5.0s figure relates to the whole page </li></ul><ul><li>Including: </li></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Adverts </li></ul></ul><ul><ul><li>onLoad activities </li></ul></ul><ul><li>So what's taking up the most time? </li></ul>
  12. 12. Firebug <ul><li>Firefox plugin </li></ul><ul><li>Loads of development functionality </li></ul><ul><li>Useful here to see HTTP request stream </li></ul>
  13. 14. DNS lookup Connecting Sending Waiting Receiving
  14. 17. 5 seconds!
  15. 18. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time So how do we make individual requests faster?
  16. 19. Speeding up a DNS request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Improve cacheability </li></ul><ul><li>Provide more “local” DNS </li></ul>
  17. 20. The Internet Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk NYIIX
  18. 21. Anycast DNS Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk EasyDNS EasyDNS NYIIX 64.68.192.0/20 64.68.192.0/20
  19. 22. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Connect to 81.20.48.136 </li></ul>Be Internet LINX Global
  20. 23. Speeding up a web request Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk NYIIX
  21. 24. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time GET / HTTP/1.1 Host: www.heart.co.uk User-Agent: Mozilla/5.0 .... Accept: text/html,... Accept-Language: en-gb,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Cache-Control: max-age=0
  22. 25. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time Processing ...
  23. 26. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Check the cache </li></ul><ul><li>Parse the URL, dispatch to handler </li></ul><ul><li>Database queries </li></ul><ul><li>Database queries </li></ul><ul><li>Database queries </li></ul><ul><li>Application processing </li></ul><ul><li>Generate page content </li></ul>
  24. 27. Speeding up a web response DNS lookup Connecting Sending Waiting Receiving Time <ul><li>Return compressed content </li></ul><ul><li>Return cache control headers </li></ul>
  25. 28. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time Make fewer requests per page!
  26. 29. Concurrent Connections Browser Statistics stats from browserscope.org Browser Max connections per hostname Opera 10 7 Firefox 3 6 Google Chrome 4 6 Safari 4 6 iPad 4 6 iPhone 4 4 Android 4 Internet Explorer 7 2
  27. 30. Concurrent Connections Browser Statistics stats from browserscope.org Browser Max connections (total) Opera 10 29 Firefox 3 30 Google Chrome 4 52 Safari 4 60 iPad 4 30 iPhone 4 30 Android 4 Internet Explorer 7 60
  28. 31. Optimising F/E Performance <ul><li>Writing clean, performant code </li></ul><ul><li>Compressing </li></ul><ul><li>Reducing the size of files we push down the wire </li></ul><ul><li>Reducing the number of things we push down the wire </li></ul>
  29. 32. <ul><li>Rounded corners in the olden days </li></ul>Optimising F/E Performance <div id=”box”> <span class=”top-left”></span> <span class=”top-right”></span> This is a box <span class=”btm-left”></span> <span class=”btm-right”></span> </div>
  30. 33. <ul><li>Rounded corners in the olden days </li></ul>Optimising F/E Performance div#box span.top-left, div#box span.top-right, div#box span.btm-left, div#box span.btm-right, { position:absolute; top:0; left:0; background-image:url(rounded-corners.png); } div#box span.top-right { left:auto; right:0; background-position:top right; } div#box span.btm-left { top:auto; bottom:0; background-position:bottom left; } div#box span.btm-right { top:auto; bottom:0; left:auto; right:auto; background-position:bottom right; }
  31. 34. <ul><li>Rounded corners in the future - NOW! </li></ul>Optimising F/E Performance <div id=”box”> This is a box </div> div#box { border-radius:2px; }
  32. 35. <ul><li>Rounded corners in the future - NOW! </li></ul>Optimising F/E Performance
  33. 36. <ul><li>More CSS3 goodness </li></ul>Optimising F/E Performance button { border: 1px solid #535353; border-radius: 5px; background-image: gradient( linear, left top, left bottom, color-stop(0.3, rgb(186,186,186)), color-stop(0.62, rgb(149,149,149)), color-stop(0.98, rgb(135,135,135)) ); } <ul><li>Also in CSS3 - embedded fonts, opacity, drop-shadows, multiple backgrounds... </li></ul>
  34. 37. <ul><li>Site comparison </li></ul>Simplified Markup Site HTML Content %age Absolute 26,174 4,387 16.76 Heart 41,859 6,721 16.05 BBC Entertainment 49,803 6,066 12.18 Digital Spy 67,687 7,480 11.05 KISS100 57,659 4,063 0.07 Trent FM 48,404 2,822 0.06
  35. 38. Reducing HTTP Requests <ul><li>Concatenated files </li></ul><ul><li>CSS Image Maps </li></ul><ul><li>Single CSS files for each browser </li></ul>
  36. 39. Concatenated Files <script src=&quot; locator.js &quot; type=&quot;text/javascript&quot; ></script> <script src=&quot; bbc_fmtj.j s &quot; type=&quot;te xt/javascript&quot; ></script> <script src=&quot; bbc_fmtj_common.js &quot; t ype=&quot;text/javascri pt&quot; ></script> <script src=&quot; bbc_fmtj_config.js &quot; type=&quot;text/javascri pt&quot; ></script> <scr ipt src=&quot; config.sjson &quot; type=&quot;text/javascript&quot; ></script> <ul><li>bbc.co.uk/entertainment html source features multiple script includes </li></ul>
  37. 40. Concatenated Files <script src=&quot; gusto.js &quot; type=&quot;text/javascript&quot; ></script> <script src=&quot; jquery.j s &quot; type=&quot; text/javascript&quot; ></script> <script src=&quot; form_validation.j s &quot; type=&quot;text/java script&quot; ></script> <script src=&quot; cookies.js &quot; type=&quot;text/javascript&quot; ></script> <script src=&quot;megamod.js&quot; type=&quot;text/javascript&quot; ></script> <script src=&quot;login_lightbox.js&quot; type=&quot;text/javascript&quot; ></script> <ul><li>Heart.co.uk in DEVELOPMENT (28 files) </li></ul><script src=&quot; heart_minified.js &quot; type=&quot;text/javascript&quot; ></script> <ul><li>Heart.co.uk LIVE (1 file) </li></ul>
  38. 41. Concatenated Files <link rel=&quot;stylesheet&quot; href=&quot;hp.css&quot;> <!--[if IE]> <link rel=&quot;stylesheet&quot; href=&quot;hp_iehacks.css&quot;> <![endif]--> <ul><li>CSS in conditional comments (Absolute) </li></ul><ul><li>One CSS for all browsers </li></ul><ul><li>Another CSS file for IE </li></ul>
  39. 42. Concatenated Files <!--[if !IE]><!--> <link rel=&quot;stylesheet&quot; href=&quot; heart-minified.css &quot; media=&quot;screen&quot; type=&quot;text/css&quot;> <!--<![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; href=&quot; combined/ie6-minif ied.css &quot; media=&quot;screen&quot; t ype=&quot;text/css&quot;> <![endif]--> <!--[if IE 7]> <link rel=&quot;stylesheet&quot; href=&quot; ie7-minified.css &quot; media=&quot;screen&quot; type=&quot;text /css&quot;> <![endif]- -> <!--[if gt IE 7]> <link rel=&quot;stylesheet&quot; href=&quot; e8-minified.css &quot; media=&quot;screen&quot; type=&quot;text/css&quot;> <![endif]-- > <ul><li>CSS in conditional comments (Heart) </li></ul>
  40. 43. Concatenated Files <ul><li>CSS Sprites </li></ul>
  41. 44. Concatenated Files <ul><li>CSS Sprites </li></ul>
  42. 45. Concatenated Files <ul><li>Site comparison </li></ul>Site JS CSS Img Total Digital Spy 3 1 7 11 Heart 2 1 8 11 Absolute 6 1 (2) 23 30 (31) Trent FM 9 3 24 36 BBC Ents 13 9 (10) 18 40 (41) KISS100 20 (22) 9 (16/10) 13 42 (51/43)
  43. 46. Compressed Files .article p { line-height: 150%; font-size: 93%; } .article ul,.article ol { font-size: 13px; } .article ul li,.article ol li { font-size: 93%; } .article .byline{ font-size: 93%; /* 12px */ margin-bottom: 1em; } <ul><li>Heart CSS in dev = easy to read, developer friendly </li></ul>
  44. 47. Compressed Files .article p{line-height:150%;font-size:93%}.article ul,.article ol{font-size:13px}.article ul li,.article ol li{font-size:93%}.article .byline{font-size:93%;margin-bottom:1em}.article .byline .date{margin-right:1.66em}.article .byline .comments a{display:inline}.article .byline .has_date{margin-left:1.5em}.article .related_content{float:right;width:244px;margin-left:12px}.article .related_content img{margin-bottom:12px}.article .related_links{width:242px;margin-bottom:1em} <ul><li>Heart CSS in Live - compressed to the max </li></ul><ul><li>Compressing CSS saves 28kb </li></ul><ul><li>Compressing JS saves 40k </li></ul>
  45. 48. Adverts <ul><li>Ad calls are always unique - there’s no caching (either server side or client-side) </li></ul><ul><li>Files are not compressed </li></ul><ul><li>Files often chain requests (1 ad can be more than 6 http requests, this also means multiple DNS lookups) </li></ul><ul><li>Duplicate code </li></ul>
  46. 49. Ads - you broke my Heart Product # of ad calls Players 1 Xfm 4 Galaxy 4 CapitalFM 5 Classic FM 6 Trent FM 8 Heart 12
  47. 50. Slow Ads Are Slow test heart.co.uk heart, no ads just ads 1 4.099 2.451 4.078 2 3.688 2.315 1.915 3 4.329 2.24 2.212 4 5.413 3.063 3.038 5 4.879 2.195 1.989 6 4.21 2.347 2.194 7 5.283 2.14 1.985 8 5.129 2.613 2.505 9 4.105 2.147 2.089 10 5.689 2.225 2.16 av 4.68 2.37 2.417

×