Как предотвратить блокировку визуализации для CSS, загружаемого через HTML-импорт?

Я создаю веб-сайт, используя Веб-компоненты и Полимер загрузка активов через 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?

источник

2015-07-26 Ricardo Gladwell

Вам нужно, чтобы многие вес шрифта? Вы можете получить некоторую скорость, используя только 2 веса шрифта, а не 6 из них. http://fonts.googleapis.com/...y=Source+Sans+Pro:200,300,400,600,700,90? <== = (я предполагаю, что это 900.) 400 для тела и 700 для заголовков - все, что вам нужно. – zer00ne

документация правильная, хотя и немного неоднозначная.

<link> не блокирует по умолчанию, когда он попадает в вложенные ресурсы CSS, он блокирует рендеринг.

попробуйте добавить атрибут async так:

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

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

источник

2015-07-26 14:57:03 rogerovo

Кажется, я получаю то же сообщение об ошибке на странице PageSpeed Insights, когда добавляю атрибут 'async'. –

В зависимости от размера вашего CSS вы можете также рассмотреть inlineing большую часть, если не все CSS в голове вашего элемента, а не делать запрос на блокировку.

Таким образом, у вас не будет вспышки неравномерного содержимого, как в случае с асинхронным подходом, и вы не будете блокировать отображение своего содержимого.

источник

2016-11-07 10:48:52

Я понимаю, почему люди это делают, но, похоже, это побеждает точку CSS: отделяет контент от стиля. Жаль, что это единственное решение этой проблемы. –

Как предотвратить блокировку визуализации для CSS, загружаемого через HTML-импорт?

ответ

Смежные вопросы