Web performance at WDCNZ

10,422 views
8,893 views

Published on

Forgotten Art of Web performance at WDCNZ

Published in: Technology, Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
10,422
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
101
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

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 2011Friday, 15 July 2011
  2. I’m here to talk about making websites faster The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  3. I’m here to talk about making websites faster The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  4. Web performance is about 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 2011Friday, 15 July 2011
  5. Web performance is about “DevOps" The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 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 2011Friday, 15 July 2011
  8. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware95% of download time comes from “Front-end” The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 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 2011Friday, 15 July 2011
  11. FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Minimiseby minimising request times of your stack The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  12. If Average request takes 50ms to serve and 200 “agents” => 4000 requests per second The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  13. How do I fix? http://www.flickr.com/photos/lenore-m/251580065 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  14. Lots of tools to 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 2011Friday, 15 July 2011
  15. YSlow - 35 rules of Web performance The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  16. Pagespeed - 6 principles for speeding up The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  17. Aptimize.com The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  18. The difference web performance can make is huge http://www.flickr.com/photos/thebusybrain/2492945 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  19. It seems that some sites haven’t evolved The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  21. Here’s a normal website The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  22. I see things a little differently The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  23. No HTTP Compression The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  24. Poor expiry settings The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  25. No CSS / JS bundling The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  26. No Spriting The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  27. Would you be proud of this ? The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  29. Why is WPO important? The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  30. Why is WPO important “Slow websites are boring” Slow websites are boring! The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  31. Customers are complaining about your site The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  32. Fast websites make more money The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  33. “We see a direct 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 2011Friday, 15 July 2011
  34. WPO State of Nation http://www.flickr.com/photos/nznationalparty/4436793708/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  35. Homepage hall of shame 2011 160 sites Home broadband vs Office broadband The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 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 2011Friday, 15 July 2011
  38. Whoʼs the S L 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 2011Friday, 15 July 2011
  39. Data on Google docs http://tinyurl.com/homepageHOS2011 The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  40. Forgotten art of Web performance http://www.flickr.com/photos/23927132@N05/2500055549/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  41. Once upon a time... The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  42. Internet speeds were crap The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  43. Had to learn to scale the hard way http://www.flickr.com/photos/kitby/5414374130/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  44. 4 principles to help you scale your site The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  45. Rule 1) Dynamic vs Static The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  46. What is dynamic content? The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  48. We used to pre-generate content The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  49. 2000+ req / sec vs 30 req / sec Web servers love static content The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  51. 2) Cache everything http://www.flickr.com/photos/markusnl/5563657463/ The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  53. 2) Cache everything The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  54. Google likes Varnish The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  55. 3) Watch out for 3rd party widgets The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  56. Local heroes: geonet.org.nz The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  57. Pages are static - server generates page on earthquake event The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  58. Built own CDN + plus lots of other stuff The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  59. Handles 12,000 req/sec at peak The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  60. Rule 2) User perception http://www.flickr.com/photos/jasongillyon/243909248/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  61. We used to divide 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 2011Friday, 15 July 2011
  62. 1) Front end techniques The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  63. Delay JS loading http://www.flickr.com/photos/sbisson/3852086117/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  64. Load only what users can see The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  65. Asynchronous JS loads content Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  66. Google image search Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  67. Twitter web client Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  68. Local heroes: geekzone.co.nz The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  69. Uses Aptimize WAX The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  70. Asychronous JS loading of ads, no revenue loss The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  71. Lots of performance optimisations The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  72. Site loads in just over 2 sec with lots of 3rd party stuff The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  73. Rule 3) Reduce requests The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  74. Browser round trip will kill you... The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  75. Looking at a site at DSL speed The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  76. Looking at a site at office speed The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  77. 80+ images to serve 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 2011Friday, 15 July 2011
  78. Javascript and CSS Bundling http://www.flickr.com/photos/ferguson666/3605271302/ The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  80. Make bundling part of your build process http://www.flickr.com/photos/hifumiyo/4021034029/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  81. Image Spriting http://www.flickr.com/photos/roadsidepictures/1435060357/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  82. Sprite me http://spriteme.org Smart sprites http://csssprites.org/ spriteme + smartsprites The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  83. Guide for number of 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 2011Friday, 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 2011Friday, 15 July 2011
  85. Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  86. Westpac - 20 requests - 1 request reload The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  87. Rule 4) Change defaults http://www.flickr.com/photos/deadhorse/367716072/ The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  89. Apache has 150 clients as default You can change it! Webserver settings The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  90. • Turn on compression • Increase of number of web clients • Set expiry for images Switch to better webserver ;) Tweak settings The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 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 2011Friday, 15 July 2011
  93. http://www.flickr.com/photos/jayneandd/4450623309/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 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 2011Friday, 15 July 2011
  96. Video Final thought - Sites are around 550K The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  97. Video Final thought - Sites are around 550K The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011
  98. Questions The Forgotten Art of Web Performance 14th July 2011Friday, 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 2011Friday, 15 July 2011
  100. Thank you The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

×