Fix Performance with Hardware Acceleration Off in Chrome

[taskade]

Hello everyone, I've recently discovered that our website fails to load when Hardware Acceleration is turned OFF in the latest version of Chrome (114).

 

Does anyone have any suggestions or tips on how we might enhance scrolling and loading performance with Hardware Acceleration turned OFF?

 

Please take a look at our site here: https://www.taskade.com (please ensure Hardware Acceleration is off).

 

Videos are also failing to load with acceleration off, but fine with it on.

 

Thanks everyone.

[Rodrigo]

Hi,

 

Why would a regular user disable hardware acceleration(HA)? Honestly in over 10 years of working in web development this is the first time I someone paying attention to that. I assume is for incrementing battery life or something like that.

 

What you could try is to create different animations that work better without HA and use this package to check:

https://www.npmjs.com/package/detect-gpu

 

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. I assume that those still work without GPU.
2. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
3. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
4. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
5. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
6. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
7. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
8. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

I hope this helps!  💚