wtf( )unctionsystem design, drawn
← all problemsWeb PerformanceMedium

Where the four seconds actually went

The largest element on the page finishes painting four seconds in. "Optimise the image" is the usual answer and it is usually the wrong one, because the download is only one of four consecutive stretches of time.

The four run back to back and add up to the whole measurement. Knowing which one is big tells you what to fix; not knowing means guessing.

Put the four stretches in the order they happen.
?Each of the four has a completely different fix, so naming the wrong one wastes the whole effort.

Outside every boundary: Navigation starts (the clock starts), The largest element (an image, usually), It paints (the clock stops) Connections: Navigation starts calls The largest element The largest element calls It paints — four stretches, back to back

Navigation startsthe clock starts
The largest elementan image, usually
It paintsthe clock stops
Happens first
Your order
    Nothing yet. Tap them on the left, best first.
Order them by happens first. Tap to place, tap again to take back.