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.
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.
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.
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
Compositing is where the painted parts of the page are put together for displaying on screen.
Learn how to animate between two views in your apps.
Animations must perform well, otherwise they will negatively impact the user experience.
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.
Go offroad and create totally custom animations for your projects.
Learn how to soften and give weighting to your animations.
Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.
Choose the appropriate easing for your project, whether that's easing in, out, or both. Maybe even use bounces for extra fun!