Idle time in frame rendering in Chrome DevTools

Question

When doing research on web render optimization, i've encountered a strange render behavior on many popular websites. Big part of frame render time is empty space with no operations. Example from Apple promo page

The only thing that operates in that timeframe is a GPU. I couldn't find any cause for this behavior. What could be the reason behind this issue and how can i improve render time of such frames in my projects?

Answer 1

This is idle time, the time when the browser is waiting on the CPU or GPU to do some processing. It is shown in the pie chart screenshot in the documentation page How to Use the Timeline Tool.

I can't find any good explanation in the official document, but I just found something elsewhere:

The transparent areas of each vertical bar correspond to idle time, at least, idle on the part of your page. For example, say your first frame takes 15ms to execute and the next takes 30ms. A common situation is that frames are synchronized to refresh rate and in this case, the second frame took slightly longer than 15ms to render. Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.

Source: Improving Web App Performance With the Chrome DevTools Timeline and Profiles

I'll pass this SO thread onto someone I know of who writes documentation for Google. They might be able to better cover this topic.