Extra render time in Chrome Dev Tools Timeline Frames

Question

There are plenty of videos and tutorials out there geared towards reducing the compositing, layout, and paint times for a frame using Dev tools, but I'm not clear of what to do once those times are well below the allotted time, but the frame still takes far too long to render.

Any tips on determining what exactly is happening in a frame that causes it to render so slowly?

Answer 1

Paul Irish and Paul Lewis touch this topic briefly here. According to this video, white bar indicates browser waiting for a CPU or a GPU and there is nothing that developer can do to fix this (assuming that he is working on a 'standard' website with no canvas/webGL). However, IMO both Pauls don't sound very convincing when talking about this. I guess, it's just hard to explain briefly (and maybe 8 sips of beer that I've counted from the beginning of the video are to blame :) ).