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.
Overview
Syllabus
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
Taught by
JSConf
