Learn Performance - Resource Hints

preload - img

This demo includes the same preload hint as the previous example, but uses regular img elements to render the image grid.

Image 1
Image 1 Image 2 Image 3 Image 4

WebPageTest waterfall chart showing seven resources. The fourth resource, image-1.jpg is downloaded as it is discovered.

The above chart shows the loading times for this page. The first image download is initiated using link rel="preload".

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.

When comparing the two charts, there is little or no improvement. This is because the img's src attribute is discoverable by the preload scanner and it is not a late-discovered resource.

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>