释放速度：掌握 CSS 预加载以优化 Web 性能

在不断发展的 Web 开发领域，性能至关重要。用户期望闪电般的加载时间和无缝的交互。缓慢加载的网站可能导致更高的跳出率、降低的参与度，最终导致收入损失。优化 Web 性能的最有效技术之一是资源预加载，而 <link rel="preload"> 属性是您武器库中的关键工具。

什么是 CSS 预加载？

CSS 预加载是一个浏览器提示，它指示浏览器在页面加载期间尽早下载资源（在这种情况下，CSS 文件），*早于* 它被发现的时间。这确保了当浏览器需要 CSS 文件时，它已经准备就绪，从而减少了页面渲染的延迟并改善了用户体验。

可以这样理解：您没有等待浏览器解析 HTML，遇到 CSS 文件的 <link> 标签，*然后* 开始下载它，而是主动告诉浏览器立即获取 CSS 文件。这对于对于初始页面渲染至关重要的关键 CSS 尤其有益。

为什么 CSS 预加载很重要？

预加载 CSS 具有几个显著的优点：

改善感知性能：通过更早地加载关键 CSS，浏览器可以更快地渲染页面内容，给用户留下更快的加载时间的印象。这可以显著提高用户参与度和满意度。
减少首次内容绘制 (FCP) 和最大内容绘制 (LCP)：这些是 Google PageSpeed Insights 等工具衡量的关键性能指标。预加载 CSS 通过最大程度地减少渲染初始内容和页面上最大可见元素时的延迟，直接影响这些指标。在这里获得更好的分数直接转化为更好的搜索引擎排名和用户体验。
消除无样式内容闪烁 (FOUC)：当浏览器在 CSS 加载之前渲染 HTML 内容时，就会发生 FOUC，导致页面出现短暂的未样式化状态。预加载 CSS 通过确保在渲染内容之前可以使用样式来帮助防止 FOUC。
更好的资源优先级：预加载允许您明确告诉浏览器哪些资源最重要，确保它们以更高的优先级下载。当您有多个 CSS 文件时，这尤其有用，因为您可以优先考虑初始渲染所需的关键 CSS。
释放“关键 CSS”的力量：预加载是“关键 CSS”策略的基石，在该策略中，您内联了高于折叠内容的必要 CSS，并预加载了其余内容。这为您提供了两全其美的效果：立即渲染可见部分和高效加载其余样式。

如何实施 CSS 预加载

实施 CSS 预加载非常简单。您在 HTML 文档的 <head> 部分使用带有 rel="preload" 属性的 <link> 标签。您还需要指定 as="style" 属性以指示正在预加载的资源是 CSS 样式表。

以下是基本语法：

<link rel="preload" href="style.css" as="style">

示例：

假设您有一个名为 main.css 的 CSS 文件，其中包含您网站的样式。要预加载此文件，您需要将以下代码添加到 HTML 文档的 <head> 部分：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="preload" href="main.css" as="style">
  <link rel="stylesheet" href="main.css"> <!-- 普通样式表链接 -->
</head>

重要注意事项：

as 属性： as 属性至关重要。它告诉浏览器正在预加载的资源类型。如果没有它，浏览器可能无法正确确定优先级下载，并且预加载提示可能会被忽略。有效值包括 style、script、font、image、fetch 等。使用正确的值对于获得最佳性能至关重要。
普通样式表链接：您仍然需要包含标准 <link rel="stylesheet"> 标签用于您的 CSS 文件。预加载标签只是告诉浏览器更早地下载文件；它实际上并不会应用样式。当文件下载完成后，仍然需要标准样式表链接来告诉浏览器应用样式。
放置：将预加载链接尽早放置在 <head> 部分中，以最大限度地提高其有效性。浏览器越早遇到预加载提示，它就可以越早开始下载资源。

高级预加载技术

虽然 CSS 预加载的基本实现很简单，但您可以使用多种高级技术来进一步优化您网站的性能。

1. 媒体查询

您可以使用带有 media 属性的媒体查询来预加载仅针对特定屏幕尺寸或设备所需的 CSS 文件。这可以帮助减少下载的不必要的 CSS 量，尤其是在移动设备上。

<link rel="preload" href="mobile.css" as="style" media="(max-width: 768px)">

在此示例中，mobile.css 文件将仅在屏幕宽度为 768 像素或更小的设备上预加载。

2. 使用 JavaScript 的条件预加载

您可以使用 JavaScript 根据特定条件（例如用户代理或浏览器功能）动态创建预加载链接并将它们附加到文档的 <head> 部分。这允许您更智能地预加载资源，并将预加载策略定制给特定用户。

<script>
  if (/* 某个条件 */) {
    var link = document.createElement('link');
    link.rel = 'preload';
    link.href = 'conditional.css';
    link.as = 'style';
    document.head.appendChild(link);
  }
</script>

这种方法对于预加载仅在某些浏览器中需要的 polyfill 或其他资源很有帮助。

3. 预加载字体

预加载字体可以显著提高您网站的感知性能，尤其是在您使用自定义字体时。字体加载通常可能成为瓶颈，导致“不可见文本闪烁 (FOIT)”或“未样式文本闪烁 (FOUT)”。预加载字体通过确保浏览器需要字体时它们可用，有助于防止这些问题。

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

