Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Building Faster Websites

on

  • 1,865 views

This is my latest version of my client side performance presentations. This has been presented at TechEd NZ 2009 & to a couple of .NET user groups around NZ. This presentation focuses on the basics of ...

This is my latest version of my client side performance presentations. This has been presented at TechEd NZ 2009 & to a couple of .NET user groups around NZ. This presentation focuses on the basics of client-side performance tuning.

Statistics

Views

Total Views
1,865
Views on SlideShare
1,841
Embed Views
24

Actions

Likes
1
Downloads
39
Comments
0

3 Embeds 24

http://www.linkedin.com 22
http://www.techgig.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building Faster Websites Building Faster Websites Presentation Transcript

    • Building Faster Websites
      Craig Walker, Chief Technology Officer
    • What is Xero?
      http://www.xero.com/signup/
    • Performance === Usability
    • Performance === Money
      Bing: +2s in response time = 4.3% LOSS of revenue/user
      Google: +500ms in response time = 20% LESS traffic
      Amazon: +100ms in response time = 1% LESS sales
      Shopzilla: +5s response time led to 12% increase in revenue & 25% increase in page views
    • TheHTTPRequest
      Send
      Last Byte
      Establish
      Connection
      Send
      FirstByte
      Server
      ISP
      Send Data
      Browser
      Receive
      Last Byte
      Initial
      Connection
      Initial HTTP
      Request
      Receive
      First Byte
      DNS
      Lookup
      Open Socket
      Get IP
      First Byte
      Content Download
    • 5%
      95%
    • 25%
      75%
    • Primed Cache
      Empty Cache
    • Focus on the front-end
      75-95% of the end-user response time for Xero customers was spent on the front end
      Much easier to optimise than server side performance
      Greater potential for improvement – especially from a front-end users point of view
    • Lotsa tools!
      HTTPWatch www.httpwatch.com
      AOL PageTestwww.webpagetest.org
      • MySpace's Performance Tracker msfast.myspace.com
      • MS Visual Round Trip Analyzer
    • The ones we use at Xero …
      Fiddler www.fiddlertool.com
      Firebug www.getfirebug.com
      YSlowdeveloper.yahoo.com/yslow
    • We don't all run Windows 7 & IE8 …
    • Fiddler
      demo
    • The Rules
    • Zip It!
      Significantly reduces download size – 60-80% saving on text based content
      90% of browsers support compression
      Benefits users & you too:
      Reduces traffic costs
      Doesn’t require code change
      Zip everything you can
      html, aspx, js, css, xml, txt, json, ashx …
    • Fly’s down
      Zipped
    • Turning on HTTP Compression
      demo
    • Things to be wary of with compression …
      Make sure you test – don't assume compression
      Approximately 5% of users get uncompressed responses
      Browsers (& other applications) indicate compression support by sending Accept-Encoding: gzip, deflate and responding with Content-Encoding: gzip
      Some client software (anti-virus, anti-phishing) and proxy servers can strip Accept-Encoding
      If Accept-Encoding is missing let your users know!
      Use Advanced Logging for IIS7 to track request & response headers http://www.iis.net/extensions/advancedlogging
    • Minify all static content
      CSS, JavaScript, XML, JSON, HTML can all be minified
      Not a replacement for gzipping but is a perfect accompaniment to it (we've seen up to 50% extra savings)
      No shortage of tools:
      JSMin
      CSSTidy
      YUI Compressor
      JavaScript obfuscation can also be useful – just test that your app still works afterwards
    • You don't really want people to read your code do you?
      955KB -> 265KB
      539KB -> 141KB
      Ext.DomHelper = function(){
      vartempTableEl = null;
      varemptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
      vartableRe = /^table|tbody|tr|td$/i;
      varcreateHtml = function(o){
      if(typeofo == 'string'){
      return o;
      }
      varb = "";
      if (Ext.isArray(o)) {
      for (vari = 0, l = o.length; i < l; i++) {
      b += createHtml(o[i]);
      }
      return b;
      }
      if(!o.tag){
      o.tag = "div";
      }
      b += "<" + o.tag;
      for(varattr in o){
      if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeofo[attr] == "function") continue;
      if(attr == "style"){
      vars = o["style"];
      if(typeofs == "function"){
      s = s.call();
      }
      if(typeofs == "string"){
      b += ' style="' + s + '"';
      }else if(typeofs == "object"){
      Ext.DomHelper=function(){varn=null;varg=/^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;varb=/^table|tbody|tr|td$/i;var a=function(w){if(typeofw=="string"){returnw;}varq="";if(Ext.isArray(w)){for(varu=0,r=w.length;u<r;u++){q+=a(w[u]);}returnq;}if(!w.tag){w.tag="div";}q+="<"+w.tag;for(varp in w){if(p=="tag"||p=="children"||p=="cn"||p=="html"||typeofw[p]=="function"){continue;}if(p=="style"){varv=w["style"];if(typeofv=="function"){v=v.call();}if(typeofv=="string"){q+=' style="'+v+'"';}else{if(typeofv=="object"){q+=' style="';for(vart in v){if(typeofv[t]!="function"){q+=t+":"+v[t]+";";}}q+='"';}}}else{if(p=="cls"){q+=' class="'+w["cls"]+'"';}else{if(p=="htmlFor"){q+=' for="'+w["htmlFor"]+'"';}else{q+=" "+p+'="'+w[p]+'"';}}}}if(g.test(w.tag)){q+="/>";}else{q+=">";varx=w.children||w.cn;if(x){q+=a(x);}else{if(w.html){q+=w.html;}}q+="</"+w.tag+">";}return q;};varo=function(v,q){varu;if(Ext.isArray(v)){u=document.createDocumentFragment();for(vart=0,r=v.length;t<r;t++){o(v[t],u);}}else{if(typeofv=="string"){u=document.createTextNode(v);}else{u=document.createElement(v.tag||"div");vars=!!u.setAttribute;for(varp in v){if(p=="tag"||p=="children"||p=="cn"||p=="html"||p=="style"||typeofv[p]=="function"){continue;}if(p=="cls"){u.className=v["cls"];}else{if(s){u.setAttribute(p,v[p]);}else{u[p]=v[p];}}}Ext.DomHelper.applyStyles(u,v.style);varw=v.children||v.cn;if(w){o(w,u);}else{if(v.html){u.innerHTML=v.html;}}}}if(q){q.appendChild(u);}returnu;};vark=function(v,t,r,u){n.innerHTML=[t,r,u].join("");varp=-1,q=n;while(++p<v){q=q.firstChild;}returnq;};varl="<table>",e="</table>",c=l+"<tbody>",m="</tbody>"+e,i=c+"<tr>",d="</tr>"+m;varh=function(p,q,s,r){if(!n){n=document.createElement("div");}vart;varu=null;if(p=="td"){if(q=="afterbegin"||q=="beforeend"){return;}if(q=="beforebegin"){u=s;s=s.parentNode;}else{u=s.nextSibling;s=s.parentNode;}t=k(4,i,r,d);}else{if(p=="tr"){if(q=="beforebegin"){u=s;s=s.parentNode;t=k(3,c,r,m);}else{if(q=="afterend"){u=s.nextSibling;s=s.parentNode;t=k(3,c,r,m);}else{if(q=="afterbegin"){u=s.firstChild;}t=k(4,i,r,d);}}}else{if(p=="tbody"){if(q=="beforebegin"){u=s;s=s.parentNode;t=k(2,l,r,e);}else{if(q=="afterend"){u=s.nextSibling;s=s.parentNode;t=k(2,l,r,e);}else{if(q=="afterbegin"){u=s.firstChild;}t=k(3,c,r,m);}}}else{if(q=="beforebegin"||q=="afterend"){return;}if(q=="afterbegin"){u=s.firstChild;}t=k(2,l,r,e);}}}s.insertBefore(t,u);return
    • Reduce HTTP Requests
      Less components means a faster page
      Every request is an overhead
      Combine scripts
      Combine CSS
      Combine images into CSS Sprites
      Don’t rely on cache: 304’s are still requests
    • CSS Sprites
      Combine all small images into one large image
      Use CSS to control the displaying of each image
    • 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 code?
      <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>
      .buttons span.button {
      background:transparenturl(buttons.png) no-repeat 0 0;
      }
      .buttons span.button button, .buttons span.button a {
      background:transparenturl(buttons.png) no-repeat 100% -120px;
      }
      .buttons span.blue {
      background-position: 0 -30px;
      }
      .buttons span.blue button, .buttons span.blue a {
      background-position: 100% -150px;
      }
      .buttons span.red {
      background-position: 0 -60px;
      }
      .buttons span.red button, .buttons span.red a {
      background-position: 100% -180px;
      }
      .buttons span.green {
      background-position: 0 -90px;
      }
      .buttons span.green button, .buttons span.green a {
      background-position: 100% -210px;
      }
    • SpriteMe
      demo
    • Optimiseimages
      • UsePNGs instead of GIFs
      • Avoid alpha filters – can block rendering and freeze the browser
      • PNG8 is best and supported by IE6 (yes – even with transparency
      • Optimise further with tools like PNGOUT
      • Make sure you have a favicon.ico:
      • Every browser will request it
      • Best not to respond with a 404
      • Make it small and cacheable
    • 12KB
      15KB
    • Maximise Parallel Downloads
      Most browsers are limited to 6 connections total and 2 connections per hostname
      • Increase the number of hostnames to increase the number of parallel downloads
      • Don't overdo it! (DNS lookups are expensive so limit to 2-4 domains)
    • JavaScript external and on the bottom
      Move scripts to external files for both reuse and caching
      Promotes better script design
      Push scripts as low as possible
      Often difficult with document.write or with inline calls requiring loaded JavaScript
      Be pragmatic – think about splitting JavaScript into “must be loaded” and “can be loaded on demand”
      Scripts will block both downloading and rendering until parsed
      Remove duplicate scripts (IE has a habit of downloading them again)
    • Maximise the cache
      Understand the ratio of users with cached vsuncached
      Add an Expires header
      Not just for images – should be used on all static content
      Set a “Never expire” or far future expires policy if you can
      Reduces HTTP requests – once component is served, the browser never asks for it again
      Date stamping in file names makes it easier
      Remove ETags
      ETags are another caching mechanism – sent with every request
      Uniquely created per web server – not good in web farms
      Just turn them off and use Expires headers instead
    • Use a CDN
      Content Delivery Network
      Distributes content closer to the last mile
      Distribute your static content before distributing your dynamic content
      Akamai most popular but expensive for small sites
      Xero utilises a rudimentary CDN using IP lookup to determine location
    • Get
      location
      from IP
      How it works:
      RegisterCSS("/common/style/xero.css", "screen")
      RegisterJavascript("/common/scripts/xero.js")
      GET
      Request
      Response with HTML document
      <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>
      Images
      JS
      CSS
    • Reduce cookie weight
      Cookies are sent back with every request
      Keep cookie size small and only store what's required – use server-side storage for everything else
      Consider cookie free domains for static content
      And while we're at it – reduce ViewState too!
    • Preloading …
      Preload components you’ll need in the future
      Unconditional preload
      Xero login page preloads all core components so that the dashboard experience is better
      Conditional preload
      Often based on where you think a user might go to next
    • YSlow
      Firebug extension
      Grades performance – not about response times but about how well a site has adopted the techniques suggested
      Response time inversely proportional to YSlow score – get as close to A as possible to get the maximum performance gain
    • YSlow
      demo
    • Aptimize
      www.aptimize.com
      • Plugin that works with both IIS & Apache
      • Merges CSS & JSS files
      • Reduces & optimises images with CSS sprites & CSS inlining
      • Compresses content with minification
      • Improves caching
      • Used by over 300 websites & intranets
      • And it does all this in real-time!
    • Aptimize
      demo
    • Aptimizing Microsoft
      • Microsoft used Aptimize to speed up sharepoint.microsoft.com
      • HTTP requests reduced from 96 to 35
      • Sped up first view, repeat view and start render by over 50%
      • YSlow went from an E to a B
    • Things to take away
      Focus on the front-end
      Be an advocate for your users – isn't it nice to have happy users?
      Faster web sites lead to:
      Better user experience
      Reduced operating expenses
      Increase revenue
    • Questions?
    • www.xero.com