Open the network panel, reload, and look at the SHAPE before reading anything. Four shapes cover almost every slow page, and each points somewhere different.

1. One long bar at the top, then everything else

The document itself took most of the time. That is server time, and nothing about images or scripts will change it. Go and measure TTFB.

2. A staircase

Each request starts when the previous one ends. Something is discovered only after something else has loaded - a stylesheet that imports another, or a script that inserts a script. Each step is a full round trip.

<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>

3. A wall, then a long tail

Everything starts at once and a few take far longer. Those few are usually third-party: an analytics script, a chat widget, a font from another domain. Your server is fine and the page still is not.

A third-party script in the head with no async or defer blocks rendering on THEIR server's response time. Their outage is your blank page.

4. A large gap before the first paint

The bytes arrived and nothing was drawn. Render-blocking CSS or a font waiting to swap. Look at the size of the first stylesheet and at font-display.

@font-face { font-display: swap; }

The three columns worth reading

  • Waiting (TTFB) - the server thinking.
  • Content Download - the bytes moving. Large here means the file is too big.
  • Queueing / Stalled - waiting for a connection. Large here on HTTP/1.1 is why HTTP/2 exists.
Test on a throttled connection, not on your own. On a fast desktop link almost everything looks fine, and your visitors are on a phone.