Play all

Intro

Performance beyond Page load

Let's start with a small survey

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

Rendering Performance

Let's start with a Case Study

Bad performance of Shopping portal

Discussion of the performance impact

Wait

Apoorv Saxena

10ms isn't a lot of time

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

Browser rendering process

Composting

Performance impact of operations

How to analyse the performance of a webpage

Chrome Dev Tools: FPS meter

Chrome Dev Tools: Enable paint flashing

Chrome Dev Tools: Timeline

Rule of Thumb

Style Calculations

Reduce complexity of CSS selectors

Remove unused CSS rules

Reduce number of elements being styled

Measure your style recalculation cost

Reduce paint areas

CSS Animations

Debounce input handlers

Promote elements that update frequently

GIFs and Performance

Live Performance Audit

Path to Performance

Description:

Explore performance optimization techniques beyond initial page load in this CSSConf.Asia 2015 talk by Apoorv Saxena. Dive deep into browser rendering processes, CSS performance impacts, and practical strategies for improving web application speed. Learn to use Chrome Dev Tools for performance analysis, optimize CSS selectors, reduce paint areas, and efficiently handle animations. Discover tips for debouncing input handlers, promoting frequently updated elements, and managing GIF performance. Follow along with a live performance audit and gain insights to enhance the rendering performance of your web applications across various devices.

Performance Beyond Page Load

JSConf

Add to list

#Conference Talks #JSConf #Computer Science #CSS Animation

0:00 / 0:00