Successfully reported this slideshow.
Your SlideShare is downloading. ×

Performance beyond page load - CSS Conf Asia 2015

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Performance beyond
Page load
CSS Conf Asia 2015
Let’s start with a
small survey
How many of you
like
animations
in
Material Design?

YouTube videos are no longer supported on SlideShare

View original on YouTube

Loading in …3
×

Check these out next

1 of 73 Ad

Performance beyond page load - CSS Conf Asia 2015

Download to read offline

Talk presented at CSS Conf Asia 2015 regarding "Performance beyond Page load" i.e. Rendering performance of your webpage. The talk focused upon the impact of CSS rules and operations upon the rendering performance of a webpage.

Talk presented at CSS Conf Asia 2015 regarding "Performance beyond Page load" i.e. Rendering performance of your webpage. The talk focused upon the impact of CSS rules and operations upon the rendering performance of a webpage.

Advertisement
Advertisement

More Related Content

Similar to Performance beyond page load - CSS Conf Asia 2015 (20)

Advertisement

Recently uploaded (20)

Performance beyond page load - CSS Conf Asia 2015

  1. 1. Performance beyond Page load CSS Conf Asia 2015
  2. 2. Let’s start with a small survey
  3. 3. How many of you like animations in Material Design?
  4. 4. But, you won’t like animations if they’re NOT smooth
  5. 5. Rendering Performance Goal: Build smooth interaction experiences
  6. 6. Let’s start with a Case Study
  7. 7. Marriage Proposal
  8. 8. Next thing?
  9. 9. E-Shopping
  10. 10. though what happened next...
  11. 11. Reaction
  12. 12. Bad performance of Shopping portal which lead to..
  13. 13. Discussion of the performance impact followed by actions
  14. 14. Wait before that we need to understand what’s happening technically, right?
  15. 15. Apoorv Saxena Full stack Engineer, @apoorv_saxena India
  16. 16. + Workshops + Meetups
  17. 17. Let’s start with Basics
  18. 18. BIOSCOPE
  19. 19. What is smooth interaction? Devices refresh their screen 60 times a second and even more than that. Thus, frame budget for smooth interaction is 16ms (1 second / 60 frames = 16.66 ms / frame) Though, browser has got some householding work as well, which leaves us with about 10ms in total.
  20. 20. 10ms isn’t a lot of time
  21. 21. When failing to meet the frame budget of 10ms, we come across Jank
  22. 22. Browser rendering process
  23. 23. Pixel Pipeline
  24. 24. Layout
  25. 25. width overflow height padding font-family margin display vertical-align border-width border clear top position bottom font-size float left text-align overflow-y right line-height font-weight white-space min-height
  26. 26. Paint
  27. 27. Painting
  28. 28. color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius background-size box-shadow
  29. 29. Compositing
  30. 30. Performance impact of operations Layout > Paint > Composite
  31. 31. How to analyse the performance of a webpage For use in Development
  32. 32. Chrome Dev Tools: FPS meter Demo
  33. 33. Chrome Dev Tools: Enable paint flashing Demo
  34. 34. Chrome Dev Tools: Timeline
  35. 35. Performance best practices
  36. 36. CPU v GPU ● Not efficient in handling graphics related operations. JavaScript utilises CPU followed by GPU when manipulating DOM style. s ● Optimized for handling Graphics operations. CSS directly utilises GPU for applying CSS operations and thus hardware accelerated.
  37. 37. Rule of Thumb: Use classes to update element styling instead of using JavaScript
  38. 38. Using CSS for element’s style manipulation: var player = $(‘#player’); player.removeClass(‘move--left’); player.addClass(‘move--right’); Using JS for element’s style manipulation: var player = $(‘#player’); $(‘#player’).css({ left: ‘0px’, right: ‘10px’ }); Code:
  39. 39. Style Calculations Reference: CSSTriggers.com
  40. 40. Must follow: I. Understand what impacts rendering performance (Profile) II. Choose your CSS rules wisely III. Avoid triggering layout / paint operation repeatedly or when animating IV. Prefer using transform and opacity changes (trigger only composite operation) for animations
  41. 41. Reduce complexity of CSS selectors
  42. 42. Roughly 50% of the time used to calculate the computed style for an element is used to match selectors, and the other half of the time is used for constructing the RenderStyle (computed style representation) from the matched rules. Rune Lillesveen, Opera / Style Invalidation in Blink
  43. 43. .title { /* styles */ } // performant .box:nth-last-child(-n+1) .title { /* styles */ } // less performant
  44. 44. Remove unused CSS rules CSS selector parsing is optimized, though unused CSS rules have a bigger performance impact Automate using Gulp or Grunt tasks
  45. 45. Reduce number of elements being styled Why to paint the entire body, when changes can/should be limited to that element Example: Google.com
  46. 46. Measure your style recalculation cost
  47. 47. Possible Jank condition: If a user hovers over a long list of <li> elements while scrolling li:hover { background-color: red; /* Layout / Paint operation */ }
  48. 48. Reduce paint areas Don’t paint unnecessarily. Avoid Union of Damaged regions.
  49. 49. CSS Animations Use composite CSS operations inside keyframe definition such as transform and avoid triggering paint / layout operation
  50. 50. Debounce input handlers e.g. disable hover event listener while scrolling
  51. 51. Example
  52. 52. Promote elements that update frequently Caution: Don’t promote elements without profiling
  53. 53. Did you know? Fixed elements having “position: fixed” property and scrollable elements, are repainted by the browsers
  54. 54. Example .moving-element { will-change: transform; } .moving-element { transform: translateZ(0); }
  55. 55. GIFs and Performance Disable animation when not inside the viewport
  56. 56. Live Performance Audit
  57. 57. At EdgeConf 2012, Facebook confirmed this when it mentioned that in an A/B test, it slowed down scrolling from 60fps to 30fps, causing engagement to collapse.
  58. 58. Path to Performance http://perfaudit.com, @perfaudit
  59. 59. Thanks.

×