Как удалить из верхней части страницы код CSS, блокирующий отображение?

Сейчас работаю над увеличением скорости загрузки сайта, используя Google PageSpeed Insights.

Google PageSpeed Insights дает такую рекомендацию:

Удалите из верхней части страницы код CSS, блокирующий отображение.
Количество блокирующих ресурсов CSS на странице: 20. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Что мне лучше сделать - вынести все теги <link rel="stylesheet"> за тег </html>?
Или использовать, например, yepnope (Modernizr) и подгружать CSS асинхронно с помощью JS? Можете предложить еще варианты решения этой проблемы?!
  • Вопрос задан
  • 32264 просмотра
Пригласить эксперта
Ответы на вопрос 4
mannaro
@mannaro Куратор тега JavaScript
Умею профессионально гуглить
Вынести теги за html? Мсье!

Объедините все в 1 файл и сожмите.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
теги link валидны только head. google предлагает вам добавлять эти теги в head через js:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>test</title>
</head>
<body>
<script>
(function (head, createElement) {
['/test.css','/a.css', 'b.css'].forEach(url) {
    var link = createElement('link');
    link.href = url;
    link.rel = 'text/stylesheet';
    head.appendChild(link);
});
}(document.head || document.getElementsByTagName('head')[0], document.createElement)); 
</script>
<script src="http://somecdn.com/jquery.com"></script>
<script>//+local fallback</script>
<script src="my/scripts.js"></script>
</body>

но если у вас их 20 лучше сначала просто собрать все в один файл и ужать каким minifycss

приведенный пример - просто пример. Он не должен работать.
Ответ написан
Gasoid
@Gasoid
либо скриптом добавлять в хед, либо забить на эти рекомендации. Вы замеряли влияние этого параметра на загрузку сайта ?
Ответ написан
Если файлов действительно много, они большие, вам лень идти по совету @Fesor и вы хотите грузить стили через JS, то могу посоветовать gianlucaguarini.github.io/jquery.html5loader . Помимо стилей можно подгружать еще много всего, а заодно и красиво оформить этот процесс.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы