1

我正在通过HTML Imports使用Web Components和Polymer加载资产创建一个网站。

我的标记如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="vendor/webcomponentsjs/webcomponents-lite.min.js" async></script>
  <link rel="import" href="assets.html" />
</head>

<body>

在assets.html我以一种应避免渲染阻塞的方式显式加载 CSS：

<link rel="import" href="vendor/polymer/polymer-mini.html" />
<link href="main.min.css" rel="stylesheet" type="text/css" />
<link rel="import" href="header.html" />

但是，当我通过 Google 的PageSpeed Insights运行我的网站时，我收到以下错误：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS

您的页面有 2 个阻塞的 CSS 资源。这会导致呈现页面的延迟。

如果不等待以下资源加载，则无法呈现页面上的任何首屏内容。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。

优化以下 CSS 交付：

http://is-aws-assets.divshot.io/main.min.css

http://fonts.googleapis.com/ …y=Source+Sans+Pro:200,300,400,600,700,90

令我困惑的是，谷歌自己的官方优化 CSS 交付指南明确指出 HTML 导入应该加载 CSS 而不阻塞渲染：

请注意，Web 平台将很快支持以非渲染阻塞方式加载样式表，而无需使用 JavaScript，使用 HTML 导入。

难道我做错了什么？这是 PageSpeed Insights 的错误吗？

4

2 回答 2

2

文档是正确的，即使有点模棱两可。

<link>默认情况下不是非阻塞的，当它遇到嵌套的 CSS 资源时，它会阻塞渲染。

尝试async像这样添加属性：

<link rel="import" ... async>.

http://w3c.github.io/webcomponents/spec/imports/#link-type-import

于 2015-07-26T14:57:03.413 回答
2

根据您的 CSS 的大小，您还可以考虑将大部分 CSS 内联（如果不是全部 CSS）在元素的头部，而不是发出阻塞请求。

这样一来，您就不会像使用异步方法那样拥有一闪而过的无样式内容，也不会阻止您的内容显示。

于 2016-11-07T10:48:52.720 回答