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
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
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