Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BOOM Performance
About me …
Co-founded & R&D Manager @
Co-founder & CTO @
eranz@dapulse.com
So… what is
BOOM Performance?
Fast
Super Fast
Super Duper Fast
BOOM
Boom Speed is the time it takes to say “Boom”
0-100ms
100-300ms
300-1000ms
1000ms
10,000ms
Let’s put it in numbers:
INSTANT (BOOM)
Small perceptible delay
Machine is wo...
Why is
Boom Important?
Speed affects your product and the
happiness of your users.
And trust me -
You don’t know when they suffer.
Boom Speed = More Usage
Fast:Super Fast:Boom:
Boom Speed = Simpler UI
When your UI is slow users will ask you for features
that will make your UI more condensed.
- This...
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#$%#
...
Invest in speed
It’s one of the best things
to spend your time on.
New killer feature: Serve 10% of users
Boom Performance...
Why speed is something
developers should be in charge of?
Product people rarely know what to ask
“Can you make this faster...
BOOM Performance
How to achieve
The Basics
The Basics – Checklist
 Minify JS + CSS
 Gzip compression
 Optimize images (PNG)
 CDN
 Prioritize visible content (CS...
Don’t shoot yourself in the foot
for (var i=0; i < posts.length; i++) {
...
}
$('#item').css('color', '#123456');
$('#item...
Things that make the DOM Heavy
• Use with caution:
Round Corners, Box Shadows, Opacity
• Beware of binding scroll callback...
CPU Rendering GPU Rendering
.mover {
background: url("particle.png");
height: 100px;
width: 100px;
position: absolute;
-we...
Optimistic Actions
Instagram Example
Instagram starts uploading
here
Most apps start uploading
here
Facebook Example
// Make AJAX request to create post for user
$.ajax("/user/post", {
type: "POST”,
data: { from_date: this.from_date },
dat...
daPulse - Signup Example
[GET] check_sub_domain/a
[GET] check_sub_domain/ab
[GET] check_sub_domain/abc
abc
• If you know the expected result in the client
(adding a user to a list, writing a reply, liking a comment, deleting an o...
Action Prediction
prefetch, preload, predict
<link rel="prefetch" href="http://dapulse.com/dapulse.js />
Prefetch & Preload
<link rel="prerender" href="http://example....
Your users are predictable
They will do the same searches & selections 80% of the time.
 Track what your users are searching or selecting.
 Preload that into the client.
 Assume “history will repeat itself” ...
Provide results from the client
Client side libraries
• Typeahead.js – Strong client side search / autocomplete.
• Lunr.js – Powerful client-side Solr / E...
The fastest request is “no request”
(a wise man)
Perceived Performance
Credit: http://blog.teamtreehouse.com/perceived-performance
Perceived Speed Improvement
• Gradual UI loading
• Progress bars
• Buttons hover + active state + ladda.js
• Animations
(b...
daPulse
Boards case study
We’ve tried
 Ajax request + server side caching
 Client side pagination
 TranslateZ (0,0,0) – bad decision
 Reduce HTM...
Takeaways
Takeaways
1. Boom Performance = User happiness.
2. Don’t skip the basic optimization stuff.
3. Unless you must wait for th...
Thank you!
eranz@dapulse.com
BOOM PERFORMANCE!
eranz@dapulse.com
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
Upcoming SlideShare
Loading in …5
×

YGLF 2015 - Boom Performance | Eran Zinman (daPulse)

2,349 views

Published on

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)

Published in: Technology

YGLF 2015 - Boom Performance | Eran Zinman (daPulse)

  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 Let’s put it in numbers: INSTANT (BOOM) Small perceptible delay Machine is working Likely mental context switch Doesn’t work?
  6. 6. Why is Boom Important?
  7. 7. Speed affects your product and the happiness of your users. And trust me - You don’t 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 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. 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. 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. 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
  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 ... ... ... ... ... Don’t 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, don’t do anything (or rollback to previous state). Think Positive
  25. 25. Action Prediction prefetch, preload, predict
  26. 26. <link rel="prefetch" href="http://dapulse.com/dapulse.js /> Prefetch & Preload <link rel="prerender" href="http://example.org/index.html"> <link rel="preconnect" href="//www.example.com”> 1. Prefetch (CSS / JS from your homepage) 2. Prerender (Loads entire web page – html, css, js) 3. Preconnect (Opens TCP Connection)
  27. 27. Your users are predictable They will do the same searches & selections 80% of the time.
  28. 28.  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?
  29. 29. Provide results from the client
  30. 30. Client side libraries • Typeahead.js – Strong client side search / autocomplete. • Lunr.js – Powerful client-side Solr / ElasticSearch alternative. • Localstorage is your friend – Draft saving – Result caching
  31. 31. The fastest request is “no request” (a wise man)
  32. 32. Perceived Performance
  33. 33. Credit: http://blog.teamtreehouse.com/perceived-performance
  34. 34. Perceived Speed Improvement • Gradual UI loading • Progress bars • Buttons hover + active state + ladda.js • Animations (but don’t animate for more than 100ms)
  35. 35. daPulse Boards case study
  36. 36. We’ve tried  Ajax request + server side caching  Client side pagination  TranslateZ (0,0,0) – bad decision  Reduce HTML elements  Gradual Rendering <div> <div> <span><a href=“”></a></span> </div> </div> <div> <a href=“”></a> </div>
  37. 37. Takeaways
  38. 38. 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).
  39. 39. Thank you! eranz@dapulse.com
  40. 40. BOOM PERFORMANCE! eranz@dapulse.com

×