Paul is a Design and Perf Advocate
Building performant expand & collapse animations
When making expand and collapse effects you can use scale transforms to keep your UI performant.
Performant Parallaxing
When used judiciously paralaxing can add of depth and subtlety to a web app.
CSS Containment in Chrome 52
The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work.
Canvas toBlob() Support Added in Chrome 50
Support for canvas.toBlob set to land in Chrome 50.
Chrome Supports createImageBitmap() in Chrome 50
Support for image decoding in workers set to land in Chrome 50.
Smooth Scrolling in Chrome 49
Tired of jittery scrolling? Great, because Chrome 49 is shipping with a new smooth scroll right out of the box!
History API: Scroll Restoration
An update to the History API to prevent unsightly scroll jumping.
Using requestIdleCallback
requestIdleCallback is new performance API for scheduling work when the browser is idle.
Avoid Large, Complex Layouts and Layout Thrashing
Layout is where the browser figures out the geometric information for elements: their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
Debounce Your Input Handlers
Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
Optimize JavaScript Execution
JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that result in visual changes, like searching or sorting data. Badly-timed or long-running JavaScript is a common cause of performance issues. You should look to minimize its impact where you can.
Reduce the Scope and Complexity of Style Calculations
JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.
Rendering Performance
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
Simplify Paint Complexity and Reduce Paint Areas
Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often the longest-running of all tasks in the pipeline, and one to avoid if at all possible.
Stick to Compositor-Only Properties and Manage Layer Count
Compositing is where the painted parts of the page are put together for displaying on screen.
Chrome Dev Summit 2014: The Applied Science of Runtime Performance
The story of building the Chrome Dev Summit site.
Developer feedback needed: Frame Timing API
A brand new API is in the works to help measure frames per second in the wild, but it needs your feedback.
Animating Between Views
Learn how to animate between two views in your apps.
Animating Modal Views
Learn how to animate modal views in your apps.
Animations
Get a better understanding of animations and their use in modern apps and sites.
Animations and Performance
Animations must perform well, otherwise they will negatively impact the user experience.
Asymmetric animation timing
Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
Choosing the Right Easing
Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!
CSS Versus JavaScript Animations
You can animate with CSS or JavaScript. Which should you use, and why?
Custom Easing
Go offroad and create totally custom animations for your projects.
The Basics of Easing
Learn how to soften and give weighting to your animations.
Chrome Dev Summit: Performance Summary
Performance Matters