Front End Performance
          Ralph von der Heyden




Dienstag, 2. Juni 2009
/me

                Ruby on Rails developer
                Studied computer science and business administration
        ...
Front end performance matters...

                         Why?


Dienstag, 2. Juni 2009
For website operators




Dienstag, 2. Juni 2009
For website operators

              Fast websites


Dienstag, 2. Juni 2009
For website operators

 Happy customers


Dienstag, 2. Juni 2009
For website operators

More customers


Dienstag, 2. Juni 2009
For website operators

                     More money


Dienstag, 2. Juni 2009
For web consultants




Dienstag, 2. Juni 2009
For web consultants

                  Easy to learn


Dienstag, 2. Juni 2009
For web consultants

                          Big effect


Dienstag, 2. Juni 2009
For web consultants

                          Extented
                          portfolio
Dienstag, 2. Juni 2009
For web consultants

  More consulting
       jobs
Dienstag, 2. Juni 2009
Facts: The impact of user
          perceived performance

                Amazon: Sells 1% less stuff per 100ms more load...
What is the front end?


                         HTML         Everything beyond
                         generation   = f...
But I can tune the back end!

                Back end: 10% of loading time
                Front end: 90% of loading time...
But I can tune the back end!

                Back end: 10% of loading time    3s
                Front end: 90% of loadin...
But I can tune the back end!

                Back end: 10% of loading time    3s         2.85s
                Front end:...
But I can tune the back end!

                Back end: 10% of loading time    3s         2.85s
                Front end:...
How to do it?

                Fewer Requests
                Smaller Requests
                Speed up Requests




Diens...
Fewer
                         Requests

Dienstag, 2. Juni 2009
Fewer Requests:
          Join CSS and JavaScripts




Dienstag, 2. Juni 2009
Fewer Requests:
          Join CSS and JavaScripts
                <%=
