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.

1. Performance beyond
Page load
CSS Conf Asia 2015

2. Let’s start with a
small survey

3. How many of you
like
animations
in
Material Design?

4. But, you won’t like
animations if they’re
NOT smooth

5. Rendering
Performance
Goal: Build smooth interaction experiences

6. Let’s start with a
Case Study

7. Marriage Proposal

8. Next thing?

9. E-Shopping

10. though
what happened next...

11. Reaction

12. Bad performance of
Shopping portal
which lead to..

14. Discussion of the
performance impact
followed by actions

15. Wait
before that we need to understand what’s happening
technically, right?

16. Apoorv Saxena
Full stack Engineer, @apoorv_saxena
India

18. + Workshops
+ Meetups

19. Let’s start with Basics

20. BIOSCOPE

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

22. 10ms isn’t a lot of time

23. When failing to meet the frame budget of
10ms, we come across
Jank

25. Browser rendering
process

26. Pixel Pipeline

27. Layout

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

30. Paint

32. Painting

33. color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow

34. Compositing

37. Performance impact
of operations
Layout > Paint > Composite

38. How to analyse the
performance of a
webpage
For use in Development

39. Chrome Dev Tools:
FPS meter
Demo

41. Chrome Dev Tools:
Enable paint flashing
Demo

43. Chrome Dev Tools:
Timeline

45. Performance
best practices

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

47. Rule of Thumb:
Use classes to update element styling instead of using
JavaScript

48. 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:

49. Style Calculations
Reference: CSSTriggers.com

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

51. Reduce complexity of
CSS selectors

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

53. .title {
/* styles */
}
// performant
.box:nth-last-child(-n+1)
.title {
/* styles */
}
// less performant

54. Remove unused
CSS rules
CSS selector parsing is optimized, though unused CSS rules
have a bigger performance impact
Automate using Gulp or Grunt tasks

55. Reduce number of
elements being styled
Why to paint the entire body, when changes can/should be
limited to that element
Example: Google.com

56. Measure your style
recalculation cost

57. Possible Jank condition:
If a user hovers over a long list of
<li> elements while scrolling
li:hover {
background-color: red;
/* Layout / Paint operation */
}

58. Reduce paint areas
Don’t paint unnecessarily. Avoid Union of Damaged regions.

60. CSS Animations
Use composite CSS operations inside keyframe definition
such as transform and avoid triggering paint / layout operation

61. Debounce input
handlers
e.g. disable hover event listener while scrolling

62. Example

63. Promote elements
that update frequently
Caution: Don’t promote elements without profiling

65. Did you know?
Fixed elements having “position: fixed”
property and scrollable elements, are
repainted by the browsers

66. Example
.moving-element {
will-change: transform;
}
.moving-element {
transform: translateZ(0);
}

67. GIFs and Performance
Disable animation when not inside the viewport

69. Live
Performance Audit

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

71. Path to Performance
http://perfaudit.com, @perfaudit

72. Thanks.