A talk on how to increase your website performance. Both server- and clientside techniques get attention

1. 6 /08/2 009 ting
2
elux mee
PHP Ben
Welkom!

2. r form ance
Websi te Pe
es
end te chniqu
t
nd fron
Back- a

3. Who am I?

4. Who are you?

6. What is this talk about?
Disclaimer: I’m no expert and still learning every day, most of my
knowledge is theoretically so please correct me!

7. Pukkelpop.be

8. Serverside & Clientside
Both deserve attention

9. rverside
Se
…
C oding,
e, Ca ching,
s
ling, Databa
Sca

10. ts
icates i rk in a
Sc aling of
opertyandle grow
m
a syste ing amo
ind
which unts of wo
A pr to h
ability ul manner
gracef

11. Scaling
Vertically Horizontally

12. Scaling Vertically
Add more resources to a single computer

13. Scaling Horizontally
Add more nodes to a distributed system

14. Scaling, the Google way

15. "Nobody builds servers as unreliably as we do"
Urs Hölzle, senior vice president for operations at Google

16. cd.com
www.xk
e
bas mization, Query optimization,
Data se opti
Databa
s
Indexe

17. Database optimization

18. Query optimization

19. Indexes

20. A couple of tips
More at http://forge.mysql.com/wiki/Top10SQLPerformanceTips

21. Scaling databases
Master / Slave setup Sharding
Master (write) Master
Slave (read) Slave (read) Even userId’s Uneven userId’s

22. Scaling databases
Master / Slave setup Sharding

23. Master / Slave setup

24. Sharding code example

25. cd.com
www.xk
hing
al
g origin earlier,
Cac
in
d uplicatcomputed
ction of data here or sive to fet
ch
A colle stored elsew ata is expen
values the original d
where

26. Basics of caching
DATA REQUEST
YES NO
CACHED AND
FRESH?
FETCH FROM CACHE FETCH FROM DATABASE
SAVE IN CACHE
RETURN DATA

27. Basics of caching: example

28. Three methods of caching
TTL Invalidation Updating

29. Caching: TTL

30. Caching: Invalidation

31. Caching: Updating

32. Caching types

33. Intermediate Cache
webserver cache server
Internet

34. Caching software, …

35. Memcached

36. Memcached: what?

37. Memcached: Who?

38. Memcached: Some figures
Netlog Wikipedia Facebook
http://www.slideshare.net/folke/netlog-what-we-learned-about-scalability-high-availability-430211
http://meta.wikimedia.org/wiki/Wikimedia_servers#Server_list
http://www.facebook.com/note.php?note_id=39391378919

39. C lient side
,…
ineers
ronte nd eng
r f
t ices fo
Be st prac

40. Why optimize clientside?
Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/

41. The 80/20 Rule

42. 0.295s

43. Parallel downloads

44. Parallel downloads

45. Best Practices

46. 1. Make fewer HTTP requests

47. 1. Make fewer HTTP requests
CSS Sprites
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px -140px}

48. 1. Make fewer HTTP requests
Inline images

49. 1. Make fewer HTTP requests
Combine CSS/JS

50. 2. Use a CDN

51. 3. Gzip components

52. 3. Gzip components

53. 4. Move CSS to the top

54. 4. Move JS to the bottom

55. 5. Minify JS and CSS

56. 6. Make dynamic images cacheable

57. 6. Make dynamic images cacheable
ETags Expires Headers

58. 6. Make dynamic images cacheable
First send the cache related headers

59. 6. Make dynamic images cacheable
Then generate an Etag and check the request

60. 6. Make dynamic images cacheable
Check the modified since request header

61. 6. Make dynamic images cacheable
And finally output the image if no cache match

62. 6. Make dynamic images cacheable

63. 7. Optimize images

64. 7. Anticipate updates

65. Tools ls for o
pt imizatio
n
Usefull too

66. Standalone

67. Firefox plugins