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>
当浏览器请求您的页面时，它需要正确地呈现任何出现在“折叠线”以上的HTML和CSS。
“折叠线”基本上是指在屏幕上可见且无需滚动即可看到的所有内容。
关键CSS是呈现折叠线以上内容所需的所有CSS。
如果您的网站使用JS进行渲染，则还需要使用与下面描述的用于水合/呈现初始页面内容的JS类似的技术。但是，此答案专注于CSS（原理相同，方法不同）。
如果您的样式在外部样式表中，则浏览器必须执行以下操作：
如果某人具有高延迟连接（例如4G，其中往返服务器的时间可能为300ms或更高），则这些额外的CSS网络请求可能会导致页面变慢。
相反，我们希望立即提供呈现折叠线以上内容所需的所有样式，以便不再需要进行网络请求。
原则很简单，但可能很难做到并需要耐心一点。
有许多方法可以做到这一点，但它们通常取决于您的构建过程、堆栈等。
然而，在原则上，您正在寻找一个工具，该工具将折叠线以上的HTML映射到与这些项目匹配的CSS类和样式。该工具应为您导出这些样式。
不幸的是，我尚未看到一个100％有效的工具，因此我建议您使用工具获取大部分样式，然后（在内联关键CSS之后-见下文）删除所有外部样式表，并查看是否存在无法正确呈现的内容。在包含外部CSS的页面上检查它们并将样式复制过来。
如果您没有考虑到这一点而且设计网站比较繁琐，但是值得投入时间和精力。
确定关键CSS后，您只需将其内联即可。
这只是意味着您需要压缩CSS并将其添加到页面顶部的<style>标签中。
这回到我在介绍中提到的部分。一旦内联了所有样式，浏览器就拥有了呈现页面所需的一切内容，无需进行其他网络请求。这对您的“首次内容绘制”、“最大内容绘制”（通常）等非常有帮助。
现在，您已经内联了关键CSS，只剩下两个步骤：
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
link rel="preload" as="style"` 异步请求样式表。有关 preload 的更多信息，请参阅 预加载关键资源指南。
- 在link中使用的onload属性允许在CSS完成加载后处理它。
- 一旦使用了onload处理程序，“nulling”该处理程序可帮助某些浏览器避免在切换rel属性时重新调用处理程序。
- 在noscript元素内部对样式表进行引用，可以作为未执行JavaScript的浏览器的备用方案。<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>
<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>好的，关键CSS很难。它很难实现、测试，然后保持最新状态。所以如果你不想做这个工作，你有一些选择。CSS文件仍然是渲染阻塞的，但你可以减轻它的影响。
建议尽可能精简你的app.css文件，通过删除未使用的CSS（即如果你只使用框架，请仅包含你使用的部分）。但不要在这里卡住。
然后在头部预加载样式表。不用担心预连接或预获取 - 只需预加载即可。
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
然后，我会确保视口中的任何图像都具有loading="eager"属性（可能重要，也可能不重要），并且已经预加载。
即使没有关键CSS，即使大多数规则未使用，您仍然可以在桌面和移动设备上获得快速的FCP / LCP。您可以在我的应用程序中看到一个示例（顺便说一下，这可能能帮助您）。
https://waterfaller.dev/?url=https://waterfaller.dev/
这个想法是确保在加载 LCP 之前，你加载的任何文件都是少量、快速和小型的。这样，你就可以避免处理关键 CSS 的麻烦。
你唯一可行的选择是压缩你的app.css文件，或者删除未使用的代码。
CSS文件总是阻塞渲染的，因为你不希望看到一个没有任何CSS的网站，即使只有一瞬间。
另外，还有一个提示：你可以为你的网站使用https，压缩方法如brotli或gzip来进一步减少负载。此外，你可以使用HTTP/2，在加载多个资源时速度更快。