Как осуществить не блокирующую загрузку стилей?

Question

[Вячеслав Лебедев]

Доброе утро!
Тестирую свою реализацию в PageSpeed Insights. Он мне пишет, что я должен:
"Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение"
Скрипты поставил в конец body + async, осталось разобраться со стилями.
Их я поместил в скрипт, подключаемый в head+async:
(попутный вопрос: будет ли практическая польза при таком способе делить стили на два файла, основные стили и все остальное?)

[
    'styles/small.css',
    'styles/main.css'
].forEach(function (href) {
    var link = document.createElement('link');
    link.href = href;
    link.rel = 'stylesheet';
    document.head.appendChild(link);
});

Спасибо за помощь!

Answer 1

[GreatRash]

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css.css"></noscript>

UPD: фича в том, что браузер не блокирует рендер страницы если у стилей стоит media отличный от screen.

Comments

[Вячеслав Лебедев]

О такой тонкости я не слышал :) Спасибо!
Дополнил скрипт выше:

link(href='styles/small.css' media='none' onload='if(media!="all") media="all"' rel='stylesheet')

Гугл: Примерно 36 % содержания верхней части страницы можно отобразить, не дожидаясь загрузки указанных далее ресурсов. Попробуйте отложить ее или асинхронно загрузить блокирующие ресурсы либо встроить их особо важные составляющие прямо в код HTML.
Оптимизируйте работу CSS на следующих ресурсах:
styles/small.css
Результат не изменен.

[Евгений Балашов]

Почему бы тогда просто не вставлять не самые важные стили вниз страницы? вместо использования media=none