How do I prevent render-blocking for CSS loaded via HTML Imports?

Question

I'm creating a web site using Web Components and Polymer loading assets via HTML Imports.

My markup looks something like the following:

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

In assets.html I explicitly load the CSS in a way that should avoid render-blocking:

<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" />

However, when I run my site through Google's PageSpeed Insights I get the following error:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 2 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Optimize CSS Delivery of the following:

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

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

What is confusing to me is that Google's own, official Optimize CSS Delivery guide states clearly that HTML Imports should load CSS without render-blocking:

Note that the web platform will soon support loading stylesheets in a non-render-blocking manner, without having to resort to using JavaScript, using HTML Imports.

Am I doing something wrong? Is this a bug with PageSpeed Insights?

Do you need that many font weights? You can gain some speed by using just 2 font weights rather than 6 of them. fonts.googleapis.com…y=Source+Sans+Pro:200,300,400,600,700,90? <== =(I assume that's 900.) 400 for body and 700 for headings is all you should need. — zer00ne

rogerovo rogerovo · Accepted Answer · 2015-07-26T14:57:03

the documentation is right, even though a little ambiguous.

<link> is not non-blocking by default, when it hits a nested CSS resources it blocks rendering.

try adding the async attribute like so:

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

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

How do I prevent render-blocking for CSS loaded via HTML Imports?

2 Answers