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

  • 4,068 views
Uploaded on

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,068
On Slideshare
3,920
From Embeds
148
Number of Embeds
6

Actions

Shares
Downloads
59
Comments
1
Likes
5

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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