Downloaded 110 times
Uploaded byJohn Clegg
Web performance at WDCNZ
This document discusses the importance of web performance optimization. It notes that web performance is about driving more traffic to a site by making sites faster. Optimization requires both front-end optimizations like minimizing page size and back-end optimizations like improving server response times. The document provides examples of tools that can help with optimization and shows how web performance has improved over time but that some sites still have room for improvement.
![Client-side Web Performance Optimization [paper]](https://cdn.slidesharecdn.com/ss_thumbnails/2011-01-18jakob-schroeterclient-side-optimization-110125033543-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Web performance at WDCNZ
- 1. The Forgotten Art of Web Performance http://www.flickr.com/photos/mhzmaster/9659478 The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 2. I’m here totalk about making websites faster The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 3. I’m here totalk about making websites faster The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 4. Web performance isabout driving more traffic to your site http://www.flickr.com/photos/darrentunnicliff/37179763 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 5. Web performance isabout “DevOps" The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 6. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Web Performance Optimisation Basics The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 7. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Web performance comes from combination of “back-end” and “front-end” optimisations The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 8. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware 95% of download time comes from “Front-end” The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 9. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware You want to deliver content as fast as possible... The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 10. FRONT END BACK END HTML Network Requests CSS Web server Javascript Application Images Database Third party O/S Hardware You can maximise the requests you can The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 11. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Minimise by minimising request times of your stack The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 12. If Average requesttakes 50ms to serve and 200 “agents” => 4000 requests per second The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 13. How do Ifix? http://www.flickr.com/photos/lenore-m/251580065 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 14. Lots of toolsto help you fix your site http://www.flickr.com/photos/lenore-m/251580065 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 15. YSlow - 35rules of Web performance The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 16. Pagespeed - 6principles for speeding up The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 17. Aptimize.com The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 18. The difference webperformance can make is huge http://www.flickr.com/photos/thebusybrain/2492945 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 19. It seems thatsome sites haven’t evolved The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 20. For web performance,some sites are stuck in the 90’s http://www.dailystab.com/blog/wp-content/uploads/2007/12/spice-girls-vancouver-lg.jpg The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 21. Here’s a normalwebsite The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 22. I see thingsa little differently The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 23. No HTTP Compression The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 24. Poor expiry settings The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 25. No CSS /JS bundling The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 26. No Spriting The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 27. Would you beproud of this ? The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 28. 1.2Mb, 133 requests,21 JS files, 3 CSS files The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 29. Why is WPO important? The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 30. Why is WPOimportant “Slow websites are boring” Slow websites are boring! The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 31. Customers are complainingabout your site The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 32. Fast websites makemore money The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 33. “We see adirect correlation between the speed of our services and our bottom line. Our customers seem inclined to spend a set time on our site per session – the more pages they can view in that time, the more they see and buy, and the more we earn.” John MacDonald - CTO Trade Me 2006 Time is Money The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 34. WPO State ofNation http://www.flickr.com/photos/nznationalparty/4436793708/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 35. Homepage hall ofshame 2011 160 sites Home broadband vs Office broadband The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 36. Key findings Office BBand Home BBand Ave page Ave page Ave home load time load time page size 6.01s 12.5s 665K The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 37. Whoʼs the fastest 1.17s Telecom 1.62s Zenbu 1.23s DOL 1.72s Geonet 1.49s Snipesoft 1.73s School.nz 1.58s Auckland Uni 1.78s Maxx 1.59 Massey Uni 1.59 Westpac The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 38. Whoʼs the SL O W E S T 26.8s Skykiwi 16.3s interest.co.nz 20.9s The Standard 15.1s 3 News 20.1s iStars 15.1s The Big Idea 17.2s WhaleOil 14.7s Readers Digest 16.4s NZ Yahoo 14.3s Stuff The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 39. Data on Googledocs http://tinyurl.com/homepageHOS2011 The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 40. Forgotten art ofWeb performance http://www.flickr.com/photos/23927132@N05/2500055549/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 41. Once upon atime... The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 42. Internet speeds werecrap The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 43. Had to learnto scale the hard way http://www.flickr.com/photos/kitby/5414374130/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 44. 4 principles to help you scale your site The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 45. Rule 1) Dynamicvs Static The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 46. What is dynamiccontent? The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 47. 1 hour ? 5 minutes ? 1 minute ? Text 30 minutes ? Almost everything is static for a time The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 48. We used topre-generate content The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 49. 2000+ req /sec vs 30 req / sec Web servers love static content The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 50. 1) Pre-generate content http://www.flickr.com/photos/aquariawintersoul/4162431443/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 51. 2) Cache everything http://www.flickr.com/photos/markusnl/5563657463/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 52. Database views Memcache http://memcached.org Varnish / Squid http://www.varnish-cache.org/ 2) Cache everything The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 53. 2) Cache everything The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 54. Google likes Varnish The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 55. 3) Watch outfor 3rd party widgets The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 56. Local heroes: geonet.org.nz The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 57. Pages are static- server generates page on earthquake event The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 58. Built own CDN+ plus lots of other stuff The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 59. Handles 12,000 req/sec at peak The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 60. Rule 2) Userperception http://www.flickr.com/photos/jasongillyon/243909248/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 61. We used todivide 50 row table into tables of 10 rows http://www.flickr.com/photos/silkroadcollection/4886903818/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 62. 1) Front endtechniques The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 63. Delay JS loading http://www.flickr.com/photos/sbisson/3852086117/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 64. Load only whatusers can see The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 65. Asynchronous JS loadscontent Who’s doing it right The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 66. Google image search Who’s doing it right The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 67. Twitter web client Who’s doing it right The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 68. Local heroes: geekzone.co.nz The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 69. Uses Aptimize WAX The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 70. Asychronous JS loadingof ads, no revenue loss The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 71. Lots of performanceoptimisations The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 72. Site loads injust over 2 sec with lots of 3rd party stuff The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 73. Rule 3) Reducerequests The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 74. Browser round tripwill kill you... The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 75. Looking at asite at DSL speed The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 76. Looking at asite at office speed The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 77. 80+ images toserve 30ms local 270ms overseas Up to 10 times more effort to serve content When the earthquake strikes... The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 78. Javascript and CSSBundling http://www.flickr.com/photos/ferguson666/3605271302/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 79. YUI Compressor http://developer.yahoo.com/yui/compressor/ Google Closure http://code.google.com/closure/ Every framework has tools Bundling tools The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 80. Make bundling partof your build process http://www.flickr.com/photos/hifumiyo/4021034029/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 81. Image Spriting http://www.flickr.com/photos/roadsidepictures/1435060357/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 82. Sprite me http://spriteme.org Smart sprites http://csssprites.org/ spriteme + smartsprites The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 83. Guide for numberof page requests < 20 Elite 20-30 Excellent 30-60 Average 60-80 Below average 80-100 Poor >100 My eyes are bleeding How many requests ??? The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 84. Static image expiry http://www.flickr.com/photos/newtown_grafitti/5131604440/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 85. Who’s doing itright The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 86. Westpac - 20requests - 1 request reload The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 87. Rule 4) Changedefaults http://www.flickr.com/photos/deadhorse/367716072/ The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 88. ## ## Server-Pool Size Regulation (MPM specific) ## # prefork MPM # StartServers: number of server processes to start # MinSpareServers: minimum number of server processes which are kept spare # MaxSpareServers: maximum number of server processes which are kept spare # MaxClients: maximum number of server processes allowed to start # MaxRequestsPerChild: maximum number of requests a server process serves <IfModule mpm_prefork_module> StartServers 5 MinSpareServers 5 MaxSpareServers 10 MaxClients 150 MaxRequestsPerChild 0 </IfModule> # worker MPM # StartServers: initial number of server processes to start # MaxClients: maximum number of simultaneous client connections # MinSpareThreads: minimum number of worker threads which are kept spare # MaxSpareThreads: maximum number of worker threads which are kept spare # ThreadsPerChild: constant number of worker threads in each server process # MaxRequestsPerChild: maximum number of requests a server process serves <IfModule mpm_worker_module> StartServers 2 MaxClients 150 MinSpareThreads 25 MaxSpareThreads 75 ThreadsPerChild 25 MaxRequestsPerChild 0 </IfModule> Webserver settings The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 89. Apache has 150 clients as default You can change it! Webserver settings The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 90. • Turn oncompression • Increase of number of web clients • Set expiry for images Switch to better webserver ;) Tweak settings The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 91. Server browning out 8Gb ram Apache 250 clients running PHP 4Gb Ram free What to do ?? Vendor says add more servers True story - http server The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 92. my-small.cnf # This is for a system with little memory (<= 64M) where MySQL is only used my-medium.cnf # This is for a system with little memory (32M - 64M) where MySQL plays my-large.cnf # This is for a large system with memory = 512M where the system runs mainly my-huge.cnf # This is for a large system with memory of 1G-2G where the system runs mainly Database settings The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 93. http://www.flickr.com/photos/jayneandd/4450623309/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 94. Summary 1) Use more static content - Pre-generate - Cache everything - Minimise 3rd party widgets 2) Improve browser - Defer JS loading - Asychronous JS - Delay beyond the fold The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 95. Summary 3) Minimise requests - Bundle JS + CSS files - Spriting - Set 2 year expiry for assets 4) Change defaults - Change defaults for Webserver and DB - Tweet to fit your server memory The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 96. Video Final thought - Sites are around 550K The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 97. Video Final thought - Sites are around 550K The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 98. Questions The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 99. Web testing Global Performance testing + Videos www.webpagetest.org Load testing software - (Linux) Siege + Bombard Been using for transaction testing of e-commerce buying http://www.joedog.org/index/siege-home The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011
- 100. Thank you The Forgotten Art of Web Performance 14th July 2011 Friday, 15 July 2011