Downloaded 29 times
Uploaded byrobin_sy
Web Optimization Level: Paranoid
The document discusses various techniques for optimizing web performance, ranging from beginner to advanced levels. At the beginner level, it recommends avoiding redirects, enabling client-side caching, and reducing DOM elements. At the medium level, it suggests minifying JavaScript and CSS. More advanced techniques include image compression, combining files, and server-side gzip compression. The document also provides optimization tips for databases like MongoDB and recommends using asynchronous and non-blocking I/O for costly operations. It advocates for client-side templating to reduce bandwidth usage and improve cacheability.
Web Optimization Level: Paranoid
- 1. WEB OPTIMIZATION: PARANOIDMODE ROBIN@MINDTALK.COM
- 2.
- 3. “If it isfast and ugly, they will use it and curse you; if it is slow, they will not use it.” --David Cheriton
- 4.
- 5. WEB OPTIMIZATION • Minimizecostof investment by reducing processor and bandwidth usage.
- 6. WEB OPTIMIZATION • Minimizecostof investment by reducing processor and bandwidth usage. • User satisfaction and customer engagement.
- 7. WEB OPTIMIZATION • Minimizecostof investment by reducing processor and bandwidth usage. • User satisfaction and customer engagement. • SEO: Influence rank.
- 8.
- 9. OPTIMIZATION LEVEL: BEGINNER
- 10. • Avoid redirection as possible. • Client side caching: cache your static files includes: images, javascript, and stylesheet (css). • for example http header based by adding Etag or Last-Modified http header. • Reduce the number of DOM elements.
- 11. OPTIMIZATION LEVEL: MEDIUM
- 12. Minify your javascriptand css function login(){ var inputUname = document.getElementById(“username”); var inputPass = document.getElementById(“password”); ajaxPost(“/login”, {“username”:inputUname,”password”:inputPass}); } function a(){ var b, c, d; d = document.getElementById; b = d(“username”); c = d(“password”); ap(“/login”, {“username”:b,”password”:c}); }
- 13. Minify your javascriptand css Benchmark: compressing mindtalk.js original size: 4464 KB Tool Minified Save YUI Compressor 3440 KB 22% Google Closure 2712 KB 39% Simple Optimization Google Closure Advanced 556 KB 87% Optimization
- 14.
- 15. Google Closure SimpleOptimization
- 16. Google Closure AdvancedOptimization
- 17. Server side compression with Gzip http://www.sendung.de/wp-content/compression.png
- 18. Server side compression with Gzip mindtalk.min.js GZIP mindtalk.min.js 556 KB 164 KB NETWORK
- 19. “Wait..., how aboutperformance?”
- 20. Server side compression with Gzip • Dynamic Gzip Compression. • Static Gzip Compression.
- 21. Server side compression with Gzip HOWTO Enable Static Gzip compression (NGINX):
- 22. Server side compression with Gzip HOWTO Enable Static Gzip compression (NGINX): • Add `gzip_static on;` in your nginx config file.
- 23. Server side compression with Gzip HOWTO Enable Static Gzip compression (NGINX): • Add `gzip_static on;` in your nginx config file. • Compress your static files manually, example:
- 24. Server side compression with Gzip HOWTO Enable Static Gzip compression (NGINX): • Add `gzip_static on;` in your nginx config file. • Compress your static files manually, example: •$gzip js/mindtalk.min.js > js/ mindtalk.min.js.gz
- 25. Server side compression with Gzip HOWTO Enable Static Gzip compression (NGINX): • Add `gzip_static on;` in your nginx config file. • Compress your static files manually, example: •$gzip js/mindtalk.min.js > js/ mindtalk.min.js.gz • Done.
- 26. OPTIMIZATION LEVEL: ADVANCED
- 27. Image Compression • Use Progressive Compression for JPEG files.
- 28. Image Compression HOWTO UseProgressive Compression
- 29.
- 30. Combine javascript /CSS HOWTO: $ cat jquery.js jquery-plugins-wow.js jquery- plugins-box.js > all.js
- 31. Chunking content (flush)socket write. 1 5 3 2 6 4
- 32. Chunking content (flush)socket write. Ruby ios.flush PHP flush(); Python flush()
- 33.
- 34. DATABASE OPTIMIZATION Know yourself and your enemy and you win! --Sun Tzu Know your database and the bottleneck and you win! --unknown
- 35. DATABASE OPTIMIZATION HOWTO (MongoDB):
- 36. DATABASE OPTIMIZATION HOWTO (MongoDB): • Profiling manually by setting profiling level:
- 37. DATABASE OPTIMIZATION HOWTO (MongoDB): • Profiling manually by setting profiling level: •> db.setProfilingLevel(2);
- 38. DATABASE OPTIMIZATION HOWTO (MongoDB): • Profiling manually by setting profiling level: •> db.setProfilingLevel(2); • Profiling automatically by using Dex (MongoDB Index bot).
- 39. DATABASE OPTIMIZATION HOWTO (MongoDB): • Profiling manually by setting profiling level: •> db.setProfilingLevel(2); • Profiling automatically by using Dex (MongoDB Index bot). •$ dex -f /var/log/mongodb.log mongodb:// localhost/db
- 40. OPTIMIZATION LEVEL: PARANOID
- 41.
- 42. THREAD BASED I/O worker worker worker worker Client Client Client Client Client
- 43. THREAD BASED I/O worker worker worker worker WAITING Client Client Client Client Client
- 44. NON BLOCKING EVENTBASED I/O EVENT EMITTERS IO LOOP EVENT HANDLER Event Queue REQ REQ REQ REQ REQ Client Client Client Client Client
- 45. NON BLOCKING EVENTBASED I/O “CONFUSING!!!”
- 46. NON BLOCKING EVENTBASED I/O $(document).ready(function(){ alert(“document loaded”); }); $(“.button”).click(function(){ alert(“button clicked”); });
- 47. NON BLOCKING EVENTBASED I/O var 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. NON BLOCKING EVENTBASED I/O
- 49. NON BLOCKING EVENTBASED I/O
- 50. NON BLOCKING EVENTBASED I/O
- 51. NON BLOCKING EVENTBASED I/O
- 52. USE ASYNCHRONOUS FOR COSTLY OPERATION • Notification. • Search. • Stream. • Logging via network. eg: Scribe.
- 53.
- 54.
- 55. WHY CLIENT SIDETEMPLATING? • 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. • Minifiable.
- 56. WHY CLIENT SIDETEMPLATING?
- 57. WHY CLIENT SIDETEMPLATING? jTemplate vs PURE vs Closure Template
- 58. WHY CLIENT SIDETEMPLATING?
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. CLIENT SIDE TEMPLATINGIN MINDTALK
- 66.
- 67. CSS CLASS MAPPING BEFORE
- 68. CSS CLASS MAPPING AFTER
- 70. Closure Template + Closure Stylesheet + Closure Compiler = Highly Optimized Web App
- 71. Mindtalk when usingCSS Mapping
- 72.
- 73. 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.agafix.org
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n
- #86 \n
- #87 \n
- #88 \n
- #89 \n