Download - Web performance - Analysing Heart.co.uk
![Page 1: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/1.jpg)
Our Site PerformanceFocusing on heart.co.uk
![Page 2: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/2.jpg)
Performance Anxiety?
Google Webmaster Tools for heart.co.uk Average 5.0 second load time (July 30th 2010) Slower than 75% of sites
![Page 3: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/3.jpg)
Anatomy of a web request
DNS lookup Connecting Sending Waiting Receiving
Time
![Page 4: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/4.jpg)
Anatomy of a web request
DNS lookup Connecting Sending Waiting Receiving
Time
Look up: www.heart.co.uk Get back: 81.20.48.136
![Page 5: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/5.jpg)
Anatomy of a web request
DNS lookup Connecting Sending Waiting Receiving
Time
Connect to 81.20.48.136
Be Internet LINX Global
![Page 6: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/6.jpg)
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
![Page 7: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/7.jpg)
Anatomy of a web request
DNS lookup Connecting Sending Waiting Receiving
Time
Processing...
![Page 8: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/8.jpg)
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...
![Page 9: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/9.jpg)
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 ?
![Page 10: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/10.jpg)
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.”
![Page 11: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/11.jpg)
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?
![Page 12: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/12.jpg)
Firebug
Firefox plugin
Loads of development functionality Useful here to see HTTP request stream
![Page 13: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/13.jpg)
![Page 14: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/14.jpg)
DNS lookup Connecting Sending Waiting Receiving
![Page 15: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/15.jpg)
![Page 16: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/16.jpg)
![Page 17: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/17.jpg)
5 seconds!
![Page 18: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/18.jpg)
Speeding up a web request
DNS lookup Connecting Sending Waiting Receiving
Time
So how do we make individual requests faster?
![Page 19: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/19.jpg)
Speeding up a DNS request
DNS lookup Connecting Sending Waiting Receiving
Time
Improve cacheability Provide more “local” DNS
![Page 20: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/20.jpg)
Be Internet LINX
CheapNet
The Internet
myfirstwebsite.com
Level3
Verio
Global
heart.co.uk
NYIIX
![Page 21: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/21.jpg)
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
![Page 22: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/22.jpg)
Speeding up a web request
DNS lookup Connecting Sending Waiting Receiving
Time
Connect to 81.20.48.136
Be Internet LINX Global
![Page 23: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/23.jpg)
Be Internet LINX
CheapNet
Speeding up a web request
myfirstwebsite.com
Level3
Verio
Global
heart.co.uk
NYIIX
![Page 24: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/24.jpg)
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
![Page 25: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/25.jpg)
Speeding up a web request
DNS lookup Connecting Sending Waiting Receiving
Time
Processing...
![Page 26: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/26.jpg)
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
![Page 27: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/27.jpg)
Speeding up a web response
DNS lookup Connecting Sending Waiting Receiving
Time
Return compressed content Return cache control headers
![Page 28: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/28.jpg)
Speeding up a web request
DNS lookup Connecting Sending Waiting Receiving
Time
Make fewer requests per page!
![Page 29: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/29.jpg)
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
![Page 30: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/30.jpg)
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
![Page 31: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/31.jpg)
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
![Page 32: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/32.jpg)
•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>
![Page 33: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/33.jpg)
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
![Page 34: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/34.jpg)
•Rounded corners in the future - NOW!
Optimising F/E Performance
<div id=”box”> This is a box</div>
div#box {border-radius:2px;
}
![Page 35: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/35.jpg)
•Rounded corners in the future - NOW!
Optimising F/E Performance
![Page 36: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/36.jpg)
•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...
![Page 37: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/37.jpg)
•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
![Page 38: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/38.jpg)
Reducing HTTP Requests•Concatenated files
•CSS Image Maps
•Single CSS files for each browser
![Page 39: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/39.jpg)
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
![Page 40: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/40.jpg)
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)
![Page 41: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/41.jpg)
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
![Page 42: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/42.jpg)
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)
![Page 43: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/43.jpg)
Concatenated Files
•CSS Sprites
![Page 44: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/44.jpg)
Concatenated Files
•CSS Sprites
![Page 45: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/45.jpg)
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)
![Page 46: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/46.jpg)
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
![Page 47: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/47.jpg)
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
![Page 48: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/48.jpg)
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
![Page 49: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/49.jpg)
Ads - you broke my Heart
Product # of ad callsPlayers 1Xfm 4Galaxy 4CapitalFM 5Classic FM 6Trent FM 8Heart 12
![Page 50: Web performance - Analysing Heart.co.uk](https://reader037.vdocuments.site/reader037/viewer/2022110119/55583921d8b42ac6078b4a41/html5/thumbnails/50.jpg)
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