LearnIncrease Site Performance With CSS Hardware Acceleration

   
Avatar

Guil Hernandez
writes on February 8, 2023

Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU (Graphics Processing Unit) for better rendering performance in the browser?

Computers have graphics cards suitable for CSS hardware acceleration. Because of this, we can leverage GPU power for those heavier features so that our sites and applications can perform faster than is possible in browsers running on the CPU.

In this article, we’ll cover the use of CSS hardware acceleration on desktop and mobile browsers.

CSS Hardware Acceleration on Desktop and Mobile Browsers

Ever wondered how some CSS animations run so smoothly in the browser?

CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine.

So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU-accelerated rendering using certain CSS rules.

Currently, browsers like Chrome, FireFox, Edge, and Safari all ship with hardware acceleration. With CSS, the strongest indication of acceleration is that a 3D transformation is being applied to an element.

For example:

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

In some cases, you might not want a 3D transformation on the element, but still wish to take advantage of GPU acceleration. That’s when a few simple CSS properties come in handy that trick the browser into triggering GPU-accelerated rendering.

Even though we’re not animating an element in 3D space, we can enable 3D rendering. At the very least, the transform: translateZ(0); declaration triggers GPU acceleration in modern desktop and mobile browsers.

This seems to be the most effective way of triggering GPU acceleration (all vendor prefixes included):

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

In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. The following declarations can be used to fix the issue:

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

Another method that seems to work well in WebKit-powered desktop and mobile browsers is translate3d:

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

Native mobile applications also make good use of the device GPU –– that’s why they’re known to perform slightly better than Web apps. Using CSS hardware acceleration can be especially useful on mobile devices because it helps reduce resource consumption on the device.

GPU-Accelerated Rendering in CSS: Final Thoughts

The methods we covered should only be used on the elements we’re animating. They might improve performance on 2D transforms, but it’s not wise to use them on everything just for the sake of hardware acceleration.

Be careful with each of these methods and only use them if you experience a true performance win. Using the GPU unnecessarily can cause significant performance issues because it increases memory use –– it will also affect the battery life on mobile devices.

Learn More About CSS With Treehouse

Want to learn even more about CSS? Treehouse offers a wide range of courses and tracks to help you do just that. Whether you’re a beginner programmer or a seasoned coder, we have a course for you. Get started today by signing up for a free trial of Treehouse.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

14 Responses to “Increase Site Performance With CSS Hardware Acceleration”

  1. Do I need to this to every class?

  2. Jason Yang on January 27, 2017 at 3:38 pm said:

    Hey Guil

    Thanks for the informative post, and I want to ask a question.

    In one of the project I’ve worked on recently, I’m seeing some flickering issue on old Chrome (version <= 34) and some Chrome based Android native browser (Samsung, LG, Motorola… also with version <= 34) while using some CSS transform animations. Enabling GPU acceleration seems to be helpful in some cases but not for all.

    For the solution you posted, I'm wondering why we need the 'prespective: 1000;' after turning off the backface-visibility?

  3. Dominik on April 7, 2016 at 7:50 am said:

    Have in mind when you place this on a img, which will display a gif, it will get faster in some browsers. But in the native browser of Samsung Galaxy Express it will cause the .gif to stop working. So use with care.

  4. i used it on my web app and tested it on L820 windows phone 8.1 using multiple browsers. i do not see any improvements (may be minor, but nothing noticeable).

  5. Philip Paetz on October 1, 2013 at 1:47 pm said:

    this is usually due to webkit switching between subpixel- and full anti-aliasing: http://maxvoltar.com/archive/-webkit-font-smoothing

    i like to use -webkit-font-smoothing: antialiased as a default which fixes the problem for me

  6. carrie on July 26, 2013 at 1:10 am said:

    Excellent post. Yes-pay

  7. Thanks, Guil. I’ll bear that in mind.

  8. bouazza on July 5, 2013 at 12:21 pm said:

    thank a lot

  9. I hate Android on May 27, 2013 at 2:30 pm said:

    Thank you, finally I got the point, but one thing come out: on ios it is very helpfull for animations but on android based devices it’s not working even more it’s just destroy site performances. The only thing left is I hope to find an alternative method or wait till Android will one day will start work with it.

  10. Thank you Ben..Now I think I am better than the most stuednts around me..I know how to creative a App but they don’t 🙂 Bread from China

  11. Seth @ FBT on April 4, 2013 at 5:25 am said:

    Finding a comprehensive beginners guide to Android development is very hard. This post covers everything required to get started with Andriod development. Thanks a lot Ben.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop