This is probably relatively simple, but unfortunatly it's not an easy thing to google.

A client has tasked me with making a little 404 page runner game, similar to the google dino game. It runs fairly well despite using a ton of css animation.

My big problem right now: every once in a while there is a 'Commit' task called that lags the game for a second. It's sometimes enough to make the player lose.

Commit event

All I can tell is that it might be something to do with rendering the CSS. But google has turned up empty.

I would apreciate any tips on how to minimize the effects of whatever this is. Thank you!

This is probably relatively simple, but unfortunatly it's not an easy thing to google.

A client has tasked me with making a little 404 page runner game, similar to the google dino game. It runs fairly well despite using a ton of css animation.

My big problem right now: every once in a while there is a 'Commit' task called that lags the game for a second. It's sometimes enough to make the player lose.

Commit event

All I can tell is that it might be something to do with rendering the CSS. But google has turned up empty.

I would apreciate any tips on how to minimize the effects of whatever this is. Thank you!

• javascript
• css
• web-performance

• Did you end up figuring out what this "Commit" task was referring to? Running into this issue myself currently :( – Sankeeth Ganeswaran Commented Sep 20, 2023 at 16:59
• Commit, or positor mit is a step in Chrome's rendering pipeline. More info here: developer.chrome./articles/blinkng – ivanjermakov Commented Nov 21, 2023 at 23:21
• Have you fixed this Issue ? If yes, Can you share what all things you done in order to fix this issue? I'm currenly facing the same issue. – AMAL MOHAN N Commented Jan 10, 2024 at 11:04

3 Answers 3

Maybe you could inspect your code keeping 'The pixel pipeline' in mind -> https://web.dev/rendering-performance/

When animating on the web you want to keep the pipeline as short as possible.

For example: if you want to animate an element moving from left to right you could animate the left value but this will cause a layout recalculation followed by paint and posite. You could do the same thing by using transform: translateX(), this will only cause a posite recalculation which is much shorter.

Maybe these articles also help:

• https://web.dev/animations-overview/
• https://gist.github./paulirish/5d52fb081b3570c81e3a
• https://web.dev/avoid-large-plex-layouts-and-layout-thrashing/

I had Commit tasks taking up to 5 seconds. The problem went away when I disabled "Enable advanced paint instrumentation (slow)".

I found switching my app from WebGL mode to Canvas avoided the slow "Commit" performance problem entirely, though why chrome suddenly started chugging from WebGL is still a question. Edge and Firefox did not have these issues.