performance beyond page load - css conf asia 2015
TRANSCRIPT
![Page 1: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/1.jpg)
Performance beyond Page load
CSS Conf Asia 2015
![Page 2: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/2.jpg)
Let’s start with a small survey
![Page 3: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/3.jpg)
How many of you like
animations in
Material Design?
![Page 4: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/4.jpg)
But, you won’t like animations if they’re
NOT smooth
![Page 5: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/5.jpg)
Rendering Performance
Goal: Build smooth interaction experiences
![Page 6: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/6.jpg)
Let’s start with a Case Study
![Page 7: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/7.jpg)
Marriage Proposal
![Page 8: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/8.jpg)
Next thing?
![Page 9: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/9.jpg)
E-Shopping
![Page 10: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/10.jpg)
thoughwhat happened next...
![Page 11: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/11.jpg)
Reaction
![Page 12: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/12.jpg)
Bad performance of Shopping portal
which lead to..
![Page 13: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/13.jpg)
![Page 14: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/14.jpg)
Discussion of the performance impact
followed by actions
![Page 15: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/15.jpg)
Wait
before that we need to understand what’s happeningtechnically, right?
![Page 16: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/16.jpg)
Apoorv Saxena
Full stack Engineer, @apoorv_saxena
India
![Page 17: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/17.jpg)
![Page 18: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/18.jpg)
+ Workshops+ Meetups
![Page 19: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/19.jpg)
Let’s start with Basics
![Page 20: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/20.jpg)
BIOSCOPE
![Page 21: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/21.jpg)
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.
![Page 22: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/22.jpg)
10ms isn’t a lot of time
![Page 23: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/23.jpg)
When failing to meet the frame budget of 10ms, we come across
Jank
![Page 24: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/24.jpg)
![Page 25: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/25.jpg)
Browser rendering process
![Page 26: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/26.jpg)
Pixel Pipeline
![Page 27: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/27.jpg)
Layout
![Page 28: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/28.jpg)
![Page 29: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/29.jpg)
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
![Page 30: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/30.jpg)
Paint
![Page 31: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/31.jpg)
![Page 32: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/32.jpg)
Painting
![Page 33: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/33.jpg)
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow
![Page 34: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/34.jpg)
Compositing
![Page 35: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/35.jpg)
![Page 36: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/36.jpg)
![Page 37: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/37.jpg)
Performance impact of operations
Layout > Paint > Composite
![Page 38: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/38.jpg)
How to analyse the performance of a
webpage
For use in Development
![Page 39: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/39.jpg)
Chrome Dev Tools: FPS meter
Demo
![Page 40: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/40.jpg)
![Page 41: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/41.jpg)
Chrome Dev Tools:Enable paint flashing
Demo
![Page 42: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/42.jpg)
![Page 43: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/43.jpg)
Chrome Dev Tools: Timeline
![Page 44: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/44.jpg)
![Page 45: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/45.jpg)
Performance best practices
![Page 46: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/46.jpg)
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.
![Page 47: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/47.jpg)
Rule of Thumb:
Use classes to update element styling instead of using JavaScript
![Page 48: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/48.jpg)
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:
![Page 50: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/50.jpg)
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
![Page 51: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/51.jpg)
Reduce complexity of CSS selectors
![Page 52: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/52.jpg)
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
![Page 53: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/53.jpg)
.title { /* styles */
}
// performant
.box:nth-last-child(-n+1)
.title { /* styles */
}
// less performant
![Page 54: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/54.jpg)
Remove unusedCSS rules
CSS selector parsing is optimized, though unused CSS rules have a bigger performance impact
Automate using Gulp or Grunt tasks
![Page 55: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/55.jpg)
Reduce number of elements being styled
Why to paint the entire body, when changes can/should be limited to that element
Example: Google.com
![Page 56: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/56.jpg)
Measure your style recalculation cost
![Page 57: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/57.jpg)
Possible Jank condition:
If a user hovers over a long list of <li> elements while scrolling
li:hover { background-color: red; /* Layout / Paint operation */
}
![Page 58: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/58.jpg)
Reduce paint areas
Don’t paint unnecessarily. Avoid Union of Damaged regions.
![Page 59: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/59.jpg)
![Page 60: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/60.jpg)
CSS Animations
Use composite CSS operations inside keyframe definition such as transform and avoid triggering paint / layout operation
![Page 61: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/61.jpg)
Debounce input handlers
e.g. disable hover event listener while scrolling
![Page 62: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/62.jpg)
Example
![Page 63: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/63.jpg)
Promote elements that update frequently
Caution: Don’t promote elements without profiling
![Page 64: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/64.jpg)
![Page 65: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/65.jpg)
Did you know?
Fixed elements having “position: fixed” property and scrollable elements, are
repainted by the browsers
![Page 66: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/66.jpg)
Example
.moving-element { will-change: transform;}.moving-element { transform: translateZ(0);}
![Page 67: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/67.jpg)
GIFs and Performance
Disable animation when not inside the viewport
![Page 68: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/68.jpg)
![Page 69: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/69.jpg)
Live Performance Audit
![Page 70: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/70.jpg)
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.
![Page 72: Performance beyond page load - CSS Conf Asia 2015](https://reader033.vdocuments.mx/reader033/viewer/2022052915/58ea49891a28abc4698b5a21/html5/thumbnails/72.jpg)
Thanks.