1

Web ComponentsとPolymerを使用して Web サイトを作成し、HTML Imports経由でアセットをロードしています。

私のマークアップは次のようになります。

<!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

私が混乱しているのは、Google 自身の公式のOptimize CSS Deliveryガイドで、HTML インポートはレンダリング ブロックなしで CSS をロードする必要があると明確に述べていることです。

Web プラットフォームは、HTML インポートを使用して、JavaScript を使用する必要なく、レンダリングをブロックしない方法でスタイルシートの読み込みをすぐにサポートすることに注意してください。

私は何か間違ったことをしていますか？これは 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 に答える