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

Доброе утро!
Тестирую свою реализацию в 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);
});

Спасибо за помощь!
  • Вопрос задан
  • 1940 просмотров
Решения вопроса 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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы