Upcoming SlideShare
×

# Web Optimization Level: Paranoid

700 views

Published on

This is my presentation about web optimization in Brown Bag Session at KS. Tubun Jakarta Indonesia

2 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
700
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
23
0
Likes
2
Embeds 0
No embeds

No notes for slide
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• \n
• ### Web Optimization Level: Paranoid

1. 1. WEB OPTIMIZATION: PARANOID MODE ROBIN@MINDTALK.COM
2. 2. WHY SPEED MATTER?
3. 3. “If it is fast and ugly, they will use it and curse you;if it is slow, they will not use it.” --David Cheriton
4. 4. WEB OPTIMIZATION
5. 5. WEB OPTIMIZATION• Minimizecost of investment by reducing processor and bandwidth usage.
6. 6. WEB OPTIMIZATION• Minimizecost of investment by reducing processor and bandwidth usage.• User satisfaction and customer engagement.
7. 7. WEB OPTIMIZATION• Minimizecost of investment by reducing processor and bandwidth usage.• User satisfaction and customer engagement.• SEO: Inﬂuence rank.
8. 8. WHAT SHOULD WE DO?
9. 9. OPTIMIZATION LEVEL: BEGINNER
10. 10. • Avoid redirection as possible.• Client side caching: cache your static ﬁles includes: images, javascript, and stylesheet (css). • for example http header based by adding Etag or Last-Modiﬁed http header.• Reduce the number of DOM elements.
11. 11. OPTIMIZATION LEVEL: MEDIUM
13. 13. Minify your javascript and css Benchmark: compressing mindtalk.js original size: 4464 KB Tool Miniﬁed Save YUI Compressor 3440 KB 22% Google Closure 2712 KB 39%Simple Optimization Google Closure Advanced 556 KB 87% Optimization
14. 14. YUI Compressor
15. 15. Google Closure Simple Optimization
17. 17. Server side compression with Gziphttp://www.sendung.de/wp-content/compression.png
18. 18. Server side compression with Gzipmindtalk.min.js GZIP mindtalk.min.js 556 KB 164 KB NETWORK
19. 19. “Wait..., how about performance?”
20. 20. Server side compression with Gzip• Dynamic Gzip Compression.• Static Gzip Compression.
21. 21. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):
22. 22. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):• Add `gzip_static on;` in your nginx conﬁg ﬁle.
23. 23. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):• Add `gzip_static on;` in your nginx conﬁg ﬁle.• Compress your static ﬁles manually, example:
24. 24. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):• Add `gzip_static on;` in your nginx conﬁg ﬁle.• Compress your static ﬁles manually, example: •\$gzip js/mindtalk.min.js > js/ mindtalk.min.js.gz
25. 25. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):• Add `gzip_static on;` in your nginx conﬁg ﬁle.• Compress your static ﬁles manually, example: •\$gzip js/mindtalk.min.js > js/ mindtalk.min.js.gz• Done.
27. 27. Image Compression• Use Progressive Compression for JPEG ﬁles.
28. 28. Image CompressionHOWTO Use Progressive Compression
29. 29. Combine javascript / CSS
30. 30. Combine javascript / CSS HOWTO:\$ cat jquery.js jquery-plugins-wow.js jquery-plugins-box.js > all.js
31. 31. Chunking content (ﬂush) socket write. 1 5 3 2 6 4
32. 32. Chunking content (ﬂush) socket write. Ruby ios.ﬂush PHP ﬂush(); Python ﬂush()
33. 33. DATABASE OPTIMIZATION
34. 34. DATABASE OPTIMIZATIONKnow your self and your enemy and you win! --Sun Tzu Know your database and the bottleneck and you win! --unknown
35. 35. DATABASE OPTIMIZATION HOWTO (MongoDB):
36. 36. DATABASE OPTIMIZATION HOWTO (MongoDB):• Proﬁling manually by setting proﬁling level:
37. 37. DATABASE OPTIMIZATION HOWTO (MongoDB):• Proﬁling manually by setting proﬁling level: •> db.setProﬁlingLevel(2);
38. 38. DATABASE OPTIMIZATION HOWTO (MongoDB):• Proﬁling manually by setting proﬁling level: •> db.setProﬁlingLevel(2);• Proﬁling automatically by using Dex (MongoDB Index bot).
39. 39. DATABASE OPTIMIZATION HOWTO (MongoDB):• Proﬁling manually by setting proﬁling level: •> db.setProﬁlingLevel(2);• Proﬁling automatically by using Dex (MongoDB Index bot). •\$ dex -f /var/log/mongodb.log mongodb:// localhost/db
40. 40. OPTIMIZATION LEVEL: PARANOID
41. 41. USE NON BLOCKING I/O
42. 42. THREAD BASED I/O worker worker worker workerClient Client Client Client Client
43. 43. THREAD BASED I/O worker worker worker worker WAITINGClient Client Client Client Client
44. 44. NON BLOCKING EVENT BASED I/OEVENT EMITTERS IO LOOP EVENT HANDLER Event Queue REQ REQ REQ REQ REQ Client Client Client Client Client
45. 45. NON BLOCKING EVENT BASED I/O “CONFUSING!!!”
47. 47. NON BLOCKING EVENT BASED I/Ovar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Hello Worldn);}).listen(1337, 127.0.0.1);console.log(Server running at http://127.0.0.1:1337/);
48. 48. NON BLOCKING EVENT BASED I/O
49. 49. NON BLOCKING EVENT BASED I/O
50. 50. NON BLOCKING EVENT BASED I/O
51. 51. NON BLOCKING EVENT BASED I/O
52. 52. USE ASYNCHRONOUS FOR COSTLY OPERATION• Notiﬁcation.• Search.• Stream.• Logging via network. eg: Scribe.
54. 54. CLIENT SIDE TEMPLATING
55. 55. WHY CLIENT SIDE TEMPLATING?• Extensible: You can change the template without change the logic.• Expressive: As expressive as desktop application.• Cacheable: Provide our template to the browser once.• Bandwidth friendly: Reduce amount of bandwidth usage by just providing raw data (JSON) to browser and let browser render the dom element.• Miniﬁable.
56. 56. WHY CLIENT SIDE TEMPLATING?
57. 57. WHY CLIENT SIDE TEMPLATING? jTemplate vs PURE vs Closure Template
58. 58. WHY CLIENT SIDE TEMPLATING?
59. 59. HOWTO (CLOSURE TEMPLATE):
60. 60. HOWTO (CLOSURE TEMPLATE):
61. 61. HOWTO (CLOSURE TEMPLATE):
62. 62. HOWTO (CLOSURE TEMPLATE):
63. 63. HOWTO (CLOSURE TEMPLATE):
64. 64. HOWTO (CLOSURE TEMPLATE):
65. 65. CLIENT SIDE TEMPLATING IN MINDTALK
66. 66. CSS CLASS MAPPING
67. 67. CSS CLASS MAPPING BEFORE
68. 68. CSS CLASS MAPPING AFTER
69. 69. Closure Template + Closure Stylesheet + Closure Compiler =Highly Optimized Web App
70. 70. Mindtalk when using CSS Mapping
71. 71. THANK YOU
72. 72. Reference• http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on- jpeg/• http://www.slideshare.net/bonoseo/web-performance-optimization-wpo• http://nodejs.org/• http://getcomparisons.com/node-js-vs-php• http://blog.pandaform.com/techie/browser-side-template-engines-roundup/• http://www.agaﬁx.org