6 /08/2 009       ting
2
           elux mee
PHP   Ben
      Welkom!
r form ance
Websi te Pe
                                    es
                      end te chniqu
                     t
...
Who am I?
Who are you?
What is this talk about?




Disclaimer: I’m no expert and still learning every day, most of my
        knowledge is theor...
Pukkelpop.be
Serverside & Clientside
     Both deserve attention
rverside
                      Se
                                       …
                              C oding,
        ...
ts
                                       icates i rk in a
Sc aling        of
        opertyandle grow
                   ...
Scaling
   Vertically   Horizontally
Scaling Vertically
             Add more resources to a single computer
Scaling Horizontally
             Add more nodes to a distributed system
Scaling, the Google way
"Nobody builds servers as unreliably as we do"
Urs Hölzle, senior vice president for operations at Google
cd.com
                           www.xk




       e
    bas mization, Query optimization,
Data se opti
      Databa
    ...
Database optimization
Query optimization
Indexes
A couple of tips




More at http://forge.mysql.com/wiki/Top10SQLPerformanceTips
Scaling databases
     Master / Slave setup                      Sharding

           Master (write)                      ...
Scaling databases
 Master / Slave setup   Sharding
Master / Slave setup
Sharding code example
cd.com
                                   www.xk




   hing
                                             al
             ...
Basics of caching
                         DATA REQUEST




          YES                                    NO
          ...
Basics of caching: example
Three methods of caching
  TTL     Invalidation   Updating
Caching: TTL
Caching: Invalidation
Caching: Updating
Caching types
Intermediate Cache
                webserver   cache server




                             Internet
Caching software, …
Memcached
Memcached: what?
Memcached: Who?
Memcached: Some figures
       Netlog                             Wikipedia                             Facebook




http:...
C lient side
                                                ,…
                                          ineers
         ...
Why optimize clientside?


Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
The 80/20 Rule
0.295s
Parallel downloads
Parallel downloads
Best Practices
1. Make fewer HTTP requests
1. Make fewer HTTP requests

   CSS Sprites




                 #nav li a {background-image:url('../img/image_nav.gif')}
...
1. Make fewer HTTP requests

   Inline images
1. Make fewer HTTP requests

  Combine CSS/JS
2. Use a CDN
3. Gzip components
3. Gzip components
4. Move CSS to the top
4. Move JS to the bottom
5. Minify JS and CSS
6. Make dynamic images cacheable
6. Make dynamic images cacheable

     ETags         Expires Headers
6. Make dynamic images cacheable
                First send the cache related headers
6. Make dynamic images cacheable
            Then generate an Etag and check the request
6. Make dynamic images cacheable
              Check the modified since request header
6. Make dynamic images cacheable
           And finally output the image if no cache match
6. Make dynamic images cacheable
7. Optimize images
7. Anticipate updates
Tools           ls for o
                         pt imizatio
                                    n

    Usefull too
Standalone
Firefox plugins
Website Performance: server- and clientside techniques
Website Performance: server- and clientside techniques
Website Performance: server- and clientside techniques
Upcoming SlideShare
Loading in...5
×

Website Performance: server- and clientside techniques

2,722

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,722
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×