Client performance is what shapes your product and determines the satisfaction of your users. Users don't expect things to happen fast, they expect things to happen immediately. In the presentation we will cover some real-life examples of how to greatly improve performance in web products and share a lot of tricks and cool stuff we've learned along the way.
Presented in the YGLF conference in Israel by Eran Zinman (dapulse.com)
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
It’s 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?”
16. Don’t 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)
<div>
<div>
<span><a href></a></span>
</div>
</div>
Always keep 60fps scroll performance
23. // 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
... ... ...
... ...
Don’t wait for success. Operate
25. • 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, don’t do anything (or rollback
to previous state).
Think Positive
28. Your users are predictable
They will do the same searches & selections 80% of the time.
29. Track what your users are searching or selecting.
Preload that into the client.
Assume “history will repeat itself” and render it
fast in the UI.
Achieve user happiness :)
Predict your users. How?
45. Takeaways
1. Boom Performance = User happiness.
2. Don’t skip the basic optimization stuff.
3. Unless you must wait for the server – don’t!
4. Fetch the data just before the user needs it.
5. If you can’t make it – fake it (perceived performance).