Upload
gareth53
View
1.243
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
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