Web performance - Analysing Heart.co.uk

Our Site Performance
Focusing on heart.co.uk

Performance Anxiety?
Google Webmaster Tools for heart.co.uk
Average 5.0 second load time (July 30 th 2010)
Slower than 75% of sites

Anatomy of a web request DNS lookup Connecting Sending Waiting Receiving Time

Look up: www.heart.co.uk
Get back: 81.20.48.136

Connect to 81.20.48.136
Be Internet LINX Global

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

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 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 ...

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 ?

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.”

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?

Firebug
Firefox plugin
Loads of development functionality
Useful here to see HTTP request stream

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
Improve cacheability
Provide more “local” DNS

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/20 64.68.192.0/20

Speeding up a web request DNS lookup Connecting Sending Waiting Receiving Time
Connect to 81.20.48.136
Be Internet LINX Global

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-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

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
Check the cache
Parse the URL, dispatch to handler
Database queries
Database queries
Database queries
Application processing
Generate page content

Speeding up a web response DNS lookup Connecting Sending Waiting Receiving Time
Return compressed content
Return cache control headers

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 Firefox 3 6 Google Chrome 4 6 Safari 4 6 iPad 4 6 iPhone 4 4 Android 4 Internet Explorer 7 2

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

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

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>

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; }

Rounded corners in the future - NOW!
Optimising F/E Performance <div id=”box”> This is a box </div> div#box { border-radius:2px; }

Rounded corners in the future - NOW!
Optimising F/E Performance

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...

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

Reducing HTTP Requests
Concatenated files
CSS Image Maps
Single CSS files for each browser

Concatenated Files <script src=" locator.js " type="text/javascript" ></script> <script src=" bbc_fmtj.j s " type="te xt/javascript" ></script> <script src=" bbc_fmtj_common.js " t ype="text/javascri pt" ></script> <script src=" bbc_fmtj_config.js " type="text/javascri pt" ></script> <scr ipt src=" config.sjson " type="text/javascript" ></script>
bbc.co.uk/entertainment html source features multiple script includes

Concatenated Files <script src=" gusto.js " type="text/javascript" ></script> <script src=" jquery.j s " type=" text/javascript" ></script> <script src=" form_validation.j s " type="text/java script" ></script> <script src=" cookies.js " type="text/javascript" ></script> <script src="megamod.js" type="text/javascript" ></script> <script src="login_lightbox.js" type="text/javascript" ></script>
Heart.co.uk in DEVELOPMENT (28 files)
<script src=" heart_minified.js " type="text/javascript" ></script>
Heart.co.uk LIVE (1 file)

Concatenated Files <link rel="stylesheet" href="hp.css"> 
CSS in conditional comments (Absolute)
One CSS for all browsers
Another CSS file for IE

Concatenated Files  <link rel="stylesheet" href=" heart-minified.css " media="screen" type="text/css">   <!--[if IE 7]> <link rel="stylesheet" href=" ie7-minified.css " media="screen" type="text /css"> <![endif]- -> <!--[if gt IE 7]> <link rel="stylesheet" href=" e8-minified.css " media="screen" type="text/css"> <![endif]-- >
CSS in conditional comments (Heart)

Concatenated Files
CSS Sprites

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)

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

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

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

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.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

Web performance - Analysing Heart.co.uk

by gareth53 on Aug 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Web performance - Analysing Heart.co.uk — Presentation Transcript