Why am I seeing a long time to first byte (TTFB) on WebPageTest.org?

WebPageTest is a common tool that's used to examine site performance. It can generate a detailed waterfall with information on each request.

If you're using this tool to determine the speed of loading for your assets (and specifically your images), you might be seeing an image similar to the one below, which shows a relatively long time to first byte (TTFB):

This happens when using HTTP/2, which Cloudinary uses by default to deliver assets. (HTTP/2 requires HTTPS.)

With HTTP/1.1, the browser opens multiple connections, each requesting a single asset. HTTP/2 opens a single connection to the domain and uses it to transfer all asset requests.

HTTP/2 also prioritizes assets by importance. The browser loads critical assets like JavaScript and CSS before less important ones like images.

When the browser follows these priorities, it requests images last. Even though the connection is already open, the image request waits in the queue, which appears as a long TTFB. This is normal HTTP/2 behavior.

There are two main tips for reducing TTFB in this case:

• Move non-critical JavaScript and CSS references lower in your HTML, so the browser requests images higher on the page sooner and they spend less time waiting in the queue.
• Use the preconnect link relation. When applied to HTTP header responses, preconnect tells the browser to establish the HTTP/TLS connection early, before other resources start loading. This moves the handshake, which normally blocks other activity, to a time when the browser would otherwise be idle, allowing subsequent requests process immediately.