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. What is the front end?
HTML Everything beyond
generation = front end
Dienstag, 2. Juni 2009
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. 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. 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. 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. How to do it?
Fewer Requests
Smaller Requests
Speed up Requests
Dienstag, 2. Juni 2009
22. Fewer Requests:
Join CSS and JavaScripts
Dienstag, 2. Juni 2009
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. 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. 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. Fewer Requests:
Sprite your images
Background image Size
Position
RailsWayCon: more than 30 images < 5K
Dienstag, 2. Juni 2009
27. Fewer Requests:
Sprite your images
Background image Size
Position
RailsWayCon: more than 30 images < 5K
Dienstag, 2. Juni 2009
28. Fewer Requests:
Sprite your images
Background image Size
Position
RailsWayCon: more than 30 images < 5K
Dienstag, 2. Juni 2009
29. Fewer Requests:
Sprite your images
Background image Size
Position
RailsWayCon: more than 30 images < 5K
Dienstag, 2. Juni 2009
30. Fewer Requests:
Sprite your images
Background image Size
Position
RailsWayCon: more than 30 images < 5K
Dienstag, 2. Juni 2009
31. Fewer Requests:
Sprite your images
Background image Size
Position
1 Sprite
RailsWayCon: more than ⎯⎯⎯⎯ < 5K
30 images
Dienstag, 2. Juni 2009
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. Fewer Requests:
Far future expires header
Static files (usually) don‘t change
Dienstag, 2. Juni 2009
34. Fewer Requests:
Far future expires header
Static files (usually) don‘t change
C
Dienstag, 2. Juni 2009
35. Fewer Requests:
Far future expires header
Static files (usually) don‘t change
C S
Dienstag, 2. Juni 2009
36. Fewer Requests:
Far future expires header
Static files (usually) don‘t change
Gimme file
C S
Dienstag, 2. Juni 2009
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. 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. 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. 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. 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. 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. 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. Fewer Requests:
Far future expires header
Dienstag, 2. Juni 2009
45. Fewer Requests:
Far future expires header
Dienstag, 2. Juni 2009
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
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. 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. Smaller Requests:
Minify your JS and CSS
Strip comments, whitespace etc.
Rails: asset_packager plugin
RailsWayCon: 151K -> 108K
Dienstag, 2. Juni 2009
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. 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. Smaller Requests:
Know your images
Total page weight: 331 KB
Images: 286 KB
Dienstag, 2. Juni 2009
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
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. Speed up requests:
Domain sharding
html
image
image
image
image
image
image
image
image
image
image
time
Dienstag, 2. Juni 2009
58. Speed up requests:
Domain sharding
html
image
image
image
image
image
image
image
image
image
image
time
Dienstag, 2. Juni 2009
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. 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. 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. 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
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
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. 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. 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. 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
73. Thank you for your
kind attention!
Dienstag, 2. Juni 2009
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. 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
