Client Side Performance @ Xero

Client-Side Performance Sucks Craig Walker, Chief Technology Officer And what you can do to make it suck less. www.xero.com

Your typical internal network: ,[object Object],[object Object],[object Object]

There's a reason why the words “world” and “wide” are in the acronym Control and knowledge are limited to your own environment. Even how the packets fly around the internet is out of your control. www.xero.com

The HTTP Request Server Browser Receive Last Byte Send Last Byte Send Data Establish Connection Initial Connection Open Socket Initial HTTP Request First Byte Receive First Byte Send First Byte Content Download ISP Get IP DNS Lookup

5% Server side performance often not the problem with response time 95% Most of the response time is taken up here

Focus on the front-end ,[object Object],[object Object],[object Object],[object Object]

Performance === Usability www.xero.com

The giants who’s shoulders I’m standing on ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Zip It! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Reduce HTTP Requests ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Sprites ,[object Object],[object Object]

The designers want what? 11 Images 11 HTTP Requests 3.3 KB total size

Obey your thirst ® 1 Image 1 HTTP Request 1.6 KB total size

And the CSS? <div class="buttons"> <span class="large green button"> <button type="button"> <span class="checkbox icon"> Approve </span> </button> </span> <span class="large blue button"> <button type="button"> <span> Save </span> </button> </span> <span class="large red button"> <button type="button"> <span class="delete icon"> Delete </span> </button> </span> <span class="medium gray button"> <button type="button"> <span class="delete icon"> Cancel </span> </button> </span> </div> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The HTML The CSS

Maximise Parallel Downloads ,[object Object],[object Object],[object Object],Browser Parallel Downloads Firefox 2 2 Firefox 3 6 Internet Explorer 7 2 Internet Explorer 8 6 Safari 3.1 4 Safari 4.0 4

Maximise Parallel Downloads ,[object Object],[object Object],Increased parallelism (using 2 hostnames)

Use a CDN ,[object Object],[object Object],[object Object],[object Object],[object Object]

How it works: Images JS CSS <xsl:value-of select="Page:RegisterCSS('/common/style/xero.css','screen')"/> <xsl:value-of select="Page:RegisterJavascript('/common/scripts/xero.js'"/> <link rel="stylesheet" type="text/css" media="screen" href="https://nzs1.xero.com/common/style/xero.css" /> <script type="text/javascript" src="https://nzs2.xero.com/common/scripts/xero.js"></script> GET Request Response with HTML document Get location from IP

Maximise the cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS external and on top ,[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript external and on the bottom ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Notice the parallel download here … … until we hit the JavaScript files where they come down sequentially, blocking any other downloads

Minify all static content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Optimise images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Preloading … ,[object Object],[object Object],[object Object],[object Object],[object Object]

Reduce cookie weight ,[object Object],[object Object],[object Object]

Keep it clean ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Things to take away ,[object Object],[object Object],[object Object],[object Object]

YSlow ,[object Object],[object Object],[object Object]

Fiddler ,[object Object],[object Object],[object Object]

AOL PageTest ,[object Object],[object Object],[object Object],[object Object]

Client Side Performance @ Xero

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Client Side Performance @ Xero

Similar to Client Side Performance @ Xero (20)

Recently uploaded

Recently uploaded (20)

Client Side Performance @ Xero