Client Side Optimization can give websites a snappier interface and by reducing bandwidth save money. Presentation given at RailsWayCon 2010

1. Patrick Hüsler, huesler informatik
Client Side Optimization
Talked to several people, it is not entirely clear, what client side optimization actually ist
Listened to a marketing talk, people use one term and mean something completely different

2. define “Client Side
Optimization”

3. Not about improving your customer

4. train him to perform better

5. and maybe add some cardio funk

6. So that you can turn this fellow into

7. Into this.
Although, if someone knows how to do this legally,
I’d love to hear that

8. Client ==
Browser
Rails doesn’t scale

9. Performance
==
Page

10. page_load.should
be_fast

11. Measure and
Analyze

12. Yahoo
YSlow

13. Google
Page
Speed

14. YSlow Criteria
• Make fewer HTTP requests
• Use a Content Delivery Network
• Add Expires Headers
• Compress components with gzip
• Put CSS at top
• Put JavaScript at bottom

15. YSlow Criteria
• Avoid CSS expressions
• Make JavaScript and CSS external
• Reduce DNS lookups
• Minify JavaScript and CSS
• Avoid URL redirects
• Remove duplicate JavaScript and CSS

16. YSlow Criteria
• Configure entity tags (ETags)
• Make AJAX cacheable
• Use GET for AJAX requests
• Reduce the number of DOM elements
• Avoid HTTP 404 (Not found) error
• Reduce cookie size

17. YSlow Criteria
• Use cookie-free domains
• Avoid AlphaImageLoader filter
• Do not scale images in HTML
• Make favicon small and cacheable

18. Google “YSlow Rails”
Copy
Paste
=>
Done!!!

19. Google Driven
Development

21. Increased User
Experience
>

22. Less data to
<

23. Less connections
to open
<

24. Faster page load

25. Snappier UI

26. ~=
Better user
experience

27. $$$

28. Less Bandwidth
<

29. Less
Connections
<

30. Less Server
load
~<

31. ~=
Save money

32. Focus

33. 80/20

34. Focus
• Make fewer HTTP requests
• Parallel connections
• Add Expires Headers
• Compress components with gzip
• Minify assets

35. All with a little
help from Rails

36. AssetTagHelper

37. Combine
javascript_include_tag :all, :cache => true
stylesheet_link_tag :all, :cache => true

38. Parallelize
ActionController::Base.asset_host = Proc.new { |source|
"http://assets#{rand(2) + 1}.example.com"
}

39. Add expires
headers

40. Apache
<FilesMatch ".(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>

41. NGINX
server {
location ~* .(ico|css|js|gif|jp?g|png)(?[0-9]+)?$ {
expires max;
break;
}
}

42. Compress
contents

43. Apache
<directory "/Users/joe/work/cootweet/public">
Options -Indexes
AddOutputFilterbyType DEFLATE text/
plain text/html text/css application/
javascript text/xml application/xml
application/xml+rss text/javascript
</directory>

44. NGINX
gzip on;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_proxied any;
gzip_types text/plain text/html text/css
application/x-javascript text/xml
application/xml application/xml+rss text/
javascript

45. CSS Sprites
#panel1b a:hover {
background: transparent url(test-3.jpg)
0 -200px no-repeat;}
#panel2b a:hover {
background: transparent url(test-3.jpg)
-96px -200px no-repeat;}
#panel3b a:hover {
background: transparent url(test-3.jpg)
-172px -200px no-repeat;}
#panel4b a:hover {
background: transparent url(test-3.jpg)
-283px -200px no-repeat;}

46. Minify Assets
• http://github.com/thumblemonks/smurf
• http://synthesis.sbecker.net/pages/
asset_packager

47. Resources
• http://developer.yahoo.com/yslow/
• http://code.google.com/speed/page-speed/
• http://www.alistapart.com/articles/sprites

48. Thank You
• patrick.huesler@googlemail.com
• @phuesler
• http://github.com/phuesler
• http://www.huesler-informatik.ch/blog

49. Questions?
? ? ? ?
?
? ? ?

50. Thank You
• patrick.huesler@googlemail.com
• @phuesler
• http://github.com/phuesler
• http://www.huesler-informatik.ch/blog