预加载密钥请求 - 改进 css 调用

【问题标题】：Preload Key Request - Improving css calls预加载密钥请求 - 改进 css 调用
【发布时间】：2021-01-18 12:50:01
【问题描述】：

我正在尝试按照 Goggle 的 PageSpeed Insights 建议来提高网站的加载速度。我需要解决的主要问题之一如下：

网页调用这个css文件：

"link rel="stylesheet" href="https:.../main.css"

而main.css文件调用bootstrap.css文件：

在 main.css 中： @import url('bootstrap.css');

我尝试阅读有关链接 rel=preload 的 google 开发人员指南，但我仍然无法弄清楚我需要进行哪些更改。关于如何更改我的 css 调用以缩短页面加载时间的任何建议？

非常感谢

【问题讨论】：

【解决方案1】：

在文档的<head> 中，您只需添加一个元标记，告诉浏览器预加载字体。

<link rel="preload" href="yoursite.com/bootstrap.css" as="style" crossorigin>

这需要出现在您可能拥有的任何样式表链接之前。

关键部分是as="style" 和rel="preload" - 如果您使用CDN 等，可能需要crossorigin。

不管它是一个链接的 CSS 文件，它仍然可以工作。

同样对您的 main.css 文件执行相同操作。

【讨论】：