重要： 预加载字体时，如果字体来自不同的来源（例如，CDN），您必须包含 crossorigin 属性。出于安全原因，这是必要的。

4. JavaScript 模块的 Modulepreload

如果您使用 JavaScript 模块，rel 属性的 modulepreload 值非常有用。它允许浏览器预加载 JavaScript 模块*并*了解它们的依赖关系。这比简单地预加载主模块文件更有效，因为浏览器可以开始并行获取所有必需的模块。

<link rel="modulepreload" href="my-module.js" as="script">

要避免的常见陷阱

虽然 CSS 预加载是一项强大的技术，但了解一些可能抵消其好处甚至损害您网站性能的常见陷阱非常重要。

预加载所有内容：预加载太多资源实际上会降低您网站的速度。浏览器具有有限数量的并行连接，并且预加载非关键资源可能会与关键资源的加载竞争。专注于只预加载对页面初始渲染至关重要的资源。
未指定 as 属性：如前所述，as 属性至关重要。如果没有它，浏览器可能无法正确确定优先级下载，并且预加载提示可能会被忽略。始终为正在预加载的资源指定正确的 as 值。
预加载已缓存的资源：预加载已经缓存的资源是不必要的，并且会浪费带宽。检查您的浏览器缓存策略，以确保您没有预加载已经从缓存提供的资源。
资源路径不正确：确保 href 属性指向 CSS 文件的正确位置。拼写错误或路径不正确将阻止浏览器查找和预加载资源。
未进行测试：始终彻底测试您的预加载实现，以确保它实际上正在改善您网站的性能。使用 Google PageSpeed Insights、WebPageTest 或 Chrome DevTools 等工具来衡量预加载对您网站加载时间和性能指标的影响。

衡量 CSS 预加载的影响

衡量您的 CSS 预加载实现的影响至关重要，以确保它确实在改善您网站的性能。您可以使用几种工具和技术来衡量预加载的影响。

Google PageSpeed Insights：此工具提供了对您网站性能的宝贵见解，并确定了可以改进的地方。它还衡量关键性能指标，例如 FCP 和 LCP，这些指标可以直接受到预加载 CSS 的影响。
WebPageTest：这是一个功能强大的在线工具，允许您从不同的位置和浏览器测试您网站的性能。它提供了详细的瀑布图，显示了单个资源的加载时间，使您可以查看预加载对加载顺序的影响。
Chrome DevTools：Chrome DevTools 提供了用于分析您网站性能的一系列工具。您可以使用 Network 面板查看单个资源的加载时间，并使用 Performance 面板来分析您网站的渲染性能。
真实用户监控 (RUM)：RUM 涉及收集访问您网站的真实用户的性能数据。这提供了对您的网站在真实世界中、在不同网络条件和不同设备上的性能的宝贵见解。有许多 RUM 工具可用，例如 Google Analytics、New Relic 和 Datadog。

实际示例和案例研究

让我们看看一些实际示例，了解如何使用 CSS 预加载来改善网站性能。

1. 电子商务网站

电子商务网站可以使用 CSS 预加载来预加载产品列表和产品详细信息页面所需的关键 CSS。这可以显著提高网站的感知性能并降低跳出率。例如，一家总部位于欧洲的大型在线零售商在实施 CSS 预加载到其产品页面后，跳出率降低了 15%。

2. 新闻网站

新闻网站可以使用 CSS 预加载来预加载标题和文章内容所需的 CSS。这可以确保文章内容快速显示，即使在网络连接较慢的情况下也是如此。一家总部位于亚洲的新闻机构在他们的文章页面上实施 CSS 预加载后，FCP 提高了 10%。

3. 博客

博客可以使用 CSS 预加载来预加载主要内容区域和侧边栏所需的 CSS。这可以改善用户体验，并鼓励读者在页面上停留更长时间。北美的一家科技博客实施了 CSS 预加载，观察到页面停留时间增加了 20%。

CSS 预加载和 Web 性能的未来

CSS 预加载是一种优化 Web 性能的宝贵技术，随着网站变得越来越复杂并且用户要求更快的加载时间，它在未来可能会变得更加重要。随着浏览器继续发展并实现新的性能功能，CSS 预加载将仍然是前端开发人员的关键工具。

此外，对 HTTP/3 和 QUIC 等技术的日益采用将进一步增强预加载的好处。这些协议提供了改进的多路复用和降低的延迟，当与有效的资源预加载策略相结合时，可以实现更快的加载时间。随着这些技术变得越来越普遍，理解和实施 CSS 预加载的重要性只会持续增长。

结论

CSS 预加载是一项简单但强大的技术，可以显著提高您网站的性能。通过了解资源预加载的原理并有效地实施它，您可以创建更快、更具吸引力、对用户更友好的网站。请记住专注于预加载关键资源，正确使用 as 属性，避免常见陷阱，并始终衡量您的实现的影响。通过遵循这些准则，您可以充分发挥 CSS 预加载的潜力，并为您的受众提供卓越的用户体验，无论他们身在何处或使用什么设备。