<link rel="preload" as="image" href="hero-image.jpg">
Note. Preloading is supported in Chrome, Edge, Safari, and Firefox 78+.
Preloading can significantly improve LCP, especially if you need critical images (like Hero images) to take precedence over other images on the page. While browsers struggle to prioritize the loading of images in the visible viewport, <link rel = preload> may increase the priority.
Note. The hero image is the main photo you see at the top of the webpage. This may be the largest content item visible in the viewport.
If you currently have:
- Img tags to load client-side React, Vue, or Angular components
- HTML code rendered on the client side responsible for loading images
- Background Hero images in CSS. They show up very late.
- for example, needs to get JSON from API for image discovery
- Using a webpack loader to load images
Preloading can significantly speed up image display. The key idea here is that you want the browser not to have to wait for the script before starting to load the image, as this can greatly delay the moment users can actually see it.
I use <link rel = preload> in many single page applications to optimize Core Web Vitals; in particular, how soon the main images visible in the viewport will load.
Above is a WebPageTest video loaded from a React based movie browsing app. The app uses client-side rendering (app.js) and also relies on fetching from the API to return a stream of JSON images (movies.json). This means that the browser may need to process app.js before it can receive the movies.json file and can detect the Hero image (poster.jpg).
Using Hero image preloading, Largest Contentful Paint (orange border) runs 1 second faster in 4G. This improves the user’s perceived performance as less time is spent waiting for meaningful content to appear in the viewport.
link rel = preload> can be used to optimize the loading of late-discovered images in several ways.
Preload the Hero image so that it is detected before JS issues the img:
<link rel="preload" as="image" href="poster.jpg">
Now that WebP support in browsers has improved, you may like that WebP images can also be preloaded:
<link rel="preload" as="image" href="poster.webp" type="image/webp">
Preload a responsive image to find the correct source faster:
<link rel="preload" as="image" href="poster.jpg" imagesrcset=" poster_400px.jpg 400w, poster_800px.jpg 800w, poster_1600px.jpg 1600w" imagesizes="50vw">
Preload the JSON as a fetch so that it will be detected before JS requests it:
<link rel="preload" as="fetch" href="movies.json">
In my case, movies.json requires fetching from different sources, which you can preload if you set the crossorigin attribute on the link element:
<link rel="preload" as="fetch" href="foo.com/api/movies.json" crossorigin>
For additional benefits, you can also pre-connect to the source this sample will be connected to:
<link rel="preconnect" href="https://foo.com/" crossorigin>
Preload JS to shorten the time it takes to discover from HTML:
<link rel="preload" as="fetch" href="app.js">
Note. Don’t overuse preloading (when all resources are important, none of them will take priority). Reserve this for critical resources that the browser preload scanner cannot find organically.
Preloading helps ensure that important images and assets are displayed as quickly as possible to users. To see if there is room for optimizing your app through preloading, try Lighthouse or PageSpeed Insights, which have auditing for preloads.
From the author: Preloading lets you tell the browser as soon as possible the critical resources you want to download, before they are found in HTML.