html - 消除样式表的呈现阻塞资源

Question

我已经阅读了很多关于消除 Web.dev 上的渲染阻塞资源警告的文章，但结果是一样的。

这是我在 header 标签内的 HTML 代码:

<link rel="stylesheet" href="https://example.com/assets/inc/bootstrap.min.css" media="all" async>
<link rel="stylesheet" href="https://example.com/assets/inc/fontello.css" media="all" async>
<link rel="stylesheet" href="https://example.com/assets/inc/styling.css" media="all">
<link rel="stylesheet" href="https://example.com/v2/_assets/css/bootstrap-rtl.min.css" media="all" async>
<link rel="stylesheet" href="https://example.com/v2/_assets/css/theme.css" media="all" async>

我还为第一个 Contentful Paint 中不需要的每个样式表链接添加了 async 属性。

Answer 1

这将减少样式表的一些加载时间。首先，以正常方式加载 bootstrap.min.css。然后，将其他 css 文件合并到一个文件中(如果不是，请先缩小)并使用此 Javascript 加载它们。

var LinkHref = 'https://www.example.com/style.css'; // href of <link>
var LinkId   = 'cssStyle1'; // unique id of <link>
if (!document.getElementById(LinkId)) {
  var LinkCss  = document.createElement('link');
  LinkCss.href = LinkHref;
  LinkCss.id   = LinkId;
  LinkCss.rel  = 'stylesheet';
  LinkCss.type = 'text/css';
  document.getElementsByTagName('head')[0].appendChild(LinkCss);
}