Oh no!

The use of animation and its impact on web performance

Before looking in more detail at how to animate the elements of a web page without sacrificing the page's overall performance, we need to understand the processes put in place by the browser to display the page.

Rendering process :

A web browser transforms code written in HTML, CSS and JavaScript into web pages. There are several key stages in this process:

  1. DOM construction: The browser reads the HTML and constructs the Document Object Model (DOM), which represents the structure of the page.
  2. Construction of the CSSOM: At the same time, the CSS is analysed to create the CSS Object Model (CSSOM), which describes the style of each element.
  3. Rendering tree: The browser merges the DOM and CSSOM to create the rendering tree, determining which elements are visible and how they should be styled.
  4. Layout: The browser calculates the position and size of each element.
  5. Paint: Elements are drawn on screen.
  6. Composite: If elements overlap, the browser must determine the correct order in which to display them.

A complex DOM with a lot of HTML tags should therefore be avoided because it takes longer to build.

A poorly constructed CSSOM with (non-exhaustive list) unnecessary styles, numerous linked style sheets, a complex cascade, external elements (fonts and images) can be very time-consuming to construct. As CSS can affect the layout of each element on the page, the browser must block rendering until the CSSOM is completely built. JavaScript can also cause problems, especially if it modifies the DOM or CSSOM.

Optimisation tactics :

CSS animations without compromising performance :

Basic principles:

Animate properties that don't involve recalculating the layout, such as transform() and opacity, for better-performing animations. The CSS3 transform() property performs well because it uses the machine's GPU. The opacity property does not use the GPU but does not change the layout, only the composite in the browser. What not to use: all CSS properties which result in a change to the page layout, such as display, position, width, height, padding and margin.

Use of will-change:

This property informs the browser of a potential change, allowing preliminary optimisation. The will-change property creates additional layers and can consume many resources if used excessively. It should be applied judiciously and removed after the animation. However, be careful not to overuse will-change as this can lead to excessive memory consumption. Avoid complex animations on properties that cause layout recalculations, such as width or height.

Take away:

It's important to pay attention to the CSS properties you use for your animations. Any property that causes a layout re-render is too resource-intensive. Instead, choose properties that use the GPU or act on the composite. To warn the CSSOM of future changes, use the "will-change" property. However, care should be taken as overuse can be counter-productive. Dynamically adding and removing this property can also improve its performance. Optimizing animations alone won't work wonders if the DOM and CSSOM are already faulty. Therefore, at the project level, minimize blocking CSS and JavaScript, optimize resources, and reduce the complexity of the DOM and CSSOM.

Links:

CRP (Critical Render Path) on MDN: https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path CSS triggers: https://csstriggers.com/ The CSS will-change property on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change Paul Irish's demo on how using position versus translate() affects performance: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Thanks for reading this

If you want to discuss this article, feel free to reach out to me (the link opens a new tab). I'd be happy to hear from you.

🖼️