I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports.
This is an example of my markup:
<!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 the assets.html file, I have specifically loaded the CSS in a way that should prevent it from blocking render:
<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 running my site through Google's PageSpeed Insights, I receive the following error message:
Eliminate render-blocking JavaScript and CSS resources in above-the-fold content
Your page has 2 CSS resources that block rendering.
None of the content above the fold can be displayed until these resources are fully loaded. The suggestion is to defer loading or load them asynchronously.
Optimize CSS delivery for the following:
…y=Source+Sans+Pro:200,300,400,600,700,90
I find this confusing because Google's official Optimize CSS Delivery guide clearly states that HTML Imports should load CSS without causing render-blocking issues:
The web platform will soon support loading stylesheets in a non-render-blocking manner without needing JavaScript by utilizing HTML Imports.
Could I be making an error in my implementation? Or could this be a bug within PageSpeed Insights?