Optimizing H5 Network Requests with Preload and Preconnect

preload is used to prioritize the loading of key resources, and preconnect is used to establish domain name connections in advance. The correct way to use it is: 1. Preload is applied to the home screen CSS, JS, pictures, fonts and key JSON data, pay attention to correctly setting the as attribute and avoid abuse; 2. Preconnect is suitable for references to external resources such as CDN, third-party fonts, statistical scripts, etc., perform DNS resolution, TCP handshake and TLS negotiation in advance; 3. Avoid repeated preloading or pre-connection, combine font-display: swap to speed up font rendering, give priority to mobile applications, and verify the effect through DevTools test.

During the H5 page loading process, optimizing network requests is the key to improving performance. Using preload and preconnect can effectively reduce the loading latency of critical resources, thereby speeding up the first screen. But how to use it? Not all resources are suitable for preloading, and not all domain names are worth connecting in advance.

What are preload and preconnect?

preload is a declarative method that tells the browser that the current page will use a certain resource immediately and should be loaded first. It is usually used for key resources such as fonts, scripts, style sheets, etc.

preconnect allows the browser to establish a connection with a domain name in advance (DNS resolution, TCP handshake, TLS protocol negotiation), reducing the delay in subsequent requests.

Using both together can significantly improve page loading efficiency, especially when using external resources (such as CDN).

When to use preload?

The core of using preload is to identify resources on "critical paths". for example:

• CSS and JS files used on the first screen
• Pictures or fonts used on the first screen
• Key JSON interface data (partial scenarios)

For example:

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

A few points to note:

• To write as attribute correctly, the browser will use different loading strategies according to the type
• Font resources need to be added with crossorigin , otherwise they may be loaded repeatedly
• Don't abuse it, too many preloads will occupy bandwidth, which will slow down key resources.

When to use preconnect?

When you reference resources of external domain names on your page, such as CDN, statistics scripts, and advertising resources, it is necessary to establish a connection in advance.

For example:

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

Common usage scenarios:

• Use Google Fonts or third-party font services
• Images, videos, scripts and other resources come from multiple CDNs
• Third-party JS SDKs (such as payment, statistics)

Some details need to be noted:

• The same domain name does not require preconnect multiple times
• If you use dns-prefetch , it is actually similar to preconnect, but only does DNS resolution and does not have TCP and TLS stages

Some tips in actual use

• Font resources : Slow font loading is a common performance bottleneck. Combining preload and font-display: swap can avoid page blanking or blocking rendering.
• Mobile priority : Mobile networks are slower, and the improvements brought by preloading and pre-connection are more obvious.
• Loading on demand : Do not preload non-first screen resources, you can use lazy loading or lazy loading strategies.
• Test verification : Use Chrome DevTools' Network panel to view the resource loading order and confirm whether it has actually loaded in advance.

Basically that's it. Make good use of preload and preconnect, without complex configuration, but you need to understand the resource loading process. The key point is to identify which resources are really important and tell the browser in advance "I want to use them soon."

The above is the detailed content of Optimizing H5 Network Requests with Preload and Preconnect. For more information, please follow other related articles on the PHP Chinese website!