Как подключить асинхронно файл со стилями October CMS?

Question

[Gorila Lopster]

PageSpeed Insights просит "Устраните ресурсы, блокирующие отображение"
css/home.css 12 KB 180 ms
прочитал в интернете что нужно подключить асинхронно css файл, таким методом:

$(document).ready(function() {
    $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
})

на данный момент home.css подключен в head.htm

с таким кодом

[viewBag]
snippetCode = "head-slot" == {% component 'bronxSEOWidget' %}

<link rel="stylesheet" href="{{ 'assets/css/home.css'|theme }}" type="text/css" media="only screen" />

Как и куда его подключить чтоб не ругался гугл спид??

Comments

[Adamos]

Имхо, дурной совет. Если это основной стиль страницы, то она у вас загрузится без стилей, потом с заметной задержкой будет перерисована, когда подгрузятся стили. Вам важнее, чтобы роботы были довольны - или пользователи?
Сейчас стиль ничего, собственно, и не блокирует - скромно подключается в конце страницы и хлеба не просит.

Кроме того, так, как вы написали, он у вас вообще не подключится - нужен путь до файлов стилей текущей темы.

Answer 1

[Vitaliy Orlov]

перед </body> (закрывающийся тег body)

Comments

[Gorila Lopster]

а этот файл head.htm вообще удалить?

[Vitaliy Orlov]

Gorila Lopster, я не силен в OCtoberCMS, думаю, не надо удалять, достаточно убрать/закомментировать подключение стилей в нем. Т.е. оставить его так

[viewBag]
snippetCode = "head-slot" == {% component 'bronxSEOWidget' %}

[Николай Паротиков]

Рекомендую css для первого экрана вынести в инлайновые стили (в тег style), а остальные стили подключать внизу страницы, как рекомендует Vitaliy Orlov. Асинхронности здесь не требуется.

Ну и проверьте настройки веб-сервера, css должны кешироваться в браузере. Плюс 180мс для возврата статики больно много, но это уже совсем другая история.