Use <link rel="preload"> to actively load key resources, suitable for fonts, CSS, JS, etc., and need to be matched with the as attribute and placed in

; 2. Use <link rel="prefetch"> to prefetch resources that may be used in the future, suitable for the content of the next page, often dynamically added at the bottom of the page or through JavaScript; 3. Reasonably match dns-prefetch and preconnect to reduce DNS resolution and connection time, give priority to preconnect but avoid abuse; 4. Pay attention to the usage scenarios and priorities of preloading to avoid affecting the performance of the first screen and wasting bandwidth, and prevent common misunderstandings.

To put it bluntly, preloading or pre-acquisitioning resources means preparing the resources that may be used in the web page in advance to make the page load faster and the user experience smoother. The key is "early" and "precision". You cannot add it blindly, otherwise it will slow down performance.

---

1. Use <link rel="preload"> to actively load key resources

<link rel="preload"> is a way provided by the browser to let you tell it which resources are critical and should be loaded first.

• Suitable for key resources such as fonts, CSS, JS, and pictures.
• It needs to be used with as attribute to tell the browser resource type, such as: as="font" or as="script" .
• It works best in HTML .

For example:

 <link rel="preload" href="main.js" as="script">
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>

Note: Cross-domain fonts must be included with crossorigin attribute, otherwise the loading will fail.

---

2. Use <link rel="prefetch"> to prefetch resources that may be used in the future

rel="prefetch" prefers the optimization of "next visit" and is suitable for resources for linked pages, such as the page content that the user clicks and jumps.

• Commonly used to preload static resources such as CSS, JS, and pictures.
• Usually dynamically added at the bottom of the current page or via JavaScript.
• The browser will download these resources when it is idle, and will not affect the performance of the current page.

Example:

 <link rel="prefetch" href="/next-page.css">

You can also combine the mouse hover event to start prefetching before the user is ready to click:

 document.querySelector('a').addEventListener('mouseover', () => {
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = '/target-page.css';
  document.head.appendChild(link);
});

---

3. Reasonably match dns-prefetch and preconnect

Sometimes the bottleneck is not in the resource itself, but in the network connection. These two tags can help you save time in DNS resolution and TCP handshake.

• dns-prefetch : only performs DNS resolution, suitable for external CDN resources.

 <link rel="dns-prefetch" href="//example.com">

• preconnect : Not only parsing DNS, but also establishing TCP connections (even TLS), one step faster.

 <link rel="preconnect" href="//example.com">

It is recommended to use preconnect first, but be careful not to abuse it, as each consumes the number of connections to the browser.

---

4. Don't mess around, pay attention to usage scenarios and priorities

The more preloading, the better. Maybe it will affect the performance of the first screen and even waste bandwidth.

• Don't preload too many large files (such as HD videos).
• Do not preload at will on the mobile side, as users may be in a traffic environment.
• It can be dynamically determined whether to preload based on device type or user behavior.

Some common misunderstandings:

• Preload all pictures → slow down the first screen.
• Forgot to set the as attribute → The browser cannot correctly recognize the resource type.
• Loading HTTPS resources in non-HTTPS pages → A mixed content issue occurred.

---

Basically that's it. Reasonable use of preload and prefetch can make the page go up quickly, but the premise is that the right place must be used.

The above is the detailed content of How to preload or prefetch resources. For more information, please follow other related articles on the PHP Chinese website!