From the HTML Standard, you can see that the Link Types have types that should also be used in daily performance optimization, such as dns-prefetch / preconnect / prefetch / preload and other resource preloading techniques.
So, what are the differences between them and how can they be used correctly to improve page performance?
First, for a resource request, the general stages are as follows:
<link src="https://example.com" ...>
dns-prefetch#
<link src="https://example.com" rel="dns-prefetch" ...>
preconnect#
<link src="https://example.com" rel="preconnect" ...>
prefetch#
<link rel="prefetch" src="./image.jpg" as="image" />
From the name, it means pre-caching resources, and then when this resource is needed, it is directly retrieved from the browser cache, thereby improving the user experience.
There are two types of prefetch loading strategies:
- Predictive Prefetching: The browser predicts future pages that the user may visit based on user behavior and historical data, and preloads relevant resources in the background. This strategy can preload resources before the user actually clicks on a link to reduce page load time.
- Eager Prefetching: Explicitly specify the resources that need to be preloaded in HTML. These resources may be required for the current page or resources from other pages. By preloading these resources, the subsequent page load time can be reduced.
Now we are discussing the second case.
It should be noted that browsers may not necessarily execute prefetch. Although prefetch is a suggestive loading strategy, whether to execute the preloading depends on the browser's implementation and strategy.
When the browser parses the HTML page, it detects the prefetch tag and decides whether to execute the preloading based on its own strategy. The browser may consider multiple factors, including the current network connection, system resource usage, user behavior, etc. If the browser believes that executing the preloading will have a positive impact on the user experience, it may choose to execute the preloading; otherwise, it may ignore the prefetch tag.
Therefore, we cannot rely entirely on the browser to execute prefetch, but should consider prefetch as an optimization measure to improve the user experience. At the same time, we should also use prefetch reasonably to avoid excessive preloading leading to unnecessary network traffic and resource waste.
preload#
<link rel="preload" src="./image.jpg" as="image" />
preload is a mandatory loading strategy. Unlike prefetch, the browser will immediately execute the preloading operation.
There are two scenarios for the preload loading strategy:
-
Eager Preloading: Use the
<link rel="preload">tag in HTML to specify the resources that need to be preloaded. These resources can be resources required for the current page or resources from other pages. By preloading these resources, the subsequent page load time can be reduced. -
Implicit Preloading: The browser automatically determines the resources that need to be preloaded based on the reference relationships in the page's HTML, CSS, and JavaScript code. For example, when the browser parses the HTML page and finds that an image element is dynamically created and inserted into the page by JavaScript, the browser may automatically preload that image resource.
It should be noted that preload is a mandatory loading strategy, and the browser will immediately execute the preloading operation regardless of the current network connection. This ensures that some key resources have been preloaded during page loading and can be used immediately in the subsequent rendering process.
Similar to prefetch, when using preload, we need to carefully evaluate the resources to be preloaded, the consumption of network bandwidth, and the actual impact on the user experience.
For example, if the user's network bandwidth is not high or the device performance is relatively low, a large number of preload resources will greatly affect the user experience.
--EOF--