Website Performance: server- and clientside techniques
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Website Performance: server- and clientside techniques

on

  • 4,012 views

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

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

Statistics

Views

Total Views
4,012
Views on SlideShare
3,864
Embed Views
148

Actions

Likes
5
Downloads
59
Comments
1

6 Embeds 148

http://www.inventis.be 130
http://intranet 11
http://www.slideshare.net 3
http://www.linkedin.com 2
http://209.85.229.132 1
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Website Performance: server- and clientside techniques Presentation Transcript

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