Web performance - Analysing Heart.co.uk
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web performance - Analysing Heart.co.uk

on

  • 1,534 views

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

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

Statistics

Views

Total Views
1,534
Views on SlideShare
1,534
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web performance - Analysing Heart.co.uk Presentation Transcript

  • 1. Our Site Performance
    • Focusing on heart.co.uk
  • 2. Performance Anxiety?
    • Google Webmaster Tools for heart.co.uk
    • Average 5.0 second load time (July 30 th 2010)
    • Slower than 75% of sites
  • 3. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time
  • 4. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time
    • Look up: www.heart.co.uk
    • Get back: 81.20.48.136
  • 5. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time
    • Connect to 81.20.48.136
    Be Internet LINX Global
  • 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. Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time Processing ...
  • 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. Typical Heart response DNS lookup Connecting Sending Waiting Receiving Time
    • Cached front page: 0.2s
    • Uncached front page: 2.0s
    • So why do we see 5.0s on average ?
  • 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. Understand the tools
    • So the 5.0s figure relates to the whole page
    • Including:
      • Javascript
      • CSS
      • Images
      • Adverts
      • onLoad activities
    • So what's taking up the most time?
  • 12. Firebug
    • Firefox plugin
    • Loads of development functionality
    • Useful here to see HTTP request stream
  • 13.  
  • 14. DNS lookup Connecting Sending Waiting Receiving
  • 15.  
  • 16.  
  • 17. 5 seconds!
  • 18. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time So how do we make individual requests faster?
  • 19. Speeding up a DNS request DNS lookup Connecting Sending Waiting Receiving Time
    • Improve cacheability
    • Provide more “local” DNS
  • 20. The Internet Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk NYIIX
  • 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
  • 22. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time
    • Connect to 81.20.48.136
    Be Internet LINX Global
  • 23. Speeding up a web request Be Internet LINX CheapNet myfirstwebsite.com Level3 Verio Global heart.co.uk NYIIX
  • 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
  • 25. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time Processing ...
  • 26. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time
    • Check the cache
    • Parse the URL, dispatch to handler
    • Database queries
    • Database queries
    • Database queries
    • Application processing
    • Generate page content
  • 27. Speeding up a web response DNS lookup Connecting Sending Waiting Receiving Time
    • Return compressed content
    • Return cache control headers
  • 28. Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time Make fewer requests per page!
  • 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
  • 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
  • 31. Optimising F/E Performance
    • Writing clean, performant code
    • Compressing
    • Reducing the size of files we push down the wire
    • Reducing the number of things we push down the wire
  • 32.
    • Rounded corners in the olden days
    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>
  • 33.
    • Rounded corners in the olden days
    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; }
  • 34.
    • Rounded corners in the future - NOW!
    Optimising F/E Performance <div id=”box”> This is a box </div> div#box { border-radius:2px; }
  • 35.
    • Rounded corners in the future - NOW!
    Optimising F/E Performance
  • 36.
    • More CSS3 goodness
    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)) ); }
    • Also in CSS3 - embedded fonts, opacity, drop-shadows, multiple backgrounds...
  • 37.
    • Site comparison
    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
  • 38. Reducing HTTP Requests
    • Concatenated files
    • CSS Image Maps
    • Single CSS files for each browser
  • 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>
    • bbc.co.uk/entertainment html source features multiple script includes
  • 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>
    • Heart.co.uk in DEVELOPMENT (28 files)
    <script src=&quot; heart_minified.js &quot; type=&quot;text/javascript&quot; ></script>
    • Heart.co.uk LIVE (1 file)
  • 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]-->
    • CSS in conditional comments (Absolute)
    • One CSS for all browsers
    • Another CSS file for IE
  • 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]-- >
    • CSS in conditional comments (Heart)
  • 43. Concatenated Files
    • CSS Sprites
  • 44. Concatenated Files
    • CSS Sprites
  • 45. Concatenated Files
    • Site comparison
    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)
  • 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; }
    • Heart CSS in dev = easy to read, developer friendly
  • 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}
    • Heart CSS in Live - compressed to the max
    • Compressing CSS saves 28kb
    • Compressing JS saves 40k
  • 48. Adverts
    • Ad calls are always unique - there’s no caching (either server side or client-side)
    • Files are not compressed
    • Files often chain requests (1 ad can be more than 6 http requests, this also means multiple DNS lookups)
    • Duplicate code
  • 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
  • 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