Web Optimization Level: Paranoid
Download as KEY, PDF2 likes705 views
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
- 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
- 5. WEB OPTIMIZATION • Minimizecost of investment by reducing processor and bandwidth usage.
- 6. WEB OPTIMIZATION • Minimizecost of investment by reducing processor and bandwidth usage. • User satisfaction and customer engagement.
- 7. WEB OPTIMIZATION • Minimizecost of investment by reducing processor and bandwidth usage. • User satisfaction and customer engagement. • SEO: Influence rank.
- 8. WHAT SHOULD WE DO?
- 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 javascript and 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 javascript and 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. YUI Compressor
- 15. Google Closure Simple Optimization
- 16. Google Closure Advanced Optimization
- 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 about performance?”
- 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 Use Progressive Compression
- 29. Combine javascript / CSS
- 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()
- 34. DATABASE OPTIMIZATION Know your self 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. USE NON BLOCKING I/O
- 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 EVENT BASED I/O EVENT EMITTERS IO LOOP EVENT HANDLER Event Queue REQ REQ REQ REQ REQ Client Client Client Client Client
- 45. NON BLOCKING EVENT BASED I/O “CONFUSING!!!”
- 46. NON BLOCKING EVENT BASED I/O $(document).ready(function(){ alert(“document loaded”); }); $(“.button”).click(function(){ alert(“button clicked”); });
- 47. NON BLOCKING EVENT BASED 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 EVENT BASED I/O
- 49. NON BLOCKING EVENT BASED I/O
- 50. NON BLOCKING EVENT BASED I/O
- 51. NON BLOCKING EVENT BASED I/O
- 52. USE ASYNCHRONOUS FOR COSTLY OPERATION • Notification. • Search. • Stream. • Logging via network. eg: Scribe.
- 53. LAZY LOAD IMAGES
- 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. • Minifiable.
- 56. WHY CLIENT SIDE TEMPLATING?
- 57. WHY CLIENT SIDE TEMPLATING? jTemplate vs PURE vs Closure Template
- 58. WHY CLIENT SIDE TEMPLATING?
- 65. CLIENT SIDE TEMPLATING IN MINDTALK
- 67. CSS CLASS MAPPING BEFORE
- 68. CSS CLASS MAPPING AFTER
- 70. Closure Template + Closure Stylesheet + Closure Compiler = Highly Optimized Web App
- 71. Mindtalk when using CSS Mapping
- 72. THANK YOU
- 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