This presentation shares some of the experiences Xero went through to greatly improve our user experience by focusing on front-end performance.

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

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

4. 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. 5% Server side performance often not the problem with response time 95% Most of the response time is taken up here

6. 25% 75%

7. Empty Cache Primed Cache

9. Performance === Usability www.xero.com

12. Fly’s down Zipped

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

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

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

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

35. Any questions? www.xero.com

36. www.xero.com 0800 GET XERO