Two Hardware-Accelerated CSS Tricks To Boost Your Web Performance

If you build mobile applications, you may be familiar with the notion that native apps provide better performance than their web-based counterparts. However, it's important to understand what better performance exactly means.

In the above context, performance is often referenced in terms of measurable factors such as the loading time and responsiveness to user interactions. However, performance can also sometimes reference how smooth the animations and transitions are in the app. This is particularly true in terms of eCommerce because D2C stores need also to be heavily customized, with a differentiated user experience.

Native apps have the advantage of being able to access the device's GPU, allowing for smoother graphics and transitions. Web apps, however, run within the browser and rely on the software for rendering, which can result in weaker performance.

Thankfully, technological advancements now allow browsers to implement hardware acceleration through specific CSS rules, closing the gap between native and web app performance.

Here’s how.

Utilize CSS Animations and Transitions.

Instead of relying on a library's animate() function, which may use outdated technologies like setTimeout() or top/left positioning, take advantage of the optimization capabilities of the browser by using CSS animations. CSS transitions can also be utilized for similar effects.

Using CSS for animations and transitions allows you to maintain a consistent look and feel for your app while also taking advantage of a standardized syntax. Additionally, the browser's GPU use helps minimize the impact on processor performance.

Unleash the Power of the GPU in Web Applications.

CSS animations perform well in browsers since they can handle properties without triggering a reflow or repaint. To enhance performance, the animated node can be moved to the GPU instead of the main thread.

Properties such as 3D transform (transform: translateZ(), or rotate3d()), animating transform, and opacity, position: fixed, will change, and the filter will lead to compositing and are best suited for animation on the GPU.

Elements like video, canvas, and iframe also have their layer; promoting them as a layer or compositing them can result in improved animation performance, especially on mobile devices. For example:

.my-element { transform: translate3d(300px,300px,300px) rotate3d(300px,300px,300px,-240deg) scale3d(1.5, 1.5, 1.5); }

There may be instances where you wish to utilize GPU acceleration without applying a 3D transformation to an element. Certain CSS properties can trick the browser into activating GPU acceleration in such cases.

Though the element is not animated within 3D space, it is possible to enable 3D rendering using the transform: translateZ(0); declaration. This method has proven to be the most efficient way of activating GPU acceleration in current desktop and mobile browsers.

.my-element { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /* Other transform properties */ }

Before you start applying hardware-accelerated CSS to your app, remember this: only use the techniques discussed for animated elements. While they can certainly enhance performance, indiscriminate applications can do more harm than good.

Stay tuned for more tips on taking your app to the next level.