Logo

菜单

发布于 2026-01-06 1 阅读
0

It's time to speed up your website with rel="preload"

是时候使用 rel="preload" 来加速您的网站了

提升网站性能，每一毫秒都至关重要。缩短关键资源加载时间最有效的方法之一是使用 HTML 链接的 rel="preload" 属性。本文将深入探讨预加载的工作原理、适用场景以及它如何显著提升网站的用户体验。

rel="preload"是什么？

rel="preload" 属性允许您指示浏览器在页面渲染之前开始下载某些资源。通过这种方式，您可以确保字体、样式表或脚本等关键资源能够更快地获取，从而缩短页面完全渲染所需的时间。

简单来说，你是在提前告知浏览器哪些文件对于流畅的用户体验至关重要。

为什么要使用预加载？

大多数网页性能优化都侧重于缩短资源加载时间。预加载对于加载字体、CSS 或 JavaScript 文件等关键资源尤为重要，因为这些资源会直接影响页面的显示和运行速度。

以下是预加载如何发挥作用：

  • 减少渲染阻塞：通过预加载关键 CSS 或字体，可以避免页面在显示内容之前等待加载这些资源而导致的渲染阻塞问题。
  • 改善首次内容绘制 (FCP)：预加载可确保重要资源更快下载，从而提高用户首次看到视觉内容的速度。
  • 更好的用户体验：页面加载速度更快，响应更迅速，能够提升整体用户体验，尤其对于字体或主图等资源密集型素材而言更是如此。

语法和用法

我们先来看一个如何使用 rel="preload" 的基本示例。下面是一个简单的 HTML 代码片段，演示了如何预加载自定义字体：

<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Enter fullscreen mode Exit fullscreen mode

在这个例子中：

  • href指定资源的 URL。
  • 表示资源的类型（例如，字体、图像、脚本）。
  • type 参数有助于浏览器理解文件的确切格式（对字体很有用）。
  • 当从不同域加载资源时，需要使用crossorigin 标签。浏览器会识别到这个标签，并提前下载字体，即使使用该字体的 CSS 尚未生效。

预加载不同类型的资源
您可以预加载各种对页面渲染至关重要的资源。让我们来看一些常见的例子：

1. 预加载字体
字体通常是导致页面初始加载速度慢的主要原因。预加载字体可以确保文本在内容渲染后立即正确应用样式，从而防止出现未样式文本闪烁 (FOUT) 或不可见文本闪烁 (FOIT) 的情况。

<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Enter fullscreen mode Exit fullscreen mode

2. 预加载样式表
控制页面布局的关键样式表应该预加载，以确保浏览器能够尽快渲染页面。

<link rel="preload" href="/css/main.css" as="style">
Enter fullscreen mode Exit fullscreen mode

3. 预加载脚本
如果您有用户交互需要立即执行的 JavaScript，预加载它可以帮助减少脚本执行的延迟。

<link rel="preload" href="/scripts/main.js" as="script">
Enter fullscreen mode Exit fullscreen mode

4. 预加载图像
大图像，尤其是首屏上方使用的图像，应该预加载，以确保用户在获取图像时不会看到空白区域或图像占位符。

<link rel="preload" href="/images/hero.jpg" as="image">
Enter fullscreen mode Exit fullscreen mode

使用 rel="preload" 的最佳实践

虽然预加载功能强大，但使用时应谨慎。以下是一些最佳实践：

  1. 仅预加载关键资源：预加载所有内容实际上会降低网站速度。请仅预加载页面初始渲染所必需的资源。

  2. 对外部资源使用跨域配置：预加载来自不同域的资源时，请务必包含 crossorigin 属性。这可以确保资源能够被正确获取，而不会出现 CORS 问题。

  3. 确保正确处理缓存：预加载的资源应该可以缓存，以避免重复的网络请求。这可以减轻服务器和用户浏览器的负载。

  4. 不要预加载所有内容：过度预加载会给浏览器带来不必要的负担，导致性能下降。仅预加载关键渲染路径所必需的资源。

如何在您的网站上使用 rel="preload" 示例
以下是一个如何在典型网页中集成 rel="preload" 的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preload Example</title>

    <!-- Preload important resources -->
    <link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/scripts/main.js" as="script">
    <link rel="preload" href="/images/hero.jpg" as="image">

    <!-- Link stylesheet -->
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <header>
        <h1>Preload Example</h1>
        <img src="/images/hero.jpg" alt="Hero Image">
    </header>

    <script src="/scripts/main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

在这个例子中，我们预加载了必要的资源，例如字体、样式表和图像，这些资源会立即影响页面的渲染速度。

何时不应使用 rel="preload"

预加载虽然功能强大，但并非所有资源的万能解决方案。以下几种情况您可能需要避免使用预加载：

非关键资源：不要预加载对页面初始渲染并非必不可少的资源。

不可预测的资源：如果某些资源是有条件的或依赖于用户交互（例如首屏图片或延迟加载的 JavaScript），最好让浏览器在需要时获取它们。

结论：
使用 rel="preload" 是一种简单而有效的网站加速方法，它能指示浏览器尽快获取关键资源。通过预加载字体、样式表和图片等重要资源，您可以缩短加载时间并提升用户体验。

关键在于：只预加载关键内容，网站性能将显著提升。不妨在下一个项目中尝试一下，看看效果如何！

文章来源：https://dev.to/rajeshkumaryadavdotcom/speed-up-your-website-with-relpreload-166m
如何在不使用 Redux 的情况下...
Angular：如何使用异步管道轻...