Bootstrap，消除渲染阻塞资源

Question

资源阻碍了页面的第一次绘制。考虑内联交付关键 JS/CSS 并推迟所有非关键 JS/样式

css/bootsrtap.min.css css/main.css

我在 GTmetrix、PageSpeed Insights 上检查网站加载速度时收到此消息。它正在减慢我的网站速度。我该如何解决这个问题？请帮忙，谢谢。

Answer 1

通过提取类定义并将这些类放入<style>页面顶部的块中来交付关键 CSS：

例如

<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}
</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>

有关更多详细信息，请参阅本指南：https://web.dev/defer-non-ritic-css/