Performance beyond Page load

CSS Conf Asia 2015

Let’s start with a small survey

How many of you like

animations in

Material Design?

But, you won’t like animations if they’re

NOT smooth

Rendering Performance

Goal: Build smooth interaction experiences

Let’s start with a Case Study

Marriage Proposal

Next thing?

E-Shopping

thoughwhat happened next...

Reaction

Bad performance of Shopping portal

which lead to..

Discussion of the performance impact

followed by actions

Wait

before that we need to understand what’s happeningtechnically, right?

Apoorv Saxena

Full stack Engineer, @apoorv_saxena

India

+ Workshops+ Meetups

Let’s start with Basics

BIOSCOPE

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.

10ms isn’t a lot of time

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

Jank

Browser rendering process

Pixel Pipeline

Layout

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

Paint

Painting

color border-style

visibility background

text-decoration background-image

background-position background-repeat

outline-color outline

outline-style border-radius

background-size box-shadow

Compositing

Performance impact of operations

Layout > Paint > Composite

How to analyse the performance of a

webpage

For use in Development

Chrome Dev Tools: FPS meter

Demo

Chrome Dev Tools:Enable paint flashing

Demo

Chrome Dev Tools: Timeline

Performance best practices

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.

Rule of Thumb:

Use classes to update element styling instead of using JavaScript

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:

Style Calculations

Reference: CSSTriggers.com

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

Reduce complexity of CSS selectors

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

.title { /* styles */

}

// performant

.box:nth-last-child(-n+1)

.title { /* styles */

}

// less performant

Remove unusedCSS rules

CSS selector parsing is optimized, though unused CSS rules have a bigger performance impact

Automate using Gulp or Grunt tasks

Reduce number of elements being styled

Why to paint the entire body, when changes can/should be limited to that element

Example: Google.com

Measure your style recalculation cost

Possible Jank condition:

If a user hovers over a long list of <li> elements while scrolling

li:hover { background-color: red; /* Layout / Paint operation */

}

Reduce paint areas

Don’t paint unnecessarily. Avoid Union of Damaged regions.

CSS Animations

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

Debounce input handlers

e.g. disable hover event listener while scrolling

Example

Promote elements that update frequently

Caution: Don’t promote elements without profiling

Did you know?

Fixed elements having “position: fixed” property and scrollable elements, are

repainted by the browsers

Example

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

GIFs and Performance

Disable animation when not inside the viewport

Live Performance Audit

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.

Path to Performance

http://perfaudit.com, @perfaudit

Thanks.