web performance - analysing heart.co.uk

Our Site PerformanceFocusing on heart.co.uk

Performance Anxiety?

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

Anatomy of a web request

DNS lookup Connecting Sending Waiting Receiving

Time

Anatomy of a web request

DNS lookup Connecting Sending Waiting Receiving

Time

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

Anatomy of a web request

DNS lookup Connecting Sending Waiting Receiving

Time

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.1Host: www.heart.co.ukUser-Agent: Mozilla/5.0 ....Accept: text/html,...Accept-Language: en-gb,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 115Connection: keep-aliveCache-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 OKServer: nginxDate: Wed, 11 Aug 2010 19:07:07 GMTContent-Type: text/html; charset=utf-8Transfer-Encoding: chunkedConnection: keep-aliveKeep-Alive: timeout=5Vary: Accept-EncodingVary: CookieContent-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

Be Internet LINX

CheapNet

The Internet

myfirstwebsite.com

Level3

Verio

Global

heart.co.uk

NYIIX

Be Internet LINX

CheapNet

Anycast DNS

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

Be Internet LINX

CheapNet

Speeding up a web request

myfirstwebsite.com

Level3

Verio

Global

heart.co.uk

NYIIX

Speeding up a web request

DNS lookup Connecting Sending Waiting Receiving

Time

GET / HTTP/1.1Host: www.heart.co.ukUser-Agent: Mozilla/5.0 ....Accept: text/html,...Accept-Language: en-gb,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 115Connection: keep-aliveCache-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 ConnectionsBrowser Statistics

Browser Max connections per hostname

Opera 10 7Firefox 3 6Google Chrome 4

6

Safari 4 6iPad 4 6iPhone 4 4Android 4Internet Explorer 7

2

stats from browserscope.org

Concurrent ConnectionsBrowser Statistics

Browser Max connections (total)

Opera 10 29Firefox 3 30Google Chrome 4

52

Safari 4 60iPad 4 30iPhone 4 30Android 4Internet Explorer 7

60

stats from browserscope.org

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>

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

Optimising F/E Performance

•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 %ageAbsolute 26,174 4,387 16.76Heart 41,859 6,721 16.05BBC Entertainment

49,803 6,066 12.18

Digital Spy 67,687 7,480 11.05KISS100 57,659 4,063 0.07Trent 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.js" type="text/javascript" ></script><script src="bbc_fmtj_common.js" type="text/javascript" ></script><script src="bbc_fmtj_config.js" type="text/javascript" ></script><script src="config.sjson" type="text/javascript" ></script>

•bbc.co.uk/entertainmenthtml source features multiple script includes

Concatenated Files

<script src="gusto.js" type="text/javascript" ></script><script src="jquery.js" type="text/javascript" ></script><script src="form_validation.js" type="text/javascript" ></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">

<!--[if IE]><link rel="stylesheet" href="hp_iehacks.css"><![endif]-->

•CSS in conditional comments (Absolute)

•One CSS for all browsers

•Another CSS file for IE

Concatenated Files

<!--[if !IE]><!--><link rel="stylesheet" href="heart-minified.css" media="screen" type="text/css"><!--<![endif]-->

<!--[if IE 6]><link rel="stylesheet" href="combined/ie6-minified.css" media="screen" type="text/css"><![endif]-->

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

•CSS Sprites

Concatenated Files•Site comparison

Site JS CSS Img TotalDigital Spy

3 1 7 11

Heart 2 1 8 11Absolute 6 1 (2) 23 30 (31)Trent FM 9 3 24 36BBC Ents 13 9 (10) 18 40 (41)

KISS10020

(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 callsPlayers 1Xfm 4Galaxy 4CapitalFM 5Classic FM 6Trent FM 8Heart 12

Slow Ads Are Slow

test heart.co.ukheart, no

adsjust ads

1 4.099 2.451 4.0782 3.688 2.315 1.9153 4.329 2.24 2.2124 5.413 3.063 3.0385 4.879 2.195 1.9896 4.21 2.347 2.1947 5.283 2.14 1.9858 5.129 2.613 2.5059 4.105 2.147 2.08910 5.689 2.225 2.16av 4.68 2.37 2.417