What Is Preload?
Preload (rel="preload") is an HTML rel attribute value that instructs the browser to fetch a specified resource (like a script, font, or stylesheet) early in the page load process.
The resource is not needed right away, but will be required shortly after the rendering begins. Therefore, the code instructs the browser to preload the resource ahead of time so that it is available when needed.
In response, the browser downloads the resource and stores it until it is needed. Without preloading, the browser will only begin loading the resource when it encounters it while parsing the HTML code.
That said, preload is considered a resource hint. That is, it is part of a group of HTML directives that instruct browsers on how to load resources on a webpage. Prefetch and preconnect are also types of resource hints.
Example of a Preload Code
Preload is a value of the rel attribute. It is written rel="preload" and is inserted into the HTML link tag. For example, the code below instructs the browser to preload the style.css file.
<link rel="preload" href="style.css" as="style">
Il as attribute in the above code indicates the resource is a stylesheet. Its value can vary depending on the type of resource being preloaded. For example, its value will be set to sceneggiatura if the resource is a JavaScript file.
<link rel="preload" href="main.js" as="script" />
Overall, the as attribute allows the browser to optimize the loading, security, and caching of the resource. While it is not compulsory, it is usually required for preload to work correctly on most browsers.
Benefits of Preload
Preload is helpful for improving both user experience e page speed. From an SEO perspective, these improvements can positively impact the signals and systems that Google uses to evaluate page experience, which is a known ranking factor.
This is crucial as browsers, by default, load resources only after they are discovered. For example, browsers discover and load fonts typically after parsing the stylesheet. As a result, fonts may load late.
This can lead to cumulative layout shifts (CLS), where content moves unexpectedly and causes visitors to click buttons and links they did not intend to click. This hurts the user experience. The cumulative layout shift itself is among the signals that Google uses to assess your core web vitals, which it uses to evaluate your page experience.
However, by preloading the font files, developers and browsers ensure the fonts are fetched early and available when the browser needs them. This reduces layout shifts and improves both usability and page experience metrics.
Difference Between Preload and Prefetch
The preload rel value is closely related to prefetch (rel="prefetch"), which is another HTML rel value and resource hint that is used to fetch resources before they are needed. Their major difference lies in how they are used.
- Preload is used to fetch resources that volere be required
- Prefetch is used to fetch resources that may be required
Developers use preload when they know the resource will soon be required, so the browser starts downloading it early to improve performance.
However, if the developer feels the resource may be needed, maybe based on how the user interacts with the page or the page they visit after the current page, then they use prefetch instead.
Limitations of Preload
While important for page load speed and user experience, preload can cause issues when misused or applied inappropriately. This can cancel out its benefits and may even slow down the page load speed, page experience metrics, and harm the user experience.
1 It Increases the Initial Page Load Size
The preload value forces the browser to fetch resources earlier than they usually would. This increases the amount of data downloaded during the initial load. This can slow down the page load speed on slow connections.
2 It Can Interfere with Lazy Loading
Many developers implement lazy loading to defer the loading of non-essential resources until they are needed. However, preloading can interfere with lazy loading by forcing it to load the resources earlier than it would. This can reduce the overall benefit of lazy loading.
3 It Can Waste Bandwidth
Some developers may preload resources they expect to be used but ultimately end up unused. This wastes the server’s bandwidth and increases the user’s data usage.
To avoid this, it is recommended to use prefetch (rel="prefetch") for resources you are unsure about. Preload should be reserved for resources that will be needed.
Preload Best Practices
Preload is a great asset for developers who want to improve their page load speed, user experience, and page experience metrics. However, to get the most out of it, and avoid any undesirable effects, it is important to follow some key best practices.
1 Only Preload Critical Resources
Only use preload with assets that directly impact the initial rendering. For example, above-the-fold CSS and custom fonts. Other non-critical resources should not be preloaded as they can make the initial load heavier and can waste bandwidth and mobile data if unused.
2 Ensure the Resource Is Not Too Large
The preload value should only be used with light resources. If you use them with large resources, even if they are critical, then it can delay the browser’s ability to render other content. This can hurt the user experience and slow down the page load speed, rather than speed it up.
3 Always Include the as Attribute
The browser uses the as attribute to identify, prioritize, and cache the resource. For example, as="style" indicates the resource is a stylesheet while as="script" indicates it is a script.
Il as attribute is not compulsory. However, it is recommended as the preload may fail or behave unpredictably when it is missing. So, ensure to always include it in your preload code.
4 Include the Crossorigin Attribute for Fonts
Make sure to include a CORS crossorigin attribute when preloading fonts. This is necessary for security reasons, otherwise the browser may download the font twice, the first during preload and again when it is actually used.
<link rel="preload" href="/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
The value of the crossorigin attribute can be set to anonymous o use-credentials.
You use anonymous when you want to fetch the resource without sending the user credentials like cookies or authentication headers, while you use use-credentials when the resource requires credentials to be sent with the request.
5 Include the Preload Code Early in the <Head> Tag
Place preload tags near the top of the <head> tag. This ensures the browser discovers the tags quickly and begins to preload the required resources.
Late preloads may not fetch resources early enough to matter. This maximizes the time between preload and when the resource is needed.
6 Do Not Overuse the Preload Value
Preload consumes bandwidth and CPU resources. It can also delay high-priority resources, including the page’s HTML itself, from loading quickly. So, ensure to not overload your pages with excessive preloads. It is good practice to only preload four to six resources per page.
7 Include the Standard Tag in the Code
The preload value only fetches the file. It does not apply it to the webpage. For example, a preload code can load a font. However, it will not apply the font to the page. So, make sure to include the standard tag later in the code.
The standard code will then apply the already preloaded resource to the page. For example, if a webpage contains this code to preload a stylesheet:
<link rel="preload" href="/styles/main.css" as="style">
It must also contain the standard code below:
<link rel="stylesheet" href="/styles/main.css">
Without the standard code, the preloaded resource will not be used even though it will be feteched. This will lead to CPU, data, and bandwidth wastage. It can also cause user experience issues.
8 Include the imagesrcset Attribute for Responsive Images
Be sure to include the imagesrcset attribute when preloading responsive images. It serves as the preload equivalent of the HTML srcset attribute and ensures the correct image size is loaded based on the device. This helps avoid loading oversized or low-quality images.
<link rel="preload" as="image" href="img-1x.jpg" imagesrcset="img-1x.jpg 1x, img-2x.jpg 2x">
9 Avoid Preloading Non-Render-Blocking Resources
Render-blocking resources prevent webpages from rendering until those resources are downloaded and processed. It is generally good practice to preload critical render-blocking resources like fonts, stylesheets, and above-the-fold images as it can help to improve page speed and user experience.
At the same time, you should avoid preloading non-render-blocking resources like async scripts, lazy-loaded images, and deferred CSS, as they don’t benefit from preload and may waste bandwidth.
10 Preload Third-Party Scripts Sparingly
The optimization and performance of third-party scripts are typically out of your control. They can slow down your page from loading more critical resources, which will negatively impact your user experience and page speed.
This is why it is recommended to avoid preloading third-party scripts unless they are render-blocking. Instead of preloading third-party scripts, use the preconnect value rel="preconnect" for non-render-blocking third party scripts instead.
11 Monitor How Preload Impacts Your Site’s Performance
Over-preloading can hurt the site’s performance if misconfigured. To avoid such issues, ensure to test your pages with and without the preload code. Preload should improve your metrics. If it does not, then there is an issue somewhere.