Learn Performance - Resource Hints

preload

The preload resource hint instructs the browser to initiate a request for a resource. This is helpful when a critical resource is not immediately discoverable, for example a background-image URL.

This demo uses uses CSS background-image to create the image grid below, as opposed to img elements. To download the first image quicker, the page includes a preload hint for the first image resource. 

<link rel="preload"
      href="https://cdn.glitch.global/db01a8e4-9230-4c5c-977d-85d0e0c3e74c/image-1.jpg?v=1669198400523"
      as="image" />

WebPageTest waterfall chart showing seven resources. The fourth resource, image-1.jpg begins downloading at the same time as the other critical resources.

Looking at the waterfall chart above, you should notice that image-1.jpg is requested at approximately the same time as the CSS and JavaScript files, while the other images are requested after the CSS file is downloaded and parsed.

WebPageTest waterfall chart showing seven resources. The fourth resource, image-1.jpg is downloaded as it is discovered but has a longer download time than some other image resources.

If you remove the preload hint from the image-1.jpeg, you can see that the image is requested a full second later.

Only use preload for late-discovered resources. The next demo explains that using an img element would result in an equally fast experience since the image src is discovered by the preload scanner.

View Source Code 
<head>
  <link rel="preload" href="https://cdn.glitch.global/db01a8e4-9230-4c5c-977d-85d0e0c3e74c/image-1.jpg?v=1669198400523" as="image" />
</head>