WebPageTest is a common tool that is used by many to examine site performance. It can generate a beautifully detailed waterfall with great information on each request.
If you are 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 can be seen in most cases when using https and specifically http2, which Cloudinary uses by default to deliver assets.
When HTTP/1.1 is used, the browser will open multiple connections where each one requests a single asset. HTTP2 opens a single connection to a domain, and that connection transfers all the requests for assets
When these priorities are honored, the browser gets the least important images last, although the connection has already been established which shows as long TTFB.
This is the normal browser behavior and is something that is expected when using HTTP2, which as mentioned earlier, is used as default by Cloudinary when delivering assets.
There are two main things that can be done to reduce TTFB in this case:
- Re-arrange assets that are not crucial to page loading that appear on the top of the page, so JS and CSS would appear at the bottom of the page.
- Use the preconnect link relation. What the preconnect link relation does (particularly when applying it to the HTTP header responses) is that it enables the browser to do the HTTP/TLS handshake as soon as possible. This means that the browser gets to do the HTTP/TLS handshake before other components start there activity. This moves the handshake time (which is a time which blocks other activity from being performed) to the margins when the browser isn't yet doing anything and readies the connections for handling request/responses as fast as possible.