15. A Song for Europe Richard http://givepngachance.com
16.
17.
18.
19.
20.
21.
22.
23.
24. Thanks for listening… http://slideshare.net/andydavies/the-need-for-speed @andydavies Questions… Comments… Thoughts?
25.
26.
27.
28.
29.
30.
Editor's Notes
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 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
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
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°
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.
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:// spriteme.org / ) to automagically produce a set of sprites for an existing page
