Articles by Paul Lewis

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.

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.