1. 1. BOOM Performance
2. 2. About me Co-founded & R&D Manager @ Co-founder & CTO @ eranz@dapulse.com
3. 3. So what is BOOM Performance?
4. 4. Fast Super Fast Super Duper Fast BOOM Boom Speed is the time it takes to say Boom
5. 5. 0-100ms 100-300ms 300-1000ms 1000ms 10,000ms Lets put it in numbers: INSTANT (BOOM) Small perceptible delay Machine is working Likely mental context switch Doesnt work?
6. 6. Why is Boom Important?
7. 7. Speed affects your product and the happiness of your users. And trust me - You dont know when they suffer.
8. 8. Boom Speed = More Usage Fast:Super Fast:Boom:
9. 9. Boom Speed = Simpler UI When your UI is slow users will ask you for features that will make your UI more condensed. - This will make your product worse. Can you add the edit button on the main project list page? It will be faster to edit projects this way
10. 10. No Boom = No Addiction I use it for everything I use it because it solves a pain Damn them for making me use this shi#$%# Boom Fast Enough Not Fast Enough
11. 11. Invest in speed Its one of the best things to spend your time on. New killer feature: Serve 10% of users Boom Performance: Serve 100% of users
12. 12. Why speed is something developers should be in charge of? Product people rarely know what to ask Can you make this faster?
13. 13. BOOM Performance How to achieve
14. 14. The Basics
15. 15. The Basics Checklist Minify JS + CSS Gzip compression Optimize images (PNG) CDN Prioritize visible content (CSS / JS) Remove render-blocking JS (Move to bottom of HTML)
16. 16. Dont shoot yourself in the foot for (var i=0; i < posts.length; i++) { ... } $('#item').css('color', '#123456'); $('#item').html('hello'); $('#item').css('background-color', '#ffffff'); var x = $(.post_wrapper > .reply).data(); // you could use this instead $('#item').css('color', '#123456').html('hello').css('background', '#ffffff'); // or even var $item = $('#item'); $item.css('color', '#123456'); $item.html('hello'); $item.css('background-color', '#ffffff');
17. 17. Things that make the DOM Heavy Use with caution: Round Corners, Box Shadows, Opacity Beware of binding scroll callback events Avoid using too many elements (especially in repeatable elements) GPU Rendering - Translate3d(0,0,0) / TranslateZ(0) Always keep 60fps scroll performance
18. 18. CPU Rendering GPU Rendering .mover { background: url("particle.png"); height: 100px; width: 100px; position: absolute; -webkit-transform: translate3d(0,0,0); } .mover { background: url("particle.png"); height: 100px; width: 100px; position: absolute; } Vs.
19. 19. Optimistic Actions
20. 20. Instagram Example Instagram starts uploading here Most apps start uploading here
21. 21. Facebook Example
22. 22. // Make AJAX request to create post for user $.ajax("/user/post", { type: "POST, data: { from_date: this.from_date }, dataType: "json, success: function(data) { }, error: function(data) { // Notify the user on error ... ... } }); // Render new post in the UI ... ... ... ... ... Dont wait for success. Operate
23. 23. daPulse - Signup Example [GET] check_sub_domain/a [GET] check_sub_domain/ab [GET] check_sub_domain/abc abc
24. 24. If you know the expected result in the client (adding a user to a list, writing a reply, liking a comment, deleting an object, etc): Assume it worked and render it BOOM fast in the UI. Most of the time, if it fails, dont do anything (or rollback to previous state). Think Positive
25. 25. Action Prediction prefetch, preload, predict
26. 26.