Web Optimization Level: Paranoid

700 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
700
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
23
Comments
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: Influence rank.
    8. 8. WHAT SHOULD WE DO?
    9. 9. OPTIMIZATION LEVEL: BEGINNER
    10. 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. 11. OPTIMIZATION LEVEL: MEDIUM
    12. 12. Minify your javascript and cssfunction 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. 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. 14. YUI Compressor
    15. 15. Google Closure Simple Optimization
    16. 16. Google Closure Advanced 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 config file.
    23. 23. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):• Add `gzip_static on;` in your nginx config file.• Compress your static files manually, example:
    24. 24. Server side compression with GzipHOWTO 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. 25. Server side compression with GzipHOWTO 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. 26. OPTIMIZATION LEVEL: ADVANCED
    27. 27. Image Compression• Use Progressive Compression for JPEG files.
    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 (flush) socket write. 1 5 3 2 6 4
    32. 32. Chunking content (flush) socket write. Ruby ios.flush PHP flush(); Python flush()
    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):• Profiling manually by setting profiling level:
    37. 37. DATABASE OPTIMIZATION HOWTO (MongoDB):• Profiling manually by setting profiling level: •> db.setProfilingLevel(2);
    38. 38. DATABASE OPTIMIZATION HOWTO (MongoDB):• Profiling manually by setting profiling level: •> db.setProfilingLevel(2);• Profiling automatically by using Dex (MongoDB Index bot).
    39. 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. 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!!!”
    46. 46. NON BLOCKING EVENT BASED I/O$(document).ready(function(){ alert(“document loaded”);});$(“.button”).click(function(){ alert(“button clicked”);});
    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• Notification.• Search.• Stream.• Logging via network. eg: Scribe.
    53. 53. LAZY LOAD IMAGES
    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.• Minifiable.
    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.agafix.org

    ×