Your SlideShare is downloading. ×
Web Optimization Level: Paranoid
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web Optimization Level: Paranoid

315
views

Published on

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

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


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
315
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. WEB OPTIMIZATION: PARANOID MODE ROBIN@MINDTALK.COM
    • 2. WHY SPEED MATTER?
    • 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. WEB OPTIMIZATION
    • 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 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. 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 Gziphttp://www.sendung.de/wp-content/compression.png
    • 18. Server side compression with Gzipmindtalk.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 GzipHOWTO Enable Static Gzip compression (NGINX):
    • 22. Server side compression with GzipHOWTO Enable Static Gzip compression (NGINX):• Add `gzip_static on;` in your nginx config file.
    • 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. 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. 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. OPTIMIZATION LEVEL: ADVANCED
    • 27. Image Compression• Use Progressive Compression for JPEG files.
    • 28. Image CompressionHOWTO 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()
    • 33. DATABASE OPTIMIZATION
    • 34. DATABASE OPTIMIZATIONKnow 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 workerClient Client Client Client Client
    • 43. THREAD BASED I/O worker worker worker worker WAITINGClient Client Client Client Client
    • 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. 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/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. 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
    • 54. CLIENT SIDE TEMPLATING
    • 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?
    • 59. HOWTO (CLOSURE TEMPLATE):
    • 60. HOWTO (CLOSURE TEMPLATE):
    • 61. HOWTO (CLOSURE TEMPLATE):
    • 62. HOWTO (CLOSURE TEMPLATE):
    • 63. HOWTO (CLOSURE TEMPLATE):
    • 64. HOWTO (CLOSURE TEMPLATE):
    • 65. CLIENT SIDE TEMPLATING IN MINDTALK
    • 66. CSS CLASS MAPPING
    • 67. CSS CLASS MAPPING BEFORE
    • 68. CSS CLASS MAPPING AFTER
    • 69. Closure Template + Closure Stylesheet + Closure Compiler =Highly Optimized Web App
    • 70. Mindtalk when using CSS Mapping
    • 71. THANK YOU
    • 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