Я создаю веб-сайт, используя Веб-компоненты и Полимер загрузка активов через HTML-импорт.Как предотвратить блокировку визуализации для CSS, загружаемого через HTML-импорт?
Моя разметка выглядит примерно следующим:
<!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 Я получаю следующее сообщение об ошибке:
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
Смущает меня в том, что собственные, официальные Optimize CSS Delivery руководство государства Google ясно, что HTML Импорт должен загрузить CSS без рендеринга-блокировки:
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.
я делаю что-то не так? Это ошибка с помощью функции PageSpeed Insights?
Вам нужно, чтобы многие вес шрифта? Вы можете получить некоторую скорость, используя только 2 веса шрифта, а не 6 из них. http://fonts.googleapis.com/...y=Source+Sans+Pro:200,300,400,600,700,90? <== = (я предполагаю, что это 900.) 400 для тела и 700 для заголовков - все, что вам нужно. – zer00ne