yglf 2015 - boom performance | eran zinman (dapulse)
TRANSCRIPT
- 1. BOOM Performance
- 2. About me Co-founded & R&D Manager @ Co-founder & CTO @ [email protected]
- 3. So what is BOOM Performance?
- 4. Fast Super Fast Super Duper Fast BOOM Boom Speed is the time it takes to say Boom
- 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. Why is Boom Important?
- 7. Speed affects your product and the happiness of your users. And trust me - You dont know when they suffer.
- 8. Boom Speed = More Usage Fast:Super Fast:Boom:
- 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. 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. 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. Why speed is something developers should be in charge of? Product people rarely know what to ask Can you make this faster?
- 13. BOOM Performance How to achieve
- 14. The Basics
- 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. 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. 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. 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. Optimistic Actions
- 20. Instagram Example Instagram starts uploading here Most apps start uploading here
- 21. Facebook Example
- 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. daPulse - Signup Example [GET] check_sub_domain/a [GET] check_sub_domain/ab [GET] check_sub_domain/abc abc
- 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. Action Prediction prefetch, preload, predict
- 26.