Resource preloading ('<link rel="preload">')

Author：Chuan Chen 阅读数：61001人阅读分类： HTML

Resource Preloading ('<link rel="preload">')

Resource preloading is a web performance optimization technique that allows browsers to fetch critical resources in advance, reducing user wait times. By using <link rel="preload">, developers can explicitly instruct the browser to prioritize the loading of specific resources, thereby improving page rendering speed.

Basic Syntax and Working Principle

The basic syntax of <link rel="preload"> is as follows:

<link rel="preload" href="resource-url" as="resource-type">

When the browser encounters a preload directive while parsing HTML, it immediately starts downloading the specified resource but does not execute or apply it. The downloaded resource is cached and used only when actually needed. This approach is particularly suitable for preloading resources like fonts, critical CSS/JS, and large images.

Resource Types and the `as` Attribute

The as attribute specifies the resource type, helping the browser set the correct priority and request headers. Common types include:

script: JavaScript files
style: CSS files
font: Font files
image: Image files
audio: Audio files
video: Video files
fetch: Resources requested via fetch or XHR

Example:

<!-- Preload CSS -->
<link rel="preload" href="critical.css" as="style">

<!-- Preload font -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload image -->
<link rel="preload" href="hero-image.webp" as="image" type="image/webp">

Cross-Origin Resource Handling

When preloading cross-origin resources, the crossorigin attribute must be correctly set, especially for font files:

<link rel="preload" href="https://other-domain.com/font.woff2" as="font" crossorigin>

If the resource is fetched in anonymous mode, it can be explicitly specified:

<link rel="preload" href="font.woff2" as="font" crossorigin="anonymous">

Media Queries and Responsive Preloading

Media queries can be combined to achieve responsive resource preloading:

<link rel="preload" href="large-image.jpg" as="image" media="(min-width: 800px)">
<link rel="preload" href="small-image.jpg" as="image" media="(max-width: 799px)">

The browser will decide which resource to load based on the current viewport width.

Script and Module Preloading

For JavaScript files, regular scripts or modules can be preloaded:

<!-- Preload traditional script -->
<link rel="preload" href="app.js" as="script">

<!-- Preload ES module -->
<link rel="modulepreload" href="app.mjs">

modulepreload is specifically used for preloading ES modules and their dependencies.

Practical Use Cases

Critical CSS Preloading

<head>
  <link rel="preload" href="critical.css" as="style">
  <!-- Other head content -->
  <link rel="stylesheet" href="critical.css">
</head>

Font Preloading to Avoid FOIT

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
  }
</style>

Lazy Loading Images with Preloading

<link rel="preload" href="hero-image.webp" as="image">
<img src="hero-image.webp" loading="lazy" alt="Hero Image">

Performance Considerations and Best Practices

Preload only critical resources: Overuse can waste bandwidth.
Declare early: Preload tags should be placed in the HTML head.
Type matching: Ensure the as attribute matches the actual usage type.
Monitor effectiveness: Use Chrome DevTools' Performance panel to verify.
Fallback solutions: Consider browsers that do not support preloading.

<script>
  if (!('relList' in document.createElement('link')) {
    // Polyfill for browsers that don't support preload
    const preloadLinks = document.querySelectorAll('link[rel="preload"]');
    preloadLinks.forEach(link => {
      const as = link.getAttribute('as');
      if (as === 'script') {
        const script = document.createElement('script');
        script.src = link.href;
        document.body.appendChild(script);
      }
      // Handle other resource types...
    });
  }
</script>

Comparison with Other Preloading Techniques

prefetch: Used for resources likely needed in future navigations.
preconnect: Establishes a connection early but does not fetch resources.
dns-prefetch: Only resolves DNS.

<!-- Preload resources for the current page -->
<link rel="preload" href="critical.js" as="script">

<!-- Prefetch resources likely needed for the next page -->
<link rel="prefetch" href="next-page.js" as="script">

<!-- Pre-establish connection to a third-party origin -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- Pre-resolve DNS -->
<link rel="dns-prefetch" href="https://cdn.example.com">

Dynamic Preloading Techniques

Preload tags can be created dynamically via JavaScript:

function preloadResource(url, type) {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = url;
  link.as = type;
  if (type === 'font') {
    link.crossOrigin = '';
  }
  document.head.appendChild(link);
}

// Usage example
preloadResource('dynamic-image.jpg', 'image');

HTTP Header Implementation of Preloading

In addition to HTML tags, preloading can also be implemented via HTTP headers:

Link: </critical.css>; rel=preload; as=style

This is particularly useful when HTML cannot be modified, as it can be configured on the server.

Browser Support and Feature Detection

Modern browsers generally support preloading, but it can be detected via the following code:

const isPreloadSupported = () => {
  const link = document.createElement('link');
  return link.relList && link.relList.supports && link.relList.supports('preload');
};

if (isPreloadSupported()) {
  // Use preload
} else {
  // Fallback solution
}

Preloading and Caching Strategies

Preloaded resources follow regular caching rules, which can be controlled via the Cache-Control header:

Cache-Control: public, max-age=31536000, immutable

For frequently updated resources, consider using version control or unique filenames:

<link rel="preload" href="app.123abc.js" as="script">

Priority Control in Preloading

Browsers assign different priorities based on resource types:

CSS/fonts: Highest priority
In-viewport images: High priority
Scripts: Medium-high priority
Audio/video: Low priority

This can be adjusted via the fetchpriority attribute:

<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

Preloading Error Handling

The loading status of preloaded resources can be monitored:

const preloadLinks = document.querySelectorAll('link[rel="preload"]');
preloadLinks.forEach(link => {
  link.addEventListener('load', () => {
    console.log(`${link.href} preloaded successfully`);
  });
  link.addEventListener('error', () => {
    console.error(`${link.href} preload failed`);
  });
});

Combining Preloading with Web Font Optimization

A complete optimization example:

<head>
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'CustomFont';
      src: url('font.woff2') format('woff2');
      font-display: swap;
    }
    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

Impact of Preloading on LCP

Preloading critical elements can significantly improve LCP (Largest Contentful Paint) metrics:

<!-- Preload LCP candidate image -->
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

Preloading in Server-Side Rendering

In SSR frameworks, preload tags can be generated automatically:

// Next.js example
import Head from 'next/head';

function MyPage() {
  return (
    <>
      <Head>
        <link rel="preload" href="/critical.css" as="style" />
      </Head>
      {/* Page content */}
    </>
  );
}

Priority of Preloading and Resource Hints

When multiple resource hints exist, browsers process them in the following order:

preload
preconnect
dns-prefetch
prefetch

Risks and Misuse of Preloading

Improper use of preloading may lead to:

Wasted bandwidth
Priority contention for critical resources
Increased battery consumption on mobile devices

Actual effectiveness should be verified using tools like WebPageTest.

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML5页面加载优化策略

下一篇：懒加载与按需加载

Resource preloading ('<link rel="preload">')