Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Latest contributions from Paul Lewis

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.

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.

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.

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.

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.

CSS Versus JavaScript Animations

You can animate with CSS or JavaScript. Which should you use, and why?

Animating Modal Views

Learn how to animate modal views in your apps.

Animating Between Views

Learn how to animate between two 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.

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!

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.

Asymmetric animation timing

Breaking symmetry provides contrast and appeal to your projects. Learn when and how to apply this to your projects.

Chrome Dev Summit: Performance Summary

Performance Matters

Introduction to Custom Filters (aka CSS Shaders)