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.
Paul Lewis
Our latest news, updates, and stories by Paul Lewis.
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!
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.
Animating Between Views
Learn how to animate between two views in your apps.
Animations and performance
Animations must perform well, otherwise they will negatively impact the user experience.
Animating Modal Views
By using real user monitoring tools and focusing on improving Core Web Vitals in refactoring their app, they also improved CLS by 72%, as well as application responsiveness.
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.
CSS versus JavaScript animations
You can animate with CSS or JavaScript. Which should you use, and why?
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!