Downloaded 31 times
Uploaded byAndy Davies
The Need For Speed
The document discusses ways to improve website performance by reducing page load times. It identifies several factors that affect performance like request size, response size, number of components, and bandwidth. It then provides recommendations to shrink the response size through compression and optimization, reduce the number of requests by merging files, and minimize third-party scripts when possible. Specific techniques mentioned include minifying assets, using content delivery networks, browser caching, and tools for testing and monitoring performance.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
The Need For Speed
- 1. The Need ForSpeed… BarCamp Stroud, 13 Sep 2010 … why slow page load times matter …some things you can do about it @andydavies
- 2. Straw poll: Whodoes what?
- 3. Me… Run developmentand operations for Kerboodle Subscription based service for secondary education - GCSE/AS/A2 etc. 300,000+ “paid for” users Peak 1 million page views a day (but very peaky) Rich media content Congested connections: Average School: 300+ PCs, 16Mbps pipe = 64Kpbs/user!
- 4. Slow pages = poor user experience = less time on site = lower conversions
- 5.
- 6.
- 7.
- 8. What affects performance?Request size Time to generate response Response size Number of components Bandwidth Latency Browser Network gateways Security Software Things we can influence Things we can’t control
- 9. What does apage load look like?
- 10. So, how canwe speed things up?
- 11. Shrink the responseCompress (deflate/gzip) html, css, js, xml, json etc. Minify css & js Concise markup Remove un-needed HTTP headers X- headers
- 12. Images Pick theright format jpg png gif Optimise Do you need an image? CSS3 Canvas/SVG
- 13.
- 14. The difference… gif26KB png 9KB
- 15. A Song forEurope Richard http://givepngachance.com
- 16. Shrink the requestA is for Asymmetric (ADSL) Upload speed != download speed Static content from a cookieless domain (take care if using sub-domain) POST vs GET .NET – Here be dragons!
- 17. Reduce the requestsMerge CSS, JS Merge images and use CSS Sprites Set cache directives Do you need an external image? CSS3 dataURIs
- 18. CSS Sprites http://www.google.co.uk/images/nav_logo16.png.icon { background:url(/images/nav_logo16.png) background-position: -40px -85px; height: 19px; width: 19px; }
- 19. Browsers Block StylesheetsBlock page rendering until all external stylesheets have been downloaded Javascript External scripts block rendering of elements below them Inline scripts block rendering of everything
- 20. 3 rd Party Scripts e.g. Share This, Google Analytics, Widgets etc. What happens if the third party is broken or slow? Simulate with Charles - reduce bandwidth or increase latency for third party URLs Is there an asynchronous version available?
- 21. Other things… Watchthe limit on number of parallel downloads Specify a charset Content-Type: text/html; charset=utf-8 <meta http-equiv="Content-Type" content="text/html; utf-8"> Flush the response early? e.g. after <head>, header, before footer etc.
- 22. Handy Tools YSlow http://developer.yahoo.com/yslow/ PageSpeed http://code.google.com/speed/page-speed/ WebPageTest http://www.webpagetest.org/
- 23. The Giants! SteveSouders @souders http://www.stevesouders.com/blog/ Stoyan Stefanov @stoyanstefanov http://www.phpied.com/
- 24. Thanks for listening…http://slideshare.net/andydavies/the-need-for-speed @andydavies Questions… Comments… Thoughts?
- 25. Find Out More…Google Guidelines http://code.google.com/speed/page-speed/docs/rules_intro.html/ Yahoo Guidelines http://developer.yahoo.com/performance/rules.html Blogs http://www.webperformancetoday.com/ http://blog.patrickmeenan.com/ http://pipes.yahoo.com/stoyan/perfplanet/
- 26. Waterfall Generators WebPageTest- http://webpagetest.org/ Firefox - Firebug Chrome/Safari – Inspector AOL PageTest - http://pagetest.wiki.sourceforge.net/ MSFast - http://msfast.myspace.com/
- 27. Traffic Inspectors Charleshttp://www.charlesproxy.com/ HTTPWatch http://www.httpwatch.com/ Fiddler http://www.fiddler2.com/ Wireshark http://www.wireshark.org/
- 28. CSS & JavascriptMinifiers CSS YUI Compressor - http://developer.yahoo.com/yui/compressor/ CSS Tidy - http://csstidy.sourceforge.net/ Javascript YUI Compressor - http://developer.yahoo.com/yui/compressor/ JSMin - http://crockford.com/javascript/jsmin Closure - http://code.google.com/intl/pl/closure/compiler/
- 29. Optmising Images Generallist http://www.phpied.com/big-list-image-optimization-tools/ Yahoo Smush.it http://www.smushit.com Gifsicle http://www.lcdf.org/gifsicle/ PNG http://www.phpied.com/give-png-a-chance/
- 30. Image credits Slide1: © Chris-Håvard Berge 2009 - http://www.flickr.com/photos/chberge/3803475294/ Slide 2: © Dominique Archambault 2009 - http://www.flickr.com/photos/chezdom/3268236588/ Slide 4: © Chris Miller 2008 - http://www.flickr.com/photos/thatmushroom/2299645283/ S lides 5, 6, 7: StrangeLoop Networks - http://strangeloopnetworks.com/ Slide 8: © eko - http://www.flickr.com/photos/ekosystem/3117095951/ Slide 18: Google - http://www.google.co.uk/
Editor's Notes
- #5 Performance = How quickly something happens, i.e. whether it happens fast enough to satisfy users Scalability = Maintaining reliability and performance under load
- #7 Yahoo stats on the faster pages are the more users click
- #8 Amazon’s quote on how revenue falls as page load time falls Shopzilla
- #10 Water fall of http://guardian.co.uk produced by http://webpagetest.org 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
- #12 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! ( http://assets.en.oreilly.com/1/event/29/Beyond%20Gzipping%20Presentation.pdf ) 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
- #13 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 (smush.it, optipng, pngcrush etc) around Comparison of optimisers - http://www.phpied.com/give-png-a-chance / 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°
- #17 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. .domain.com http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ 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.
- #18 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
- #19 Use SpriteMe ( http:// spriteme.org / ) to automagically produce a set of sprites for an existing page
- #20 Javascript blocking rendering http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/