css - 如何消除渲染阻塞资源(app.css)？

Question

我正在测试我创建的网络的性能。我尝试使用 Google's Page Speed和GT Metrix .在每个应用程序中产生不同的性能结果。

我试图在 Top Issue GT Matrix 中查看结果，app.css 中的渲染资源存在问题。我试图通过使用下面的代码来解决这个问题，初始渲染结果看起来不太好。

谁能帮我解决这个问题？

<link rel="stylesheet" href="http://103.148.190.87/css/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="http://103.148.190.87/css/app.css">
</noscript>

Answer 1

了解什么是“渲染阻塞资源”。

当浏览器请求您的页面时，它需要 HTML 和 CSS 才能正确呈现出现在“首屏”的任何内容。

“首屏”本质上是指无需滚动即可在屏幕上看到的任何内容。

关键 CSS 是呈现首屏内容所需的所有 CSS。

如果您的网站恰好是用 JS 呈现的，那么您还需要使用我在下面描述的类似技术来处理/呈现初始页面内容所需的 JS。但是这个答案是针对CSS的(原理是一样的，只是方法不同)。

为什么重要？

如果您的样式在外部样式表中，浏览器必须执行以下操作:

1. 下载页面的 HTML。
2. 查看呈现首屏内容需要哪些样式。
3. 下载需要的样式
4. 下载样式后，即可呈现内容。

如果有人使用高延迟连接(例如 4G，到服务器的往返时间可能为 300 毫秒或更长)，那么对 CSS 的额外网络请求确实会降低页面速度。

相反，我们想要做的是提供立即呈现首屏内容所需的所有样式，这样就不需要进一步的网络请求。

修复步骤

原理很简单，但要做到正确可能相当困难，可能需要一点耐心。

识别关键 CSS

有很多方法可以做到这一点，但它们通常取决于您的构建过程、堆栈等。

原则上，虽然您正在寻找一种工具，可以将首屏的 HTML 映射到与这些元素匹配的 CSS 类和样式。该工具随后应为您导出这些样式。

不幸的是，我还没有看到一个 100% 有效的工具，所以我建议你使用一个工具来获取大部分样式，然后(在内联关键 CSS 之后 - 见下文)删除所有外部样式表和查看是否有无法正确呈现的内容。在包含外部 CSS 的页面上检查它们并复制样式。

如果您在设计网站时没有考虑到这一点，这可能会很费力，但这是值得的。

内联关键 CSS

一旦确定了关键 CSS，您只需将其内联即可。

这只是意味着您将其缩小，然后将其添加到您的网站中 <style>页面顶部的标记。

这又回到了我在介绍中所说的部分。一旦你内联了所有的样式，浏览器就拥有了渲染页面所需的一切，而无需另一个网络请求。这极大地帮助了您的 First Contentful Paint、Largest Contentful Paint(通常)等。

延迟非关键 CSS

现在您已经内联了关键的 CSS，您只剩下两个步骤了:

1. 从您的样式表中删除关键的 CSS - 下载两次没有意义!
2. 使用您在原始问题中展示的方法:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Here's how it works:

• link rel="preload" as="style" requests the stylesheet asynchronously. You can learn more about preload in the Preload critical assets guide.
• The onload attribute in the link allows the CSS to be processed when it finishes loading.
• "nulling" the onload handler once it is used helps some browsers avoid re-calling the handler upon switching the rel attribute.
• The reference to the stylesheet inside of a noscript element works as a fallback for browsers that don't execute JavaScript.

取自https://web.dev/defer-non-critical-css/

伪例子

为了说明这一点，我们假设我们有一个网站，其中有一个简单的英雄部分出现在首屏之上。只需要三个 CSS 类就可以使这个英雄部分正常工作，因此我们为它内联 CSS。

<style>
.hero{
   min-width: 100%;
   height: 100vh;
   background: #333;
}
.hero h1{
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
section{
    width: 75%;
    margin: 0 auto;
    padding-top: 20px;
}
</style>

然后我们使用您描述的方法加载其余的 CSS:

<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"></noscript>

快速示例

<!-- normal styles that appear below the fold -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"></noscript>

<!-- all styles required for above the fold -->
<style>
.hero{
   min-width: 100%;
   height: 100vh;
   background: #333;
}
.hero h1{
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
section{
    width: 75%;
    margin: 0 auto;
    padding-top: 20px;
}
</style>

<!-- above the fold -->
<section class="hero">
   <h1>Above the fold - all required styles inlined</h1>
</section>

<!-- below the fold -->
<section class="below">
<h2>Below the fold, all classes in external style sheet</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>

<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>

<p>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

<p class="h4">Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>

<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. </p>


</section>