Website Performance: server- and clientside techniques

2,940 views
2,816 views

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
2,940
On SlideShare
0
From Embeds
0
Number of Embeds
151
Actions
Shares
0
Downloads
61
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Website Performance: server- and clientside techniques

  1. 1. 6 /08/2 009 ting 2 elux mee PHP Ben Welkom!
  2. 2. r form ance Websi te Pe es end te chniqu t nd fron Back- a
  3. 3. Who am I?
  4. 4. Who are you?
  5. 5. 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!
  6. 6. Pukkelpop.be
  7. 7. Serverside & Clientside Both deserve attention
  8. 8. rverside Se … C oding, e, Ca ching, s ling, Databa Sca
  9. 9. 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
  10. 10. Scaling Vertically Horizontally
  11. 11. Scaling Vertically Add more resources to a single computer
  12. 12. Scaling Horizontally Add more nodes to a distributed system
  13. 13. Scaling, the Google way
  14. 14. "Nobody builds servers as unreliably as we do" Urs Hölzle, senior vice president for operations at Google
  15. 15. cd.com www.xk e bas mization, Query optimization, Data se opti Databa s Indexe
  16. 16. Database optimization
  17. 17. Query optimization
  18. 18. Indexes
  19. 19. A couple of tips More at http://forge.mysql.com/wiki/Top10SQLPerformanceTips
  20. 20. Scaling databases Master / Slave setup Sharding Master (write) Master Slave (read) Slave (read) Even userId’s Uneven userId’s
  21. 21. Scaling databases Master / Slave setup Sharding
  22. 22. Master / Slave setup
  23. 23. Sharding code example
  24. 24. 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
  25. 25. Basics of caching DATA REQUEST YES NO CACHED AND FRESH? FETCH FROM CACHE FETCH FROM DATABASE SAVE IN CACHE RETURN DATA
  26. 26. Basics of caching: example
  27. 27. Three methods of caching TTL Invalidation Updating
  28. 28. Caching: TTL
  29. 29. Caching: Invalidation
  30. 30. Caching: Updating
  31. 31. Caching types
  32. 32. Intermediate Cache webserver cache server Internet
  33. 33. Caching software, …
  34. 34. Memcached
  35. 35. Memcached: what?
  36. 36. Memcached: Who?
  37. 37. 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
  38. 38. C lient side ,… ineers ronte nd eng r f t ices fo Be st prac
  39. 39. Why optimize clientside? Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
  40. 40. The 80/20 Rule
  41. 41. 0.295s
  42. 42. Parallel downloads
  43. 43. Parallel downloads
  44. 44. Best Practices
  45. 45. 1. Make fewer HTTP requests
  46. 46. 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}
  47. 47. 1. Make fewer HTTP requests Inline images
  48. 48. 1. Make fewer HTTP requests Combine CSS/JS
  49. 49. 2. Use a CDN
  50. 50. 3. Gzip components
  51. 51. 3. Gzip components
  52. 52. 4. Move CSS to the top
  53. 53. 4. Move JS to the bottom
  54. 54. 5. Minify JS and CSS
  55. 55. 6. Make dynamic images cacheable
  56. 56. 6. Make dynamic images cacheable ETags Expires Headers
  57. 57. 6. Make dynamic images cacheable First send the cache related headers
  58. 58. 6. Make dynamic images cacheable Then generate an Etag and check the request
  59. 59. 6. Make dynamic images cacheable Check the modified since request header
  60. 60. 6. Make dynamic images cacheable And finally output the image if no cache match
  61. 61. 6. Make dynamic images cacheable
  62. 62. 7. Optimize images
  63. 63. 7. Anticipate updates
  64. 64. Tools ls for o pt imizatio n Usefull too
  65. 65. Standalone
  66. 66. Firefox plugins

×