如何使用 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/