The Need For Speed


Published on

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Performance = How quickly something happens, i.e. whether it happens fast enough to satisfy users Scalability = Maintaining reliability and performance under load
  • Yahoo stats on the faster pages are the more users click
  • Amazon’s quote on how revenue falls as page load time falls Shopzilla
  • Water fall of produced by via Frankfurt / IE8 / 1.5Mbps 191 Components!!! Main html content takes 788ms, but page doesn’t start rendering until 8s!!! Can also generate these with Firebug / Webkit Inspector / MSFast / AOL PageTest
  • Compress Make sure server sets the vary: accept-encoding header for both compressed and uncompressed content so proxy caches serve the correct version to client browsers Trade off between compression level and server CPU used – deflate uses less CPU (probably due to lack of CRC check), some thoughts that it also uses less CPU to decompress Minify Can only serve out compressed content if the request has Accept-Encoding: gzip, deflate some security products mangle this header! ( ) Minifying CSS and JS reduces its size, plus it will still compress further is deflate/gzip is available Concise Markup Use HTML5 features e.g. <!doctype HTML>, drop type from stylesheet links and scripts. Watch out for inline styles, “divitis”, long identifiers, un-needed elements and attributes Remove unused styles Un-needed HTTP headers Some installations add extra server headers e.g. PHP and ASP.NET both add X-Powered-By they’re not needed by the client so can be removed
  • Image formats jpg – lossy images e.g. photos etc. png – everything you might have used a gif for in the past. gif – small loading animations, nothing else! Multiple types of png: Truecolour, Grayscale, Indexed, multiple levels of transparency – watch out for PNG8 transparency in Photoshop with IE6 Optimise Make sure the images are properly compressed – plenty of optimisation tools (, optipng, pngcrush etc) around Comparison of optimisers - / Gradients / Rounded corners Use CSS3 and degrade for browsers that don’t support them (or offer a slight different experience) Reuse images with rotation An up arrow is a down arrow rotated through 180°
  • ASDL Upstream and downstream speeds don’t match i.e. at home I have 448Kbps upstream and 4.4Mbps downstream Cookieless (sub-)domain Using a sub-domain? Cookies can be big - 4KB – that’s 4KB that gets sent to the browser, and then back to the server Watch out for things like Google Analytics which will set a cookie across all sub-domains i.e. Using a separate (sub-)domain enables easy transition to a CDN in the future. A simple way to serve static content out from another domain is run it from the same web-server as the rest of the site (or something like an nginx proxy in front of the server, has other performance benefits too) POST vs GET POST – Headers get sent then waits for server to acknowledge headers before data is sent. GET – May fit a single packet, responses are cacheable .NET Many applications rely on POST with hidden form fields like viewstate – viewstate is essentially sending state to the client and back to the server instead of keeping on the server.
  • Merge CSS, JS Multiple CSS or JS files, can they be merged? CSS Sprites Create a tile of images and use CSS to pick out the required image Cache Directives Set Expires or Cache-Control header far in the future for static components e.g. images, css, js etc. but need to version the components if updated e.g. build number, fingerprint (SHA, MD5 etc) Alternatives to external images CSS3 – gradients, rounded corners dataURIs – base64 encoded in the stylesheet, not universal (e.g. alternative needed for IE6 / IE7), bulks out stylesheet leading to lager stylesheets
  • Use SpriteMe ( http:// / ) to automagically produce a set of sprites for an existing page
  • Javascript blocking rendering
  • The Need For Speed

    1. 1. The Need For Speed… BarCamp Stroud, 13 Sep 2010 … why slow page load times matter …some things you can do about it @andydavies
    2. 2. Straw poll: Who does what?
    3. 3. Me… <ul><li>Run development and operations for Kerboodle </li></ul><ul><li>Subscription based service for secondary education - GCSE/AS/A2 etc. </li></ul><ul><li>300,000+ “paid for” users </li></ul><ul><li>Peak 1 million page views a day (but very peaky) </li></ul><ul><li>Rich media content </li></ul><ul><li>Congested connections: </li></ul><ul><ul><ul><li>Average School: 300+ PCs, 16Mbps pipe = 64Kpbs/user! </li></ul></ul></ul>
    4. 4. Slow pages = poor user experience = less time on site = lower conversions
    5. 8. What affects performance? <ul><li>Request size </li></ul><ul><li>Time to generate response </li></ul><ul><li>Response size </li></ul><ul><li>Number of components </li></ul><ul><li>Bandwidth </li></ul><ul><li>Latency </li></ul><ul><li>Browser </li></ul><ul><li>Network gateways </li></ul><ul><li>Security Software </li></ul>Things we can influence Things we can’t control
    6. 9. What does a page load look like?
    7. 10. So, how can we speed things up?
    8. 11. Shrink the response <ul><li>Compress (deflate/gzip) </li></ul><ul><ul><li>html, css, js, xml, json etc. </li></ul></ul><ul><li>Minify </li></ul><ul><ul><li>css & js </li></ul></ul><ul><li>Concise markup </li></ul><ul><li>Remove un-needed HTTP headers </li></ul><ul><ul><li>X- headers </li></ul></ul>
    9. 12. Images <ul><li>Pick the right format </li></ul><ul><ul><li>jpg </li></ul></ul><ul><ul><li>png </li></ul></ul><ul><ul><li>gif </li></ul></ul><ul><li>Optimise </li></ul><ul><li>Do you need an image? </li></ul><ul><ul><li>CSS3 </li></ul></ul><ul><ul><li>Canvas/SVG </li></ul></ul>
    10. 13. Spot the difference
    11. 14. The difference… gif 26KB png 9KB
    12. 15. A Song for Europe Richard
    13. 16. Shrink the request <ul><li>A is for Asymmetric (ADSL) </li></ul><ul><ul><li>Upload speed != download speed </li></ul></ul><ul><li>Static content from a cookieless domain (take care if using sub-domain) </li></ul><ul><li>POST vs GET </li></ul><ul><li>.NET – Here be dragons! </li></ul>
    14. 17. Reduce the requests <ul><li>Merge CSS, JS </li></ul><ul><li>Merge images and use CSS Sprites </li></ul><ul><li>Set cache directives </li></ul><ul><li>Do you need an external image? </li></ul><ul><ul><li>CSS3 </li></ul></ul><ul><ul><li>dataURIs </li></ul></ul>
    15. 18. CSS Sprites <ul><li> </li></ul>.icon { background:url(/images/nav_logo16.png) background-position: -40px -85px; height: 19px; width: 19px; }
    16. 19. Browsers Block <ul><li>Stylesheets </li></ul><ul><ul><li>Block page rendering until all external stylesheets have been downloaded </li></ul></ul><ul><li>Javascript </li></ul><ul><ul><li>External scripts block rendering of elements below them </li></ul></ul><ul><ul><li>Inline scripts block rendering of everything </li></ul></ul>
    17. 20. 3 rd Party Scripts <ul><li>e.g. Share This, Google Analytics, Widgets etc. </li></ul><ul><li>What happens if the third party is broken or slow? </li></ul><ul><li>Simulate with Charles - reduce bandwidth or increase latency for third party URLs </li></ul><ul><li>Is there an asynchronous version available? </li></ul>
    18. 21. Other things… <ul><li>Watch the limit on number of parallel downloads </li></ul><ul><li>Specify a charset </li></ul><ul><ul><li>Content-Type: text/html; charset=utf-8 </li></ul></ul><ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; utf-8&quot;> </li></ul></ul><ul><li>Flush the response early? </li></ul><ul><li>e.g. after <head>, header, before footer etc. </li></ul>
    19. 22. Handy Tools <ul><li>YSlow </li></ul><ul><li> </li></ul><ul><li>PageSpeed </li></ul><ul><li>WebPageTest </li></ul><ul><ul><li> </li></ul></ul>
    20. 23. The Giants! <ul><li>Steve Souders </li></ul><ul><li>@souders </li></ul><ul><ul><li> </li></ul></ul><ul><li>Stoyan Stefanov </li></ul><ul><ul><li>@stoyanstefanov </li></ul></ul><ul><ul><li> </li></ul></ul>
    21. 24. Thanks for listening… @andydavies Questions… Comments… Thoughts?
    22. 25. Find Out More… <ul><li>Google Guidelines </li></ul><ul><li> </li></ul><ul><li>Yahoo Guidelines </li></ul><ul><li> </li></ul><ul><li>Blogs </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>
    23. 26. Waterfall Generators <ul><li>WebPageTest - </li></ul><ul><li>Firefox - Firebug </li></ul><ul><li>Chrome/Safari – Inspector </li></ul><ul><li>AOL PageTest - </li></ul><ul><li>MSFast - </li></ul>
    24. 27. Traffic Inspectors <ul><li>Charles </li></ul><ul><li> </li></ul><ul><li>HTTPWatch </li></ul><ul><li> </li></ul><ul><li>Fiddler </li></ul><ul><li> </li></ul><ul><li>Wireshark </li></ul><ul><li> </li></ul>
    25. 28. CSS & Javascript Minifiers <ul><li>CSS </li></ul><ul><li>YUI Compressor - </li></ul><ul><li>CSS Tidy - </li></ul><ul><li>Javascript </li></ul><ul><li>YUI Compressor - </li></ul><ul><li>JSMin - </li></ul><ul><li>Closure - </li></ul>
    26. 29. Optmising Images <ul><li>General list </li></ul><ul><ul><li> </li></ul></ul><ul><li>Yahoo </li></ul><ul><li> </li></ul><ul><li>Gifsicle </li></ul><ul><li> </li></ul><ul><li>PNG </li></ul><ul><li> </li></ul>
    27. 30. Image credits <ul><li>Slide 1: © Chris-Håvard Berge 2009 - </li></ul><ul><li>Slide 2: © Dominique Archambault 2009 - </li></ul><ul><li>Slide 4: © Chris Miller 2008 - </li></ul><ul><li>S lides 5, 6, 7: StrangeLoop Networks - </li></ul><ul><li>Slide 8: © eko - </li></ul><ul><li>Slide 18: Google - </li></ul>