Forgotten Art of 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 to talk about making websites faster
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

3. I’m here to talk about making websites faster
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 2011
Friday, 15 July 2011

5. Web performance is about “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 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 2011
Friday, 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 2011
Friday, 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 2011
Friday, 15 July 2011

15. YSlow - 35 rules of Web performance
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

16. Pagespeed - 6 principles 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 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 2011
Friday, 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 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 normal website
The Forgotten art of Web Performance
forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

22. I see things a 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 be proud 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 WPO important
“Slow websites are boring”
Slow websites are boring!
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

31. Customers are complaining about your site
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

32. Fast websites make more money
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 2011
Friday, 15 July 2011

34. WPO State of Nation
http://www.flickr.com/photos/nznationalparty/4436793708/
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

35. Homepage hall of shame
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 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 2011
Friday, 15 July 2011

39. Data on Google docs
http://tinyurl.com/homepageHOS2011
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 2011
Friday, 15 July 2011

41. Once upon a time...
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

42. Internet speeds were crap
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 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) Dynamic vs Static
The Forgotten art of Web Performance
forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

46. What is dynamic content?
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 to pre-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 out for 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) User perception
http://www.flickr.com/photos/jasongillyon/243909248/
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 2011
Friday, 15 July 2011

62. 1) Front end techniques
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 what users can see
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

65. Asynchronous JS loads content
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 loading of ads, no revenue loss
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

71. Lots of performance optimisations
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 2011
Friday, 15 July 2011

73. Rule 3) Reduce requests
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

74. Browser round trip will kill you...
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

75. Looking at a site at DSL speed
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

76. Looking at a site at office speed
The Forgotten Art of Web Performance
14th July 2011
Friday, 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 2011
Friday, 15 July 2011

78. Javascript and CSS Bundling
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 part of 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 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 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 it right
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

86. Westpac - 20 requests - 1 request reload
The Forgotten Art of Web Performance
14th July 2011
Friday, 15 July 2011

87. Rule 4) Change defaults
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 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 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