stylesheet_link_tag
['layout',

                'pa...
Fewer Requests:
          Join CSS and JavaScripts
                <%=
stylesheet_link_tag
['layout',

                'pa...
Fewer Requests:
          Join CSS and JavaScripts

                                              e d !
                <%...
Fewer Requests:
          Sprite your images
                Background image             Size
                Position


...
Fewer Requests:
          Sprite your images
                Background image             Size
                Position


...
Fewer Requests:
          Sprite your images
                Background image             Size
                Position


...
Fewer Requests:
          Sprite your images
                Background image             Size
                Position


...
Fewer Requests:
          Sprite your images
                Background image             Size
                Position


...
Fewer Requests:
          Sprite your images
                Background image         Size
                Position




  ...
Fewer Requests:
          Sprite your images
                Background image            Size
                            ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change




Dienstag, 2. Ju...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change

                  ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change

                  ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change
                   ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change
                   ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change
                   ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change
                   ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change
                   ...
Fewer Requests:
          Far future expires header
                Static files (usually) don‘t change
                   ...
Fewer Requests:
          Far future expires header
                Conditional GETs are plugging up the queue
           ...
Fewer Requests:
          Revving filenames
                Reflect change in the URL
                File.mtime(quot;my.jsq...
Fewer Requests:
          Far future expires header




Dienstag, 2. Juni 2009
Fewer Requests:
          Far future expires header




Dienstag, 2. Juni 2009
Fewer Requests:
          Far future expires header
                                 e d !
                               ...
Smaller
                         Requests

Dienstag, 2. Juni 2009
Smaller Requests:
          gzip
                Enable gzipping for all text files
                Apache: mod_deflate
    ...
Smaller Requests:
          gzip

                                        g s
                Enable gzipping for all text...
Smaller Requests:
          Minify your JS and CSS
                Strip comments, whitespace etc.
                Rails: ...
Smaller Requests:
          Minify your JS and CSS
                                          g s
                         ...
Smaller Requests:
          Know your images
                PNG is usually smaller than GIF when optimized*
             ...
Smaller Requests:
          Know your images


                Total page weight: 331 KB
                Images: 286 KB


...
Smaller Requests:
          Know your images

                                         g s
                               ...
Speed up
                         Requests

Dienstag, 2. Juni 2009
Speed up requests:
          Domain sharding
                Most browsers load 2 files per host
                Multiple d...
Speed up requests:
          Domain sharding
                         html

                   image
                   im...
Speed up requests:
          Domain sharding
                          html

                         image
              ...
Speed up requests:
          Content Delivery Network
                                              Rails
                ...
Speed up requests:
          Content Delivery Network
                                                      Rails
        ...
Speed up requests:
          Content Delivery Network
                                                              Rails
...
Speed up requests:
          Content Delivery Network
                                                                    ...
Weapon of
                          choice

Dienstag, 2. Juni 2009
Weapon of choice:
          Firebug and YSlow
                Performance Grade
                Shows your weak spots
    ...
Weapon of choice:
          Firebug and YSlow




Dienstag, 2. Juni 2009
Where to
                          start?

Dienstag, 2. Juni 2009
Where to start:
          Priorities
                Start with optimizations that...
                         Avoid reque...
Where to start:
          Priorities
                Start with optimizations that...
                         Avoid reque...
Where to start:
          Priorities
                Start with optimizations that...
                         Avoid reque...
Where to start:
          Priorities
                Start with optimizations that...
                         Avoid reque...
SSL & Caching                               ETags

                                    Redirects


                       ...
Twitter @ralph
             http://rvdh.de

Dienstag, 2. Juni 2009
Thank you for your
                       kind attention!



Dienstag, 2. Juni 2009
Fewer Requests:
          SSL and https
                SSL: Loading http assets from a https page: Warning!

            ...
Fewer Requests:
          Avoid redirects
                Redirect to asset: breaks caching
                Redirect to ht...
Upcoming SlideShare
Loading in …5
×

Front end performance (RailsWayCon 2009 short talk)

1,996 views
1,879 views

Published on

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
  • about front to end
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,996
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
76
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Front end performance (RailsWayCon 2009 short talk)

  1. 1. Front End Performance Ralph von der Heyden Dienstag, 2. Juni 2009
  2. 2. /me Ruby on Rails developer Studied computer science and business administration Working at XING (http://xing.com) Dienstag, 2. Juni 2009
  3. 3. Front end performance matters... Why? Dienstag, 2. Juni 2009
  4. 4. For website operators Dienstag, 2. Juni 2009
  5. 5. For website operators Fast websites Dienstag, 2. Juni 2009
  6. 6. For website operators Happy customers Dienstag, 2. Juni 2009
  7. 7. For website operators More customers Dienstag, 2. Juni 2009
  8. 8. For website operators More money Dienstag, 2. Juni 2009
  9. 9. For web consultants Dienstag, 2. Juni 2009
  10. 10. For web consultants Easy to learn Dienstag, 2. Juni 2009
  11. 11. For web consultants Big effect Dienstag, 2. Juni 2009
  12. 12. For web consultants Extented portfolio Dienstag, 2. Juni 2009
  13. 13. For web consultants More consulting jobs Dienstag, 2. Juni 2009
  14. 14. Facts: The impact of user perceived performance Amazon: Sells 1% less stuff per 100ms more loading time Google: 20% less traffic on the search page after increasing the load time by 500ms Dienstag, 2. Juni 2009
  15. 15. What is the front end? HTML Everything beyond generation = front end Dienstag, 2. Juni 2009
  16. 16. But I can tune the back end! Back end: 10% of loading time Front end: 90% of loading time Assume you could double the speed of either one Dienstag, 2. Juni 2009
  17. 17. But I can tune the back end! Back end: 10% of loading time 3s Front end: 90% of loading time 3s Assume you could double the speed of either one Dienstag, 2. Juni 2009
  18. 18. But I can tune the back end! Back end: 10% of loading time 3s 2.85s Front end: 90% of loading time 3s Assume you could double the speed of either one Dienstag, 2. Juni 2009
  19. 19. But I can tune the back end! Back end: 10% of loading time 3s 2.85s Front end: 90% of loading time 3s 1.65s Assume you could double the speed of either one Dienstag, 2. Juni 2009
  20. 20. How to do it? Fewer Requests Smaller Requests Speed up Requests Dienstag, 2. Juni 2009
  21. 21. Fewer Requests Dienstag, 2. Juni 2009
  22. 22. Fewer Requests: Join CSS and JavaScripts Dienstag, 2. Juni 2009
  23. 23. Fewer Requests: Join CSS and JavaScripts <%=
stylesheet_link_tag
['layout',
 'pagination'],
:media
=>
quot;screen,
 projectionquot;,
:cache
=>
quot;stylequot;
%> <%=
javascript_include_tag(['prototype',
 'application'],
:cache
=>
true)
%> Only 1 GET request in production RailsWayCon Startpage: 5 JS files, 8 CSS files Dienstag, 2. Juni 2009
  24. 24. Fewer Requests: Join CSS and JavaScripts <%=
stylesheet_link_tag
['layout',
 'pagination'],
:media
=>
quot;screen,
 projectionquot;,
:cache
=>
quot;stylequot;
%> <%=
javascript_include_tag(['prototype',
 'application'],
:cache
=>
true)
%> Only 1 GET request in production X RailsWayCon Startpage: X JS files, 8 CSS files 5 ⇓ ⇓ 2 1 Dienstag, 2. Juni 2009
  25. 25. Fewer Requests: Join CSS and JavaScripts e d ! <%=
stylesheet_link_tag
['layout',
 av 'pagination'],
:media
=>
quot;screen,
 s s projectionquot;,
:cache
=>
quot;stylequot;
%> e s t <%=
javascript_include_tag(['prototype',
 q u 'application'],
:cache
=>
true)
%> e 0 r Only 1 GET request in production 1 X X RailsWayCon Startpage: 5 JS files, 8 CSS files ⇓ ⇓ 2 1 Dienstag, 2. Juni 2009
  26. 26. Fewer Requests: Sprite your images Background image Size Position RailsWayCon: more than 30 images < 5K Dienstag, 2. Juni 2009
  27. 27. Fewer Requests: Sprite your images Background image Size Position RailsWayCon: more than 30 images < 5K Dienstag, 2. Juni 2009
  28. 28. Fewer Requests: Sprite your images Background image Size Position RailsWayCon: more than 30 images < 5K Dienstag, 2. Juni 2009
  29. 29. Fewer Requests: Sprite your images Background image Size Position RailsWayCon: more than 30 images < 5K Dienstag, 2. Juni 2009
  30. 30. Fewer Requests: Sprite your images Background image Size Position RailsWayCon: more than 30 images < 5K Dienstag, 2. Juni 2009
  31. 31. Fewer Requests: Sprite your images Background image Size Position 1 Sprite RailsWayCon: more than ⎯⎯⎯⎯ < 5K 30 images Dienstag, 2. Juni 2009
  32. 32. Fewer Requests: Sprite your images Background image Size e d ! Position s av st s q u e re 3 0 1 Sprite RailsWayCon: more than ⎯⎯⎯⎯ < 5K 30 images Dienstag, 2. Juni 2009
  33. 33. Fewer Requests: Far future expires header Static files (usually) don‘t change Dienstag, 2. Juni 2009
  34. 34. Fewer Requests: Far future expires header Static files (usually) don‘t change C Dienstag, 2. Juni 2009
  35. 35. Fewer Requests: Far future expires header Static files (usually) don‘t change C S Dienstag, 2. Juni 2009
  36. 36. Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S Dienstag, 2. Juni 2009
  37. 37. Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S Here you go! file Dienstag, 2. Juni 2009
  38. 38. Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file Dienstag, 2. Juni 2009
  39. 39. Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file C S second visit file Dienstag, 2. Juni 2009
  40. 40. Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file Gimme file, if fresher than mine C S second visit file Dienstag, 2. Juni 2009
  41. 41. Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file Gimme file, if fresher than mine C S second visit 304 Not Modified file Dienstag, 2. Juni 2009
  42. 42. Fewer Requests: Far future expires header Conditional GETs are plugging up the queue Avoid Conditional GETs altogether Expires: Thu, 27 May 2010 20:00:00 GMT Cache-Control: max-age=31536000 <filesmatch quot;.(jpg|gif|png|css|js)$quot;> ExpiresActive on ExpiresDefault quot;access plus 1 yearquot; </filesmatch> Dienstag, 2. Juni 2009
  43. 43. Fewer Requests: Revving filenames Reflect change in the URL File.mtime(quot;my.jsquot;).to_i_to_s /javascripts/my.js?1242765640 Also: Be careful with CSS images Disable ETags for static files! Dienstag, 2. Juni 2009
  44. 44. Fewer Requests: Far future expires header Dienstag, 2. Juni 2009
  45. 45. Fewer Requests: Far future expires header Dienstag, 2. Juni 2009
  46. 46. Fewer Requests: Far future expires header e d ! v s) sa ew s vi st age e p u e q iv re cut 0 nse 7 co ~ r (fo Dienstag, 2. Juni 2009
  47. 47. Smaller Requests Dienstag, 2. Juni 2009
  48. 48. Smaller Requests: gzip Enable gzipping for all text files Apache: mod_deflate RailsWayCon: without gzip 169K, with gzip 54K Dienstag, 2. Juni 2009
  49. 49. Smaller Requests: gzip g s Enable gzipping for all text files a Apache: mod_deflate v in s % tfi le s RailsWayCon: without gzip 169K, with gzip 54K 6 8 x r te fo Dienstag, 2. Juni 2009
  50. 50. Smaller Requests: Minify your JS and CSS Strip comments, whitespace etc. Rails: asset_packager plugin RailsWayCon: 151K -> 108K Dienstag, 2. Juni 2009
  51. 51. Smaller Requests: Minify your JS and CSS g s in Strip comments, whitespace etc. sav Rails: asset_packager plugin S .5 % RailsWayCon: 151K -> 108K d J 28 a n C S S f o r Dienstag, 2. Juni 2009
  52. 52. Smaller Requests: Know your images PNG is usually smaller than GIF when optimized* Strip JPG meta data and thumbnails* Use smush.it (http://smush.it) to show optimization potential *Mac users: PNGpong, ImageOptim Dienstag, 2. Juni 2009
  53. 53. Smaller Requests: Know your images Total page weight: 331 KB Images: 286 KB Dienstag, 2. Juni 2009
  54. 54. Smaller Requests: Know your images g s av in % s g e .6 p Total page weight: 331 KB a 17 otal Images: 286 KB o r t f Dienstag, 2. Juni 2009
  55. 55. Speed up Requests Dienstag, 2. Juni 2009
  56. 56. Speed up requests: Domain sharding Most browsers load 2 files per host Multiple domains for static content (CNAMEs) Rails: Set 4 asset hosts 8 parallel downloads config.action_controller.asset_host 
=
quot;http://assets%d.example.comquot; Dienstag, 2. Juni 2009
  57. 57. Speed up requests: Domain sharding html image image image image image image image image image image time Dienstag, 2. Juni 2009
  58. 58. Speed up requests: Domain sharding html image image image image image image image image image image time Dienstag, 2. Juni 2009
  59. 59. Speed up requests: Content Delivery Network Rails S files Edge C S USA Edge USA C S Euro Euro Edge C S Asia Asia Dienstag, 2. Juni 2009
  60. 60. Speed up requests: Content Delivery Network Rails S files Edge C S files USA Edge USA C S Euro Euro files Edge C S files Asia Asia Dienstag, 2. Juni 2009
  61. 61. Speed up requests: Content Delivery Network Rails S files HTML HT M Edge L C S files USA Edge USA C L S M HT Euro Euro files Edge C S files Asia Asia Dienstag, 2. Juni 2009
  62. 62. Speed up requests: Content Delivery Network Rails S files HTML HT M Edge L C files S files USA files Edge USA C L S M HT Euro Euro files Edge C files S files Asia Asia Dienstag, 2. Juni 2009
  63. 63. Weapon of choice Dienstag, 2. Juni 2009
  64. 64. Weapon of choice: Firebug and YSlow Performance Grade Shows your weak spots Hints how to improve Other performance related tools Dienstag, 2. Juni 2009
  65. 65. Weapon of choice: Firebug and YSlow Dienstag, 2. Juni 2009
  66. 66. Where to start? Dienstag, 2. Juni 2009
  67. 67. Where to start: Priorities Start with optimizations that... Avoid requests Make requests smaller Speed up requests the most! Trade off between ease of deployment and efficiency Dienstag, 2. Juni 2009
  68. 68. Where to start: Priorities Start with optimizations that... Avoid requests Joining, Sprites, Expires Header Make requests smaller Speed up requests the most! Trade off between ease of deployment and efficiency Dienstag, 2. Juni 2009
  69. 69. Where to start: Priorities Start with optimizations that... Avoid requests Joining, Sprites, Expires Header Make requests smaller gzip, image compression Speed up requests the most! Trade off between ease of deployment and efficiency Dienstag, 2. Juni 2009
  70. 70. Where to start: Priorities Start with optimizations that... Avoid requests Joining, Sprites, Expires Header Make requests smaller gzip, image compression Speed up requests domain sharding, cdn the most! Trade off between ease of deployment and efficiency Dienstag, 2. Juni 2009
  71. 71. SSL & Caching ETags Redirects Questions? gzipping HARD! Script loading Proxies Dienstag, 2. Juni 2009
  72. 72. Twitter @ralph http://rvdh.de Dienstag, 2. Juni 2009
  73. 73. Thank you for your kind attention! Dienstag, 2. Juni 2009
  74. 74. Fewer Requests: SSL and https SSL: Loading http assets from a https page: Warning! DHH suggests (Google for „37signals mixed content“): config.action_controller.asset_host = Proc.new do |source, request| non_ssl_host = quot;http://asset%d.example.comquot; ssl_host = quot;https://asset1.example.comquot; if request.ssl? case when source =~ /.js$/ ssl_host when request.headers[quot;USER_AGENTquot;] =~ /(Safari)/ non_ssl_host when request.headers[quot;USER_AGENTquot;] =~ /Firefox/ && source =~ /^/images/ non_ssl_host else ssl_host end else non_ssl_host end end Dienstag, 2. Juni 2009
  75. 75. Fewer Requests: Avoid redirects Redirect to asset: breaks caching Redirect to html: Delays loading of assets Always add Trailing-Slash to URLs Dienstag, 2. Juni 2009